Skip to main content

How to Add a Social Proof Block in Shopify Product Page (Dawn Theme)

 Adding social proof to your product pages can significantly increase trust and conversion rates. In this tutorial, we'll show you how to add a stylish Verified Testimonials block to your Shopify store using the Dawn theme . This block displays user avatars, names, and a verified icon—all customizable from the theme editor. ✅ Step 1: Open the main-product.liquid file Go to your Shopify Admin. Navigate to: Online Store → Themes → Edit code . Open the file: sections/main-product.liquid . Now add this code exactly as I’ve shown in the video — and yes, make sure to test it on a duplicate theme first! Full Code {%- when 'verified-testimonials' -%} <style> .verified-testimonials-container-{{block.id}} .verified-testimonials-user-icon-img-class { width: {{block.settings.verified_use...
Post a Comment

How to Create Custom Announcement Bar with Slider in Shopify.

In this blog post, we'll learn how to create an announcement bar using the Swiper.js library in Shopify with custom coding. The announcement bar is a simple but effective way to display important messages or announcements on your website. With Swiper.js, we can easily create a dynamic and interactive announcement bar with customizable settings.



Prerequisites

Before we begin, make sure you have included the Swiper.js library in your project. You can do this by adding the following code to the <head> section of your HTML file:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML Structure

To create the announcement bar, we'll need to define a container element and a set of messages or announcements. Here's the HTML structure for the announcement bar:

<div id="announcement-bar" class="swiper-container zwk-announcement-bar">
  <div class="swiper-wrapper">
    <!-- Add your messages here -->
    <div class="swiper-slide zwk-message">
      {{block.settings.message}}
    </div>
    <!-- Add more messages if needed -->
  </div>
</div>

Replace {{block.settings.message}} with the actual content of your messages. You can add more messages by duplicating the <div class="swiper-slide zwk-message">...</div> block.

CSS Styling

Next, let's add some CSS styles to customize the appearance of the announcement bar. We'll define styles for the container and the messages. You can modify these styles to match your website's design:

<style>
  .zwk-announcement-bar {
    background: {{section.settings.colorBackground}};
    position: relative;
    overflow: hidden;
  }

  .zwk-announcement-bar .zwk-message {
    text-align: center;
    color: {{section.settings.colorText}};
    font-size: {{section.settings.font_size}}px;
    text-transform: {{section.settings.mobile_thumbnails1}};
  }

  /* Additional styles for the announcement bar */
  #announcement-bar {
    height: 40px; /* Adjust the height as needed */
    color: #333; /* Customize the text color */
    font-size: 14px; /* Customize the font size */
  }

  .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Feel free to modify the styles according to your preferences. The .zwk-announcement-bar class styles the container, and the .zwk-message class styles the individual messages.

JavaScript Initialization

To initialize the Swiper.js carousel for the announcement bar, we'll use JavaScript. We'll add an event listener for the DOMContentLoaded event to ensure the JavaScript code runs after the HTML has been fully loaded. Here's the JavaScript code:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var swiper = new Swiper('#announcement-bar', {
      direction: 'vertical',
      loop: true,
      {%- if section.settings.autoplay %}
      autoplay: {
        delay: {{section.settings.delay}}
      },
      {%- endif -%}
      effect: 'slide',
      speed: 500, // Adjust the animation speed (in milliseconds)
    });
  });
</script>

Here is the full code:


<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
{%- if  section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div id="announcement-bar" class="swiper-container  zwk-announcement-bar">
  <div class="swiper-wrapper">
       {%- for block in section.blocks -%}
    <div class="swiper-slide zwk-message">
      {{block.settings.message}}
    </div>
    {% endfor %}
  </div>
</div>
<style>
    .zwk-announcement-bar{
    background:{{section.settings.colorBackground}};
    position: relative;
    overflow: hidden;
  }
    .zwk-announcement-bar .zwk-message{
    text-align:center;
    color:{{section.settings.colorText}};
    font-size:{{section.settings.font_size}}px;
    text-transform:{{section.settings.mobile_thumbnails1}};
    
  }
  #announcement-bar {
  height: 40px; /* Adjust the height as needed */
  color: #333; /* Customize the text color */
  font-size: 14px; /* Customize the font size */
}

.swiper-slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('#announcement-bar', {
    direction: 'vertical',
    loop: true,
    {%- if section.settings.autoplay %}
    autoplay: {
      delay: {{section.settings.delay}}
    },
      {%- endif -%}
    effect: 'slide',
    speed: 500, // Adjust the animation speed (in milliseconds)
  });
});

</script>
{%- endif -%}
{% schema %}
  {
    "name": "Custom Announcement Bar",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_announcement_bar",
        "label": "Show"
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Autoplay"
      },
      {
        "type": "text",
        "id": "delay",
        "label": "Delay between transitions (in ms)",
        "default": "5000"
      },
      {
        "type": "color",
        "id": "colorBackground",
        "label": "Background color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "colorText",
        "label": "Text color",
        "default": "#000"
      },
   {
      "type": "range",
      "id": "font_size",
      "min": 14,
      "max": 50,
      "step": 4,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
 {
      "type": "select",
      "id": "mobile_thumbnails1",
     "label": "Text transform",
      "options": [
        {
          "value": "uppercase",
          "label": "Upper case"
        },
        {
          "value": "lowercase",
          "label": "Lower case"
        },
       {
          "value": "Capitalize",
          "label": "Capitalize"
        }
      ]
    }
],
"blocks": [
      {
        "type": "header",
        "name": "Message",
        "settings": [
          {
              "id": "message",
              "type": "text",
             "label": "Enter your text"
            }
        ]
      }
],
"presets":[
    {
        "name":"Custom Announcement Bar"
    }
]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Labels:

Comments

Post a Comment

Popular posts from this blog

How to create a Image scrolling/marquee section in Shopify theme

We are excited to unveil our latest addition to the customization options for your website: the Image Marquee section. This dynamic feature allows you to create a continuous scrolling display of your brand logos, offering a visually engaging way to showcase your partners, sponsors, or featured brands. Let's dive into the features and customization options available with the Image Marquee section. Key Features Continuous Scrolling Animation : The marquee animation provides a smooth, continuous scroll of images, giving your site a modern and dynamic feel. Responsive Design : The section is fully responsive, ensuring that your logos look great on desktops, tablets, and mobile devices. Customizable Speed and Direction : Adjust the scroll speed and choose the direction of the animation to fit your design preferences. Interactive Elements : You can enable or disable the pause-on-hover feature, giving visitors the option to pause the marquee for a closer look at the logos. Styling Option...
1 comment
Read more

🔥 How to Create Stunning Section Dividers in Shopify

 Creating visually striking section dividers is a fantastic way to enhance the design and flow of your Shopify store. Section dividers can break the monotony of a page, guide the user’s eye, and add a professional touch to your site’s layout. In this blog, we'll explore how to create custom section dividers in Shopify using Liquid , CSS , and Schema options for maximum flexibility. 🛠 Why Use Section Dividers? Improve Visual Appeal : Add flair to your design and make transitions between sections seamless. Enhance Branding : Use custom shapes or patterns that reflect your brand identity. Guide User Attention : Direct users to specific sections like promotions, testimonials, or CTAs. Create Distinction : Separate content effectively to improve readability and layout organization. 📝 How to Add Custom Section Dividers in Shopify Follow these steps to create and customize section dividers: 1️⃣ Add a Section File Log in to your Shopify admin and navigate to Online Store > Themes . C...
1 comment
Read more

How to Add a Social Proof Block in Shopify Product Page (Dawn Theme)

 Adding social proof to your product pages can significantly increase trust and conversion rates. In this tutorial, we'll show you how to add a stylish Verified Testimonials block to your Shopify store using the Dawn theme . This block displays user avatars, names, and a verified icon—all customizable from the theme editor. ✅ Step 1: Open the main-product.liquid file Go to your Shopify Admin. Navigate to: Online Store → Themes → Edit code . Open the file: sections/main-product.liquid . Now add this code exactly as I’ve shown in the video — and yes, make sure to test it on a duplicate theme first! Full Code {%- when 'verified-testimonials' -%} <style> .verified-testimonials-container-{{block.id}} .verified-testimonials-user-icon-img-class { width: {{block.settings.verified_use...
Post a Comment
Read more