How To Add Announcement Bar Slider – Shopify Dawn Theme

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' -%}