How To Add A Sliding Announcement Bar Manually In Shopify
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
- From your Shopify admin, go to Online Store > Themes.
- Click Actions, and then click Edit Code.
- Under the Sections folder, click on Add a new section link to create a new section.
- Fill the section name – hura-announcement-bar to the field on the dialog and click Create section button.
- In the online code editor, please replace the existing code with the below code.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%}<div class="hura-announcement-bar swiper-container"><div class="hura-messages swiper-wrapper">{%- for block in section.blocks -%}<div class="hura-message swiper-slide">{{block.settings.message}}</div>{%- endfor -%}</div><div class="hura-swiper-button swiper-button-prev"></div><div class="hura-swiper-button swiper-button-next"></div></div><p style="display:none!important;">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p><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>.hura-announcement-bar{background:{{section.settings.colorBackground}};position: relative;overflow: hidden;}.hura-announcement-bar .hura-message{text-align:center;color:{{section.settings.colorText}};padding:0 7%;}.hura-announcement-bar .swiper-button-next:after, .hura-announcement-bar .swiper-container-rtl .swiper-button-prev:after,.hura-announcement-bar .swiper-button-prev:after, .hura-announcement-bar .swiper-container-rtl .swiper-button-next:after{font-size: 15px;color:{{section.settings.colorText}};}{%- if section.blocks.size < 2 %}.hura-announcement-bar .hura-swiper-button{display:none!important;}{%- endif -%}</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 %}
- Click Save.
Step 2: Add the section to the header
- Under the Layout folder, click onto theme.liquid to open file editor.
- In the online code editor, find the script
{% section 'header' %}and insert the below code before this script.1{%- section 'hura-announcement-bar' -%}
- Click Save.
Step 3: Create a new Sliding Announcement Bar
- From your Shopify admin, go to Online Store > Themes.
- Click Customize.
- You will see a new section – Announcement Bar.
- Click on Add Message to add a new message slider. And you can configure the options for the slider.
- Click Save and you are done.
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!
Yeah! I’ve just updated the CSS code.
Can you please fix the position of these two buttons? I am using your code, thanks!
Please copy the new code of “hura-announcement-bar.liquid” file. I’ve updated it into the article.
Awesome code! mate a quick question, it loads the code for a split second then loads the website, any reason for this?
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!
did you fixed it?
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
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 %}
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
I am also getting this error! Any idea how to fix?
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.
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
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?
Hi, is it possible to change the font style?
Thanks in advance
Daan
Yes, you can.
Hi could you share how it’s done? I too want to change it to my brand typography that i’ve preselected in theme settings
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
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
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.
Did you find fix?
did you fix this?
Thank you for this, any update?
Some errors have occurred similar to previous comments ^^
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.
Hey man, thank you very mcuh for you great code! but for me the text is not centered, check, pls: https://prnt.sc/SZjKTl5qt-4T
Hey man, thank you very mcuh for you great code! but for me the text is not centered, check, pls: https://prnt.sc/SZjKTl5qt-4T
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{
text-align:center;
color:{{section.settings.colorText}};
padding:0;
}
Let me know if you have any questions!
It just works
Can you create a code for an announcement bar that scrolls on a loop?
Can you create a code that allows an announcement bar that scrolls on a loop?