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

Shopify Scrolling Announcement Bar with Icons

By /

Shopify Scrolling Announcement Bar with Icons

Text-only announcement bars all look the same after a while. Adding icons — a truck for shipping, a shield for guarantees, a gift for offers — makes each message instantly scannable and far more memorable. The human brain processes images 60,000x faster than text, so icons do real conversion work here. This snippet pairs a smooth scrolling marquee with crisp inline SVG icons (no image files to upload, no app). Paste it into a Custom Liquid section. Five industry variations with live previews and exact code below.

1. Food Store – Fresh Icons Marquee

Food shoppers decide in seconds. Icon + text pairs — truck, wheat, leaf — communicate freshness faster than any sentence.

Preview

Free delivery over $40Free delivery over $40Baked fresh dailyBaked fresh dailyNew gluten-free rangeNew gluten-free range

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

Liquid Code

{% comment %} LayoutKart snippet: shopify-scrolling-announcement-bar-icons v1 (Food Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a8v1bar{overflow:hidden;background:#e8590c;padding:11px 0;}
.a8v1track{display:inline-flex;white-space:nowrap;align-items:center;animation:a8v1sc 22s linear infinite;}
@keyframes a8v1sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a8v1track span{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:14px;font-weight:700;margin:0 6px;}
</style>
<div class="a8v1bar">
  <div class="a8v1track">
    <span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffffff"/></svg>Free delivery over $40</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffffff"/></svg>Free delivery over $40</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffffff"/></svg>Baked fresh daily</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffffff"/></svg>Baked fresh daily</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffffff"/></svg>New gluten-free range</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffffff"/></svg>New gluten-free range</span>
  </div>
</div>

2. Pet Store – Playful Icons Marquee

Pet brands thrive on warmth. Star and gift icons bouncing along the marquee make every message feel like a little present.

Preview

Free treats in every boxFree treats in every boxVet-approved formulasVet-approved formulasSubscribe & save 15%Subscribe & save 15%

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

Liquid Code

{% comment %} LayoutKart snippet: shopify-scrolling-announcement-bar-icons v2 (Pet Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a8v2bar{overflow:hidden;background:#0b6e4f;padding:11px 0;}
.a8v2track{display:inline-flex;white-space:nowrap;align-items:center;animation:a8v2sc 24s linear infinite;}
@keyframes a8v2sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a8v2track span{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:14px;font-weight:700;margin:0 6px;}
</style>
<div class="a8v2bar">
  <div class="a8v2track">
    <span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Free treats in every box</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Free treats in every box</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Vet-approved formulas</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Vet-approved formulas</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Subscribe & save 15%</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Subscribe & save 15%</span>
  </div>
</div>

3. Beauty Store – Elegant Icons Marquee

Beauty claims need credibility. Small refined icons next to ‘cruelty-free’ and ‘dermatologist tested’ make promises feel certified.

Preview

Cruelty-free alwaysCruelty-free alwaysFree samples with ordersFree samples with ordersDermatologist testedDermatologist tested

Sample text: Cruelty-free always / Free samples with orders / Dermatologist tested

Liquid Code

{% comment %} LayoutKart snippet: shopify-scrolling-announcement-bar-icons v3 (Beauty Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a8v3bar{overflow:hidden;background:#fbeef2;padding:11px 0;}
.a8v3track{display:inline-flex;white-space:nowrap;align-items:center;animation:a8v3sc 26s linear infinite;}
@keyframes a8v3sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a8v3track span{color:#a1234f;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0 6px;}
</style>
<div class="a8v3bar">
  <div class="a8v3track">
    <span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#a1234f"/></svg>Cruelty-free always</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#a1234f"/></svg>Cruelty-free always</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#a1234f"/></svg>Free samples with orders</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#a1234f"/></svg>Free samples with orders</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#a1234f"/></svg>Dermatologist tested</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#a1234f"/></svg>Dermatologist tested</span>
  </div>
</div>

4. Electronics Store – Tech Icons Marquee

Tech purchases are spec-driven and risk-aware. Shield and badge icons turn warranty, EMI, and returns into trust signals at a glance.

Preview

2-year warranty2-year warranty0% EMI available0% EMI available30-day returns30-day returns

Sample text: 2-year warranty / 0% EMI available / 30-day returns

Liquid Code

{% comment %} LayoutKart snippet: shopify-scrolling-announcement-bar-icons v4 (Electronics Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a8v4bar{overflow:hidden;background:#071c33;padding:11px 0;}
.a8v4track{display:inline-flex;white-space:nowrap;align-items:center;animation:a8v4sc 18s linear infinite;}
@keyframes a8v4sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a8v4track span{color:#37e0ff;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:14px;font-weight:700;margin:0 6px;}
</style>
<div class="a8v4bar">
  <div class="a8v4track">
    <span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#37e0ff"/></svg>2-year warranty</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#37e0ff"/></svg>2-year warranty</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#37e0ff"/></svg>0% EMI available</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#37e0ff"/></svg>0% EMI available</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#37e0ff"/></svg>30-day returns</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#37e0ff"/></svg>30-day returns</span>
  </div>
</div>

5. Kids Store – Fun Icons Marquee

Parents scan for safety first. Star icons highlighting ‘safety tested’ amid the fun messages speak directly to parental priorities.

Preview

Safety tested toysSafety tested toysNew arrivals FridaysNew arrivals Fridays20% off this week20% off this week

Sample text: Safety tested toys / New arrivals Fridays / 20% off this week

Liquid Code

{% comment %} LayoutKart snippet: shopify-scrolling-announcement-bar-icons v5 (Kids Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a8v5bar{overflow:hidden;background:#6d28d9;padding:11px 0;}
.a8v5track{display:inline-flex;white-space:nowrap;align-items:center;animation:a8v5sc 22s linear infinite;}
@keyframes a8v5sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a8v5track span{color:#ffe45e;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:14px;font-weight:700;margin:0 6px;}
</style>
<div class="a8v5bar">
  <div class="a8v5track">
    <span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Safety tested toys</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>Safety tested toys</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>New arrivals Fridays</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>New arrivals Fridays</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>20% off this week</span><span><svg width="15" height="15" viewBox="0 0 24 24" style="vertical-align:-2px;margin:0 10px;"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.3l7.1-.7z" fill="#ffe45e"/></svg>20% off this week</span>
  </div>
</div>

How to Add an Icons Marquee 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 Icons Marquee

  • Icons: swap the star SVG path for any icon — truck, shield, or gift paths from any free icon set work the same way.
  • Icon color: change the fill value in the SVG to match your accent color.
  • Density: each text repeats twice for a seamless loop — add more repetitions for wider screens.
  • Alignment: icons use vertical-align to sit on the text baseline; tweak the pixel value if your font differs.

More Shopify Code Sections

Conclusion

Icons turn a forgettable text ticker into a visual shorthand for everything great about your store. Inline SVGs mean zero extra HTTP requests and infinite sharpness on retina screens. Paste your chosen variation into a Custom Liquid section — no app, no uploads — and give your announcements the visual pop they deserve. More icon-powered snippets live in the related tutorials.

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