How To Add A Sliding Announcement Bar Manually In Shopify

Sell Online With Shopify
Trusted by millions of businesses worldwide
For a limited time, sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans — offer ends Aug 25.

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.

LIVE DEMO

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.

LIVE DEMO

You may also like...

18 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.link -%}
      {{ block.settings.content | escape }}
      {%- else -%}
      {{ block.settings.content | escape }}
      {%- endif -%}

      {%- endfor -%}

      //unpkg.com/swiper/swiper-bundle.min.js

      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-{{ section.id }} {
      background: {{ section.settings.background }};
      color: {{ section.settings.text_color }};
      text-align: center;
      }
      .hura-swiper-button{
      display:none!important;
      }

      document.documentElement.style.setProperty(‘–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

    Daan

  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:

    Hi,

    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.

Leave a Reply

Your email address will not be published.