Adding an Announcement Bar Slider to your Shopify Dawn theme is a great way to keep your customers informed of the latest news and updates. In this video, you will learn how to add an Announcement Bar Slider to your theme and customize its settings.
Create A New Section
Create A New Section
Create a new section called “websensepro-announcement-bar.liquid” and add following code on newly created section
{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="websensepro-announcement-bar swiper-container">
<div class="websensepro-messages swiper-wrapper">
{%- for block in section.blocks -%}
<div class="websensepro-message swiper-slide">{{block.settings.message}}</div>
{%- endfor -%}
</div>
<div class="websensepro-swiper-button swiper-button-prev"></div>
<div class="websensepro-swiper-button swiper-button-next"></div>
</div>
<!-- code by websensepro.com -->
<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>
.websensepro-announcement-bar{
background:{{section.settings.colorBackground}};
position: relative;
overflow: hidden;
}
.websensepro-announcement-bar .websensepro-message{
text-align:center;
color:{{section.settings.colorText}};
padding:0;
}
.websensepro-announcement-bar .swiper-button-next:after, .websensepro-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
.websensepro-announcement-bar .swiper-button-prev:after, .websensepro-announcement-bar .swiper-container-rtl .swiper-button-next:after{
font-size: 15px;
color:{{section.settings.colorText}};
}
{%- if section.blocks.size < 2 %}
.websensepro-announcement-bar .websensepro-swiper-button{display:none!important;}
{%- endif -%}
.websensepro-swiper-button {
display: block !important;
top: 75% !important;
}
</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 %}
Add Code in Theme.liquid File
Add the following code in theme.liquid file just above {% section 'header' %}
or {% sections ‘header-group’ %}
{%- section 'websensepro-announcement-bar' -%}
4.6/5 - (27 votes)
2 thoughts on “How To Add Announcement Bar Slider – Shopify Dawn Theme”
Hello Code is not working
Please share more details of the issue.