Shopify themes, liquid, logos, and UX
Hello everyone,
I would like to have an Automatic Static Sliding Announcement Bar just like Gymshark:
I am using Dawn Theme by the way.
Help would be appreciated 🙂
Thank you!
Solved! Go to the solution
This is an accepted solution.
You can check it. Let me know, if you need any more help.
Hi,
Welcome to Shopify community,
Kindly follow this step,
Create a Section 'announcement-bar-slider.liquid' file,
{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="zwk-announcement-bar swiper-container">
<div class="zwk-messages swiper-wrapper">
{%- for block in section.blocks -%}
<div class="zwk-message swiper-slide">{{block.settings.message}}</div>
{%- endfor -%}
</div>
<div class="zwk-swiper-button swiper-button-prev"></div>
<div class="zwk-swiper-button swiper-button-next"></div>
</div>
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/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>
.zwk-announcement-bar{
background:{{section.settings.colorBackground}};
position: relative;
overflow: hidden;
}
div#shopify-section-Announcement-slider {
text-align: center;
}
.zwk-announcement-bar .zwk-message{
text-align:center;
color:{{section.settings.colorText}};
font-size:{{section.settings.font_size}}px;
text-transform:{{section.settings.mobile_thumbnails1}};
}
.zwk-announcement-bar .swiper-button-next:after, .zwk-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
.zwk-announcement-bar .swiper-button-prev:after, .zwk-announcement-bar .swiper-container-rtl .swiper-button-next:after{
font-size: 15px;
color:{{section.settings.colorText}};
}
{%- if section.blocks.size < 2 %}
.zwk-announcement-bar .zwk-swiper-button{display:block!important;}
{%- endif -%}
</style>
{%- endif -%}
{% schema %}
{
"name": "Announcement slider 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"
},
{
"type": "range",
"id": "font_size",
"min": 14,
"max": 50,
"step": 4,
"unit": "px",
"label": "Font size",
"default": 14
},
{
"type": "select",
"id": "mobile_thumbnails1",
"label": "Text transform",
"options": [
{
"value": "uppercase",
"label": "Upper case"
},
{
"value": "lowercase",
"label": "Lower case"
},
{
"value": "Capitalize",
"label": "Capitalize"
}
]
}
],
"blocks": [
{
"type": "header",
"name": "Message",
"settings": [
{
"id": "message",
"type": "text",
"label": "Enter your text"
}
]
}
]
}
{% endschema %}
and paste this code.
Now Go to theme.liquid file and find put this {% section 'announcement-bar-slider ' %}
Below the announcement bar,
thank you,
Let me know, if you want to know more.
Hi @SpeedyDev ,
What do I exactly need to find in theme.liquid file?
You lost me when you said: "Now Go to theme.liquid file and find put this {% section 'announcement-bar-slider ' %} Below the announcement bar"
Thank you for your help
Why you lost?
their a simple on the top of the section you will find theme.liquid file.
yes, you have to add it on the theme.liquid file
Hi @SpeedyDev ,
Thank you, yes I know where to find the theme.liquid file.
But if I paste {% section 'announcement-bar-slider ' %} below the announcement bar in the theme.liquid file (screenshot 1) then I get a liquid error below my announcement bar (screenshot 2)
Screenshot 1:
Screenshot 2:
Have you Added the code on the Section?, or you created the Section.
named announcement-bar-slider.
Yes I created the section named "announcement-bar-slider.liquid" and added the long code, just like you said to me right?
Do you want me to give you access to the admin side on this email: ravirajsam221@gmail.com ?
Sure, I sent an invite for staff access!
Thank you, let me know if you can fix it or need anything else 🙂
This is an accepted solution.
Hi @SpeedyDev
I'm trying your code too and I get the same liquid error too. May I know what did you change to make it work for @KC14
Hi @SpeedyDev ,
I also dont get it to work, would you mind sharing how you did it for @KC14 ?
Best regareds,
Daniel
Do you still have the issue? I found the issue and now its working for me, thank you speedy for the code, very gratefull
original: {% section 'announcement-bar-slider ' %}
change to: {% section 'announcement-bar-slider' %}
Hello Speedy I am having the same problem can you please share with me too.
Best Regards
Hello @SpeedyDev , what about the Dawn theme 9.0? Where should the call of the slider go?
Thank u in advance
@KC14 ,
Hi You can refer this app.
https://apps.shopify.com/announcement-bar-with-slider
Or you can create custom app in your Shopify theme, If you are having good knowledge of code.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024