How To Add Announcement Bar Slider – Shopify Dawn Theme

Welcome to WebSense Pro! In this step-by-step tutorial, we will guide you through the process of adding an announcement bar slider to your Shopify store using the Dawn Theme. Whether you’re a beginner or an experienced Shopify user, this tutorial will help you create an engaging announcement bar slider without the need for coding or file editing. Let’s dive in!

The Dawn Theme, specifically version 10.0.0, introduces a new feature that simplifies the process of creating an announcement bar slider. Unlike older versions, such as 8.0.0 or 9.0.0, you no longer need to modify any code to achieve this functionality. This update allows for a seamless user experience when adding and managing your announcement bar slider.

Remember, a well-designed announcement bar slider can effectively capture your visitors’ attention and convey important messages or promotions. Take advantage of this feature to keep your customers informed and engaged while adding a touch of visual flair to your store.

We hope you found this tutorial helpful. Feel free to explore more Shopify tips and tricks on our channel and subscribe to WebSense Pro for future updates and valuable content. Happy customizing!

For Dawn Version 9.0 and Below ⬇️:

Adding an Announcement Bar Slider to your Shopify Dawn theme is a great way to keep your customers informed of the latest news and updates. In this video, you will learn how to add an Announcement Bar Slider to your theme and customize its settings.

Create A New Section

Create A New Section

Create a new section called “websensepro-announcement-bar.liquid” and add following code on newly created section

{%- if  section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="websensepro-announcement-bar swiper-container">
  <div class="websensepro-messages swiper-wrapper">
    {%- for block in section.blocks -%}
    <div class="websensepro-message swiper-slide">{{block.settings.message}}</div>
    {%- endfor -%}
  </div>
  <div class="websensepro-swiper-button swiper-button-prev"></div>
  <div class="websensepro-swiper-button swiper-button-next"></div>
</div>
<!-- code by websensepro.com -->
<script src="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script>
  const swiper = new Swiper('.swiper-container', {
    {%- if section.settings.autoplay %}
    autoplay: {delay: {{section.settings.delay}} },
    {%- endif -%}
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
<style>
  .websensepro-announcement-bar{
    background:{{section.settings.colorBackground}};
    position: relative;
    overflow: hidden;
  }
  .websensepro-announcement-bar .websensepro-message{
    text-align:center;
    color:{{section.settings.colorText}};
    padding:0;
  }
  .websensepro-announcement-bar .swiper-button-next:after, .websensepro-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
  .websensepro-announcement-bar .swiper-button-prev:after, .websensepro-announcement-bar .swiper-container-rtl .swiper-button-next:after{
    font-size: 15px;
    color:{{section.settings.colorText}};
  }
  {%- if  section.blocks.size < 2 %}
  .websensepro-announcement-bar .websensepro-swiper-button{display:none!important;}
  {%- endif -%}
  .websensepro-swiper-button {
    display: block !important;
    top: 75% !important;
  }

</style>
{%- endif -%}

{% schema %}
  {
    "name": "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"
      }
],
"blocks": [
      {
        "type": "header",
        "name": "Message",
        "settings": [
{
              "id": "message",
              "type": "textarea",
             "label": "Message"
            }
        ]
      }
]
  }
{% endschema %}

Add Code in Theme.liquid File

Add the following code in theme.liquid file just above {% section 'header' %} or {% sections ‘header-group’ %}

{%- section 'websensepro-announcement-bar' -%}

If you want help with Shopify Customization, store development, or any other web development help. Contact Us Now