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

Shopify Sticky Announcement Bar That Stays on Scroll

By /

Shopify Sticky Announcement Bar That Stays on Scroll

Here’s the problem with normal announcement bars: shoppers see your sale message for two seconds, scroll down, and forget it exists. A sticky announcement bar pins itself to the top of the screen and stays visible through the entire visit — your offer is always one glance away when they’re ready to buy. This snippet uses position: sticky, so it docks naturally without covering content awkwardly. Paste it into a Custom Liquid section at the top of your page — no app needed. Five styled variations below, each with a live preview and copy-ready code.

1. Fashion Store – Bold Sticky Bar

For fashion drops, the discount code must stay visible. This sticky black bar keeps your code in sight from homepage to checkout — no more lost sales.

Preview

SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦

Sample text: SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10

Liquid Code

{% comment %} LayoutKart snippet: shopify-sticky-announcement-bar v1 (Fashion Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a4v1wrap{position:sticky;top:0;z-index:60;}
.a4v1bar{overflow:hidden;background:#101010;padding:10px 0;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.a4v1track{display:inline-flex;white-space:nowrap;animation:a4v1sc 22s linear infinite;}
@keyframes a4v1sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a4v1track span{color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:800;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a4v1wrap">
<div class="a4v1bar">
  <div class="a4v1track">
    <span>SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦</span><span>SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦</span><span>SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦</span><span>SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦</span><span>SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦</span><span>SALE ENDS SUNDAY — EXTRA 10% OFF CODE: EXTRA10 ✦</span>
  </div>
</div>
</div>

2. Electronics Store – Neon Sticky Ticker

Tech deals are time-sensitive. A sticky neon ticker means the price-drop message follows deal-hunters down long spec sheets and comparison tables.

Preview

PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸

Sample text: PRICE DROP ALERT — SAVE UP TO $200 TODAY

Liquid Code

{% comment %} LayoutKart snippet: shopify-sticky-announcement-bar v2 (Electronics Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a4v2wrap{position:sticky;top:0;z-index:60;}
.a4v2bar{overflow:hidden;background:#071c33;padding:10px 0;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.a4v2track{display:inline-flex;white-space:nowrap;animation:a4v2sc 18s linear infinite;}
@keyframes a4v2sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a4v2track 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="a4v2wrap">
<div class="a4v2bar">
  <div class="a4v2track">
    <span>PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸</span><span>PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸</span><span>PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸</span><span>PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸</span><span>PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸</span><span>PRICE DROP ALERT — SAVE UP TO $200 TODAY ▸</span>
  </div>
</div>
</div>

3. Fitness Store – Energy Sticky Bar

Supplement shoppers compare labels for ages. Keep the freebie offer pinned while they read ingredients — it tips the decision at the right moment.

Preview

FREE SHAKER WITH EVERY PROTEIN ORDER ⚡FREE SHAKER WITH EVERY PROTEIN ORDER ⚡FREE SHAKER WITH EVERY PROTEIN ORDER ⚡FREE SHAKER WITH EVERY PROTEIN ORDER ⚡FREE SHAKER WITH EVERY PROTEIN ORDER ⚡FREE SHAKER WITH EVERY PROTEIN ORDER ⚡

Sample text: FREE SHAKER WITH EVERY PROTEIN ORDER

Liquid Code

{% comment %} LayoutKart snippet: shopify-sticky-announcement-bar v3 (Fitness Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a4v3wrap{position:sticky;top:0;z-index:60;}
.a4v3bar{overflow:hidden;background:#0d0d0d;padding:10px 0;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.a4v3track{display:inline-flex;white-space:nowrap;animation:a4v3sc 20s linear infinite;}
@keyframes a4v3sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a4v3track span{color:#d7ff3e;font-family:'Arial Black', Arial, sans-serif;font-size:14px;font-weight:800;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a4v3wrap">
<div class="a4v3bar">
  <div class="a4v3track">
    <span>FREE SHAKER WITH EVERY PROTEIN ORDER ⚡</span><span>FREE SHAKER WITH EVERY PROTEIN ORDER ⚡</span><span>FREE SHAKER WITH EVERY PROTEIN ORDER ⚡</span><span>FREE SHAKER WITH EVERY PROTEIN ORDER ⚡</span><span>FREE SHAKER WITH EVERY PROTEIN ORDER ⚡</span><span>FREE SHAKER WITH EVERY PROTEIN ORDER ⚡</span>
  </div>
</div>
</div>

4. Home Decor Store – Warm Sticky Bar

Decor buying is slow browsing across collections. A warm, sticky announcement keeps the festive offer present without shouting over your beautiful imagery.

Preview

Festive sale — up to 35% off handcrafted decor —Festive sale — up to 35% off handcrafted decor —Festive sale — up to 35% off handcrafted decor —Festive sale — up to 35% off handcrafted decor —Festive sale — up to 35% off handcrafted decor —Festive sale — up to 35% off handcrafted decor —

Sample text: Festive sale — up to 35% off handcrafted decor

Liquid Code

{% comment %} LayoutKart snippet: shopify-sticky-announcement-bar v4 (Home Decor Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a4v4wrap{position:sticky;top:0;z-index:60;}
.a4v4bar{overflow:hidden;background:#f4eee3;padding:11px 0;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.a4v4track{display:inline-flex;white-space:nowrap;animation:a4v4sc 26s linear infinite;}
@keyframes a4v4sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a4v4track span{color:#5b4632;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a4v4wrap">
<div class="a4v4bar">
  <div class="a4v4track">
    <span>Festive sale — up to 35% off handcrafted decor —</span><span>Festive sale — up to 35% off handcrafted decor —</span><span>Festive sale — up to 35% off handcrafted decor —</span><span>Festive sale — up to 35% off handcrafted decor —</span><span>Festive sale — up to 35% off handcrafted decor —</span><span>Festive sale — up to 35% off handcrafted decor —</span>
  </div>
</div>
</div>

5. Kids Store – Cheerful Sticky Bar

Parents scroll fast between school runs. A cheerful sticky bar makes sure the back-to-school discount is seen even during a 30-second browse.

Preview

Back-to-school deals — 25% off learning toys ★Back-to-school deals — 25% off learning toys ★Back-to-school deals — 25% off learning toys ★Back-to-school deals — 25% off learning toys ★Back-to-school deals — 25% off learning toys ★Back-to-school deals — 25% off learning toys ★

Sample text: Back-to-school deals — 25% off learning toys

Liquid Code

{% comment %} LayoutKart snippet: shopify-sticky-announcement-bar v5 (Kids Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a4v5wrap{position:sticky;top:0;z-index:60;}
.a4v5bar{overflow:hidden;background:#6d28d9;padding:10px 0;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.a4v5track{display:inline-flex;white-space:nowrap;animation:a4v5sc 24s linear infinite;}
@keyframes a4v5sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a4v5track span{color:#ffe45e;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:14px;font-weight:700;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a4v5wrap">
<div class="a4v5bar">
  <div class="a4v5track">
    <span>Back-to-school deals — 25% off learning toys ★</span><span>Back-to-school deals — 25% off learning toys ★</span><span>Back-to-school deals — 25% off learning toys ★</span><span>Back-to-school deals — 25% off learning toys ★</span><span>Back-to-school deals — 25% off learning toys ★</span><span>Back-to-school deals — 25% off learning toys ★</span>
  </div>
</div>
</div>

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

  • Stickiness: position: sticky; top: 0 does the work — change top if your theme has its own sticky header height.
  • Layering: z-index: 60 keeps the bar above content; raise it if popups cover the bar.
  • Shadow: the subtle box-shadow separates the bar from page content — remove it for a flatter look.
  • Placement: add the Custom Liquid section at the very top of the template so it docks before the header.

More Shopify Code Sections

Conclusion

A sticky announcement bar is the hardest-working two lines on your store — always visible, never intrusive. It takes one paste into a Custom Liquid section and works on any OS 2.0 theme without apps or file edits. Choose the style that matches your brand, keep the message short, and let your offer follow every visitor to checkout. More scroll-stopping snippets await 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