In this step-by-step tutorial, we will guide you through the process of adding an announcement bar slider to your Shopify store using the Dawn Theme. Whether you’re a beginner or an experienced Shopify user, this tutorial will help you create an engaging announcement bar slider without the need for coding or file editing. Let’s dive in!
The Dawn theme from Shopify offers a built-in way to create an announcement bar. But what if you want to display multiple announcements and have them rotate for better visibility? Thankfully, recent versions of Dawn (specifically 10.0.0 and above) allow you to easily set up an announcement slider without any code editing.
Here’s how you can achieve this:
1. Accessing the Announcement Bar Settings:
-
- Log in to your Shopify admin panel and navigate to the “Online Store” section.
-
- Click on “Themes” and then select “Customize” next to the Dawn theme.
2. Creating Announcement Slides:
-
- In the theme customizer menu, look for the “Announcement Bar” section.
-
- You’ll see an option to “Add Announcement.” Click on this button to create a new slide.
-
- Here, you can enter the text for your announcement and customize its appearance with options for styling the background and text.
-
- Repeat this process to create additional announcement slides.
3. Enabling the Slider Function:
-
- Within the Announcement Bar settings, you’ll find an option titled “Enable Auto Rotate Slides.”
-
- Check this box to activate the slider functionality.
4. Customizing the Slider (Optional):
-
- While Dawn doesn’t offer extensive slider customization options, you can make minor adjustments through the theme customizer.
-
- Look for settings related to the slider’s animation speed and whether you want to display navigation arrows for manual control.
5. Saving and Previewing:
-
- Once you’ve finished setting up your announcement slider, click “Save” to apply the changes.
-
- Your Shopify store will now display the announcement slides rotating automatically within the announcement bar.
With this built-in functionality, adding an announcement slider to your Dawn theme is a breeze. This allows you to showcase multiple promotions, updates, or important messages to your customers and keep them engaged.
Create A New Section
Create a new section called “fameweb-announcement-bar.liquid” and add following code on newly created section:
{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class=”fameweb-announcement-bar swiper-container”>
<div class=”fameweb-messages swiper-wrapper”>
{%- for block in section.blocks -%}
<div class=”fameweb-message swiper-slide”>{{block.settings.message}}</div>
{%- endfor -%}
</div>
<div class=”fameweb-swiper-button swiper-button-prev”></div>
<div class=”fameweb-swiper-button swiper-button-next”></div>
</div>
<!– code by fameweb.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>
.fameweb-announcement-bar{
background:{{section.settings.colorBackground}};
position: relative;
overflow: hidden;
}
.fameweb-announcement-bar .fameweb-message{
text-align:center;
color:{{section.settings.colorText}};
padding:0;
}
.fameweb-announcement-bar .swiper-button-next:after, .fameweb-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
.fameweb-announcement-bar .swiper-button-prev:after, .fameweb-announcement-bar .swiper-container-rtl .swiper-button-next:after{
font-size: 15px;
color:{{section.settings.colorText}};
}
{%- if section.blocks.size < 2 %}
.fameweb-announcement-bar .fameweb-swiper-button{display:none!important;}
{%- endif -%}
.fameweb-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 ‘fameweb-announcement-bar’ -%}
If you want help with Shopify Customization, store development, or any other web development help. Contact Us Now