Diwali Sale is LIVE - special prices end in
⚡ Launch-ready Shopify themes — Instant licensed download · 300+ stores built with LayoutKart themes
Book Call

Shopify Announcement Bar with Multiple Rotating Messages

By /

Shopify Announcement Bar with Multiple Rotating Messages

One announcement bar, three messages — free shipping, new arrivals, and easy returns — rotating every few seconds with a smooth fade. That’s far more effective than cramming everything into one scrolling line nobody finishes reading. This snippet cycles through your messages automatically with vanilla JavaScript, no app required. Paste it into a Custom Liquid section and you’re live in two minutes. Here are 5 styled variations, each with a live preview and the exact code.

1. Beauty Store – Soft Fade Rotator

Skincare brands juggle several promises at once. This gentle blush rotator presents each one with breathing room — calm, clean, and on-brand.

Preview

Free shipping on orders over $50

Sample text: Free shipping on orders over $50 / New serums drop every Friday / 30-day happiness guarantee

Liquid Code

{% comment %} LayoutKart snippet: shopify-announcement-bar-multiple-messages v1 (Beauty Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a3v1bar{background:#fbeef2;text-align:center;padding:12px 12px;}
.a3v1msg{color:#a1234f;font-family:Georgia, 'Times New Roman', serif;font-size:15px;font-weight:600;transition:opacity .45s ease;margin:0;}
</style>
<div class="a3v1bar">
  <p class="a3v1msg" id="a3v1msg">Free shipping on orders over $50</p>
</div>
<script>
(function(){var m=["Free shipping on orders over $50","New serums drop every Friday","30-day happiness guarantee"];var i=0;var el=document.getElementById('a3v1msg');setInterval(function(){i=(i+1)%m.length;el.style.opacity=0;setTimeout(function(){el.textContent=m[i];el.style.opacity=1;},350);},3200);})();
</script>

2. Electronics Store – Tech Ticker Rotator

Gadget shoppers scan fast. A neon-on-navy rotator cycling deals, EMI, and warranty hits all three buying triggers in under ten seconds.

Preview

MEGA SALE — up to 60% off

Sample text: MEGA SALE — up to 60% off / 0% EMI on orders over $299 / 2-year warranty included

Liquid Code

{% comment %} LayoutKart snippet: shopify-announcement-bar-multiple-messages v2 (Electronics Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a3v2bar{background:#071c33;text-align:center;padding:12px 12px;}
.a3v2msg{color:#37e0ff;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:15px;font-weight:700;transition:opacity .45s ease;margin:0;}
</style>
<div class="a3v2bar">
  <p class="a3v2msg" id="a3v2msg">MEGA SALE — up to 60% off</p>
</div>
<script>
(function(){var m=["MEGA SALE — up to 60% off","0% EMI on orders over $299","2-year warranty included"];var i=0;var el=document.getElementById('a3v2msg');setInterval(function(){i=(i+1)%m.length;el.style.opacity=0;setTimeout(function(){el.textContent=m[i];el.style.opacity=1;},350);},3200);})();
</script>

3. Pet Store – Friendly Rotator

Pet parents buy on trust and delight. Rotating messages about freebies, vet approval, and subscriptions build both in one small bar.

Preview

Free treats in every box

Sample text: Free treats in every box / Vet-approved nutrition / Subscribe & save 15%

Liquid Code

{% comment %} LayoutKart snippet: shopify-announcement-bar-multiple-messages v3 (Pet Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a3v3bar{background:#0b6e4f;text-align:center;padding:12px 12px;}
.a3v3msg{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:15px;font-weight:700;transition:opacity .45s ease;margin:0;}
</style>
<div class="a3v3bar">
  <p class="a3v3msg" id="a3v3msg">Free treats in every box</p>
</div>
<script>
(function(){var m=["Free treats in every box","Vet-approved nutrition","Subscribe & save 15%"];var i=0;var el=document.getElementById('a3v3msg');setInterval(function(){i=(i+1)%m.length;el.style.opacity=0;setTimeout(function(){el.textContent=m[i];el.style.opacity=1;},350);},3200);})();
</script>

4. Jewelry Store – Elegant Rotator

High-ticket jewelry needs reassurance. Slow-fading gold serif messages about engraving, certification, and insured shipping quietly build confidence.

Preview

Complimentary engraving this week

Sample text: Complimentary engraving this week / Certified conflict-free diamonds / Insured worldwide shipping

Liquid Code

{% comment %} LayoutKart snippet: shopify-announcement-bar-multiple-messages v4 (Jewelry Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a3v4bar{background:#141422;text-align:center;padding:13px 12px;}
.a3v4msg{color:#e9c767;font-family:Georgia, 'Times New Roman', serif;font-size:15px;font-weight:600;transition:opacity .45s ease;margin:0;}
</style>
<div class="a3v4bar">
  <p class="a3v4msg" id="a3v4msg">Complimentary engraving this week</p>
</div>
<script>
(function(){var m=["Complimentary engraving this week","Certified conflict-free diamonds","Insured worldwide shipping"];var i=0;var el=document.getElementById('a3v4msg');setInterval(function(){i=(i+1)%m.length;el.style.opacity=0;setTimeout(function(){el.textContent=m[i];el.style.opacity=1;},350);},3200);})();
</script>

5. Food Store – Fresh Daily Rotator

Food is about freshness and habit. This warm orange rotator cycles daily-baked, delivery, and new-range messages that keep regulars coming back.

Preview

Baked fresh every morning

Sample text: Baked fresh every morning / Free delivery over $40 / New: gluten-free range

Liquid Code

{% comment %} LayoutKart snippet: shopify-announcement-bar-multiple-messages v5 (Food Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a3v5bar{background:#e8590c;text-align:center;padding:12px 12px;}
.a3v5msg{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:15px;font-weight:700;transition:opacity .45s ease;margin:0;}
</style>
<div class="a3v5bar">
  <p class="a3v5msg" id="a3v5msg">Baked fresh every morning</p>
</div>
<script>
(function(){var m=["Baked fresh every morning","Free delivery over $40","New: gluten-free range"];var i=0;var el=document.getElementById('a3v5msg');setInterval(function(){i=(i+1)%m.length;el.style.opacity=0;setTimeout(function(){el.textContent=m[i];el.style.opacity=1;},350);},3200);})();
</script>

How to Add Rotating Messages to Shopify

No theme-file editing needed. Every snippet below is built for Shopify’s Custom Liquid section — the safest way to add custom code without installing another app:

  1. In Shopify admin, go to Online Store → Themes.
  2. Click Customize on your live theme (works on Dawn and most free OS 2.0 themes).
  3. In the theme editor sidebar, click Add section → Custom Liquid.
  4. Delete the placeholder code in the Custom Liquid box and paste the snippet.
  5. Drag the new section to the very top of the page, then click Save. Done!

Because it lives in a section — not in your theme files — the code survives theme updates.

Customize the Rotating Messages

  • Messages: edit the three strings in the var m = [...] array — add or remove items freely.
  • Timing: change 3200 (milliseconds) to rotate faster or slower; 350 controls the fade speed.
  • Style: the bar is a simple centered paragraph — adjust background, font-size, and padding like any announcement bar.
  • Accessibility: keep each message under ~60 characters so it’s readable in one rotation on mobile.

More Shopify Code Sections

Conclusion

Rotating messages let one slim bar do the work of three. Edit the message array, match the colors to your brand, and paste it into a Custom Liquid section — no app, no monthly fee, no theme edits. It’s a small snippet with an outsized impact on what shoppers learn in their first five seconds. Explore the related tutorials for more announcement-bar upgrades.

Want it done for you? LayoutKart’s readymade Shopify templates come with these effects built in — launch your store today without touching a line of code.

anurag Layoutkart
Author: anurag Layoutkart

Scroll to Top