Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Does anyone have a code for a looping slider in the announcement bar?
Hi @Jòóst
This is Victor from PageFly - Shopify Page Builder App
You will need to add a custom code for the announcement bar to your theme. Please follow my steps below
Step 1: Create a new section
{%- 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
Step 3: Create a new Sliding Announcement Bar
Hope this can help you solve the issue
Best regards,
Victor | PageFly
Hi, @PageFly-Victor I use your code but it does not align well in the middle more on the right side on desktop and mobile. Can you check if you can make a announcement bar like kawaiibonjour.com?
Add the code below in the beginning of your announcement bar liquid.
****************************
hi reviving this topic
- ive done these steph thank you very much - working perfectly
a couple of advancements if possible?
- can the height be set at all? - the text is a little close to the header and content below
- can links be added to the text to take you to the sign up page for instance
TIA
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025