Adding a scrolling announcement bar to your Shopify store is a great way to grab your customers' attention with promotions, free shipping offers, or important updates. In this guide, we’ll walk you through the process of adding a scrolling announcement bar using custom Liquid code—no apps required!
Why Add a Scrolling Announcement Bar?
- Increase Engagement: Highlight sales, discounts, or free shipping offers.
- Improve User Experience: Keep customers informed without cluttering your store’s design.
- No App Needed: Save on costs by using Shopify’s built-in theme editor.
Step 1: Access Your Shopify Theme Editor
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Click Customize on your active theme, then select Edit Code.
Step 2: Add the Custom Liquid Code
We’ll add a scrolling announcement bar at the top of your store. Follow these steps:
- In the theme editor, locate the theme.liquid file under the Layout folder.
- Scroll to the <body> tag and insert the following custom Liquid code just below it:
<div class="announcement-bar">
<div class="announcement-bar__scroll">
<p>🎉 Free Shipping on Orders Over $50! Easy Returns! Trusted by 1000+ Customers! 🎉</p>
</div>
</div>
<style>
.announcement-bar {
background-color: #f9c74f;
color: #000;
font-weight: bold;
overflow: hidden;
position: relative;
padding: 10px 0;
text-align: center;
}
.announcement-bar__scroll {
display: inline-block;
white-space: nowrap;
animation: scroll 15s linear infinite;
}
.announcement-bar__scroll p {
margin: 0;
padding: 0 20px;
display: inline;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
- Click Save to apply the changes.
Step 3: Customize the Announcement Bar
- Change the Text: Modify the <p> tag content to your desired message (e.g., "Black Friday Sale! 20% Off Everything!").
- Adjust the Style: Update the background-color, color, or animation speed in the <style> section to match your store’s branding.
- Positioning: The bar is set to appear at the top. If you want it elsewhere, adjust the position in the CSS.
Step 4: Test Your Store
Preview your store to ensure the announcement bar scrolls smoothly across the top. Test on both desktop and mobile devices to confirm it’s responsive.
Conclusion
Adding a scrolling announcement bar to your Shopify store is an easy and effective way to communicate with your customers. With just a few lines of custom Liquid code, you can create a professional-looking feature without relying on third-party apps. Try it out and watch your store’s engagement soar!
.avif)
.svg){kind=icon}
