A scrolling announcement bar is the first thing visitors notice — and the easiest win for announcing sales, free shipping, or new drops. Most store owners either pay for an app or skip it entirely. You don’t need either. With a tiny Liquid + CSS snippet pasted into a Custom Liquid section, you get a smooth, infinite scrolling bar in under two minutes, without installing another app or touching theme files. Below are 5 ready-made designs for different store types. Each one shows a live preview, then the exact code to copy. Pick the vibe that fits your brand, paste, save — done.

1. Fashion Store – Bold Scrolling Marquee

Streetwear and fashion brands need attitude. This black bar with heavy white type and a gold star separator screams premium drop culture and works perfectly above a dark header.

Preview

Sample text: NEW DROP — UP TO 40% OFF

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-scrolling-announcement-bar v1 (Fashion Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a1v1bar{overflow:hidden;background:#101010;padding:11px 0;}
.a1v1track{display:inline-flex;white-space:nowrap;animation:a1v1sc 20s linear infinite;}
@keyframes a1v1sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a1v1track span{color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:15px;font-weight:800;margin:0 28px;letter-spacing:1px;}
</style>
<div class="a1v1bar">
  <div class="a1v1track">
    <span>NEW DROP — UP TO 40% OFF ✦</span><span>NEW DROP — UP TO 40% OFF ✦</span><span>NEW DROP — UP TO 40% OFF ✦</span><span>NEW DROP — UP TO 40% OFF ✦</span><span>NEW DROP — UP TO 40% OFF ✦</span><span>NEW DROP — UP TO 40% OFF ✦</span>
  </div>
</div>

2. Beauty Store – Soft Blush Marquee

Beauty shoppers love calm, elegant touches. A blush-pink bar with serif type feels like a spa — noticeable but never shouty, ideal for skincare and cosmetics stores.

Preview

Sample text: Clean beauty sale — 25% off serums

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-scrolling-announcement-bar v2 (Beauty Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a1v2bar{overflow:hidden;background:#fbeef2;padding:10px 0;}
.a1v2track{display:inline-flex;white-space:nowrap;animation:a1v2sc 26s linear infinite;}
@keyframes a1v2sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a1v2track span{color:#a1234f;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a1v2bar">
  <div class="a1v2track">
    <span>Clean beauty sale — 25% off serums ❋</span><span>Clean beauty sale — 25% off serums ❋</span><span>Clean beauty sale — 25% off serums ❋</span><span>Clean beauty sale — 25% off serums ❋</span><span>Clean beauty sale — 25% off serums ❋</span><span>Clean beauty sale — 25% off serums ❋</span>
  </div>
</div>

3. Electronics Store – Neon Tech Ticker

Tech stores convert on urgency. This fast-moving neon ticker on deep navy feels like a stock ticker and pushes deal-hunters to keep scrolling.

Preview

Sample text: MEGA TECH SALE — UP TO 60% OFF GADGETS

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-scrolling-announcement-bar v3 (Electronics Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a1v3bar{overflow:hidden;background:#071c33;padding:10px 0;}
.a1v3track{display:inline-flex;white-space:nowrap;animation:a1v3sc 16s linear infinite;}
@keyframes a1v3sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a1v3track span{color:#37e0ff;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:14px;font-weight:700;margin:0 24px;letter-spacing:1px;}
</style>
<div class="a1v3bar">
  <div class="a1v3track">
    <span>MEGA TECH SALE — UP TO 60% OFF GADGETS ▸</span><span>MEGA TECH SALE — UP TO 60% OFF GADGETS ▸</span><span>MEGA TECH SALE — UP TO 60% OFF GADGETS ▸</span><span>MEGA TECH SALE — UP TO 60% OFF GADGETS ▸</span><span>MEGA TECH SALE — UP TO 60% OFF GADGETS ▸</span><span>MEGA TECH SALE — UP TO 60% OFF GADGETS ▸</span>
  </div>
</div>

4. Food Store – Warm Appetite Marquee

Food brands win with warmth. A rich orange bar with friendly rounded type makes offers feel like they’re fresh out of the oven.

Preview

Sample text: Free delivery on orders over $40 — fresh daily

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-scrolling-announcement-bar v4 (Food Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a1v4bar{overflow:hidden;background:#e8590c;padding:11px 0;}
.a1v4track{display:inline-flex;white-space:nowrap;animation:a1v4sc 22s linear infinite;}
@keyframes a1v4sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a1v4track span{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:15px;font-weight:700;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a1v4bar">
  <div class="a1v4track">
    <span>Free delivery on orders over $40 — fresh daily •</span><span>Free delivery on orders over $40 — fresh daily •</span><span>Free delivery on orders over $40 — fresh daily •</span><span>Free delivery on orders over $40 — fresh daily •</span><span>Free delivery on orders over $40 — fresh daily •</span><span>Free delivery on orders over $40 — fresh daily •</span>
  </div>
</div>

5. Jewelry Store – Luxury Gold Marquee

Luxury needs restraint. Slow movement, wide spacing, and gold serif type on near-black gives your announcement bar a quiet, expensive feel.

Preview

Sample text: The festive edit — handcrafted pieces, 20% off

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-scrolling-announcement-bar v5 (Jewelry Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a1v5bar{overflow:hidden;background:#141422;padding:12px 0;}
.a1v5track{display:inline-flex;white-space:nowrap;animation:a1v5sc 30s linear infinite;}
@keyframes a1v5sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a1v5track span{color:#e9c767;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0 30px;letter-spacing:1px;}
</style>
<div class="a1v5bar">
  <div class="a1v5track">
    <span>The festive edit — handcrafted pieces, 20% off ◆</span><span>The festive edit — handcrafted pieces, 20% off ◆</span><span>The festive edit — handcrafted pieces, 20% off ◆</span><span>The festive edit — handcrafted pieces, 20% off ◆</span><span>The festive edit — handcrafted pieces, 20% off ◆</span><span>The festive edit — handcrafted pieces, 20% off ◆</span>
  </div>
</div>

How to Add a Scrolling Announcement Bar 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 Scrolling Announcement Bar

• Speed: change the 20s value in animation — lower is faster, higher is calmer.
• Colors: swap the background and span color values to match your brand palette.
• Text: edit the message inside the <span> tags; duplicate spans keep the loop seamless.
• Spacing: adjust padding and margin for a slimmer or chunkier bar.

More Shopify Code Sections

• Shopify Liquid Marquee Effect with Pause on Hover
• Shopify Announcement Bar with Multiple Rotating Messages
• Shopify Sticky Announcement Bar That Stays on Scroll
• Shopify Scrolling Announcement Bar with Icons
• Shopify Announcement Bar with Clickable Links
• Shopify Dual-Line Marquee Effect
• Shopify Countdown Timer Announcement Bar
• Shopify Animated Sale Announcement Bar
• Shopify Hero Banner Text Animation
• Shopify Scrolling Brand Logo Section

Conclusion

A scrolling announcement bar takes two minutes to add and works on every page of your store. Start with the variation closest to your brand, tweak the colors and speed, and watch it quietly lift your promo visibility. And because it’s a Custom Liquid section, it survives every theme update. Want more no-app upgrades? Browse the related Shopify Liquid tutorials below — each one is copy, paste, done.

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.