How To Add A Sliding Announcement Bar Manually In Shopify

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy the first month of Shopify for $1.

The announcement bar helps shop owners alert their store visitors or customers to the latest updates about discounts, sales, expiring items, new collections and so much more.

In fact, you only can add a message on this bar. If you want more messages, an announcement bar with a with message slider is a solution for you.


This article will teach you how to create the announcement bar with a slider in Shopify.

Following the below steps to know how to do that:

Step 1: Create a new section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions, and then click Edit Code.
  3. Under the Sections folder, click on Add a new section link to create a new section.
  4. Fill the section name – hura-announcement-bar to the field on the dialog and click Create section button.
  5. In the online code editor, please replace the existing code with the below code.
  6. Click Save.

Step 2: Add the section to the header

  1. Under the Layout folder, click onto theme.liquid to open file editor.
  2. In the online code editor, find the script{% section 'header' %} and insert the below code before this script.

  3. Click Save.

Step 3: Create a new Sliding Announcement Bar

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize.
  3. You will see a new section  – Announcement Bar.
  4. Click on Add Message to add a new message slider. And you can configure the options for the slider.
  5. Click Save and you are done.


Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

30 Responses

  1. Kris says:

    Hello, thank you for sharing! But I found that when I tested the code on my website, the pre and next buttons were in the middle of the entire website page, not in the middle of the Announcement Bar. I noticed that the CSS of these codes was introduced into your link. May I ask you Is there a problem with the code? Thanks in advance!

  2. Steve says:

    Awesome code! mate a quick question, it loads the code for a split second then loads the website, any reason for this?

  3. Otaku Emporiamu says:

    Yo! i’m having a similar issue, the bar isnt going in the middle, also it messes up and goes to the right a bunch of times!

  4. Biamah says:

    Hello is there a way I can add a link to the announcement bar and change the font as well. Looking forward to your response

    • Jacob says:

      Hi Biamah!

      I implemented it like this:

      {%- if section.settings.enable_bar -%}
      {%- unless section.settings.home_page_only and template != ‘index’ -%}

      {%- for block in section.blocks -%}

      {%- if -%}
      {{ block.settings.content | escape }}
      {%- else -%}
      {{ block.settings.content | escape }}
      {%- endif -%}

      {%- endfor -%}


      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’,

      #section-{{ }} {
      background: {{ section.settings.background }};
      color: {{ section.settings.text_color }};
      text-align: center;
      }‘–announcement-bar-height’, document.getElementById(‘shopify-section-announcement’).offsetHeight + ‘px’);

      {%- endunless -%}
      {%- endif -%}

      {% schema %}
      “name”: “Announcement bar”,
      “settings”: [
      “type”: “checkbox”,
      “id”: “enable_bar”,
      “label”: “Enable bar”,
      “default”: true
      “type”: “checkbox”,
      “id”: “home_page_only”,
      “label”: “Home page only”,
      “default”: false
      “type”: “checkbox”,
      “id”: “autoplay”,
      “label”: “Autoplay”,
      “default”: false
      “type”: “text”,
      “id”: “delay”,
      “label”: “Delay between transitions (in ms)”,
      “default”: “5000”
      “type”: “color”,
      “id”: “background”,
      “label”: “Background”,
      “default”: “#000000”
      “type”: “color”,
      “id”: “text_color”,
      “label”: “Text”,
      “default”: “#ffffff”
      “blocks”: [
      “name”: “Content”,
      “type”: “header”,
      “settings”: [
      “type”: “text”,
      “id”: “content”,
      “label”: “Content”
      “type”: “url”,
      “id”: “link”,
      “label”: “Button link”
      {% endschema %}

      • Mama Y says:

        Thank you soo much ! I really appreciate it unfortunately I keep getting errors : Line 2 — Liquid syntax error: Unexpected character ‘ in “section.settings.home_page_only and template != ‘index’”

        Could you please help me out

  5. nathan says:

    hi in the padding section where itis 0 7%; in the code at the top change this to 00px

    problem solved, other than that great code.

  6. Manikya Gupta says:

    The code is good but there is a problem in it whenever we reload the page or go another page it shows the announcement bar text if that problem is solved the code is best

  7. Christie says:

    I need help! I followed your instructions and there are a bunch of numbers (1-94) at the top of my page now, just above the new header (which works great!). Help?

  8. Daan says:

    Hi, is it possible to change the font style?

    Thanks in advance


  9. Team Dev says:

    Everything works fine, but when it comes to 2 line, the text is not getting aligned vertically. Is there any solution for this.

    Thank you

  10. wayne says:


    thank you for the code

    i have an issue if anyone could help though

    i have followed to instructions to the letter and every works fine, until i save my announcement bar messages at which point, the announcement bar disappears and if i refresh the page, the messages i have setup are gone

    any help would be great

  11. Marina B says:

    Hi, thanks for the code; looks great! However, I’m facing an issue. The alignment is off centre, more to the right and the following message that slides in shifts further to the right. Any way I can correct this? I am using Dawn 5.0.

  12. Phi says:

    Thank you for this, any update?
    Some errors have occurred similar to previous comments ^^

    • Nathan says:

      I commented a while ago with a very easy fix in the padding section where itis 0 7%; in the code at the top change this to 00%

      problem solved, other than that great code.

  13. Adriano da Silva Nascimento says:

    Hey man, thank you very mcuh for you great code! but for me the text is not centered, check, pls:

  14. Adriano says:

    Hey man, thank you very mcuh for you great code! but for me the text is not centered, check, pls:

    • Facundo Fernandez says:

      Hi! I was able to fix this. Just delete the 7% padding on the .hura-announcement-bar .hura-message under . Your code should be left like this.

      .hura-announcement-bar .hura-message{

      Let me know if you have any questions!

  15. Javier Santiago says:

    It just works

  16. Cece says:

    Can you create a code for an announcement bar that scrolls on a loop?

  17. Cece says:

    Can you create a code that allows an announcement bar that scrolls on a loop?

Leave a Reply

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