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 class="websensepro-swiper-button swiper-button-prev"></div>
  <div class="websensepro-swiper-button swiper-button-next"></div>
<!-- code by -->
<script src="//"></script>
<link rel="stylesheet" href="//" />
  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',
    position: relative;
    overflow: hidden;
  .websensepro-announcement-bar .websensepro-message{
  .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;
  {%- if  section.blocks.size < 2 %}
  .websensepro-announcement-bar .websensepro-swiper-button{display:none!important;}
  {%- endif -%}
  .websensepro-swiper-button {
    display: block !important;
    top: 75% !important;

{%- 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

4.6/5 - (37 votes)


17 thoughts on “How To Add Announcement Bar Slider – Shopify Dawn Theme”

  1. Liquid error (layout/theme line 249): Error in tag ‘section’ – ‘websensepro-announcement-bar’ is not a valid section type

    no banner occurs after following steps only this error as above

  2. Hi, in the preset code of shopify dawn theme it says
    {% sections ‘header-group’ %}

    {{ content_for_layout }}

    {% sections ‘footer-group’ %}

    There is not announcement section above the ‘header’

  3. Hey! Just a refresher here,

    The loop actually started working, didn’t change anything, so I’m not really sure what happened there.

    Anyway, I noticed the bar is not sticky, is there a way to add that?

    Thanks for your support!

Leave a Comment

Your email address will not be published. Required fields are marked *