Most announcement bars are dead ends — shoppers read ‘Sale: shop now’ and then have to hunt for the sale themselves. Every extra click loses buyers. A clickable announcement bar turns each scrolling message into a direct link: sale text goes to the sale collection, new arrivals go to new products, gift cards go to gift cards. This snippet makes every marquee item a real link with hover feedback. Paste it into a Custom Liquid section — no app needed. Five variations with live previews and exact code below.
1. Fashion Store – Bold Links Marquee
Fashion traffic should flow straight to collections. Bold underlined links in a black marquee turn announcement views into collection visits.
Preview
Sample text: Shop New Arrivals / Sale — Up to 50% Off / Gift Cards
Liquid Code
{% comment %} LayoutKart snippet: shopify-announcement-bar-clickable-links v1 (Fashion Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a9v1bar{overflow:hidden;background:#101010;padding:11px 0;}
.a9v1track{display:inline-flex;white-space:nowrap;align-items:center;animation:a9v1sc 22s linear infinite;}
@keyframes a9v1sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a9v1track a,.a9v1track span{font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:700;}
.a9v1track a:hover{opacity:.75;}
</style>
<div class="a9v1bar">
<div class="a9v1track">
<a href="/collections/new" style="color:#ffffff;text-decoration:underline;text-underline-offset:3px;">Shop New Arrivals</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/new" style="color:#ffffff;text-decoration:underline;text-underline-offset:3px;">Shop New Arrivals</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/sale" style="color:#ffffff;text-decoration:underline;text-underline-offset:3px;">Sale — Up to 50% Off</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/sale" style="color:#ffffff;text-decoration:underline;text-underline-offset:3px;">Sale — Up to 50% Off</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/products/gift-card" style="color:#ffffff;text-decoration:underline;text-underline-offset:3px;">Gift Cards</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/products/gift-card" style="color:#ffffff;text-decoration:underline;text-underline-offset:3px;">Gift Cards</a><span style="margin:0 14px;opacity:.5;">|</span>
</div>
</div>2. Jewelry Store – Elegant Links Marquee
Jewelry shoppers often want guidance. Linking to curated edits and appointments — not just products — matches the high-touch buying journey.
Preview
Sample text: The Festive Edit / Bestsellers / Book an Appointment
Liquid Code
{% comment %} LayoutKart snippet: shopify-announcement-bar-clickable-links v2 (Jewelry Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a9v2bar{overflow:hidden;background:#141422;padding:12px 0;}
.a9v2track{display:inline-flex;white-space:nowrap;align-items:center;animation:a9v2sc 28s linear infinite;}
@keyframes a9v2sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a9v2track a,.a9v2track span{font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;}
.a9v2track a:hover{opacity:.75;}
</style>
<div class="a9v2bar">
<div class="a9v2track">
<a href="/collections/festive" style="color:#e9c767;text-decoration:underline;text-underline-offset:3px;">The Festive Edit</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/festive" style="color:#e9c767;text-decoration:underline;text-underline-offset:3px;">The Festive Edit</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/bestsellers" style="color:#e9c767;text-decoration:underline;text-underline-offset:3px;">Bestsellers</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/bestsellers" style="color:#e9c767;text-decoration:underline;text-underline-offset:3px;">Bestsellers</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/pages/appointment" style="color:#e9c767;text-decoration:underline;text-underline-offset:3px;">Book an Appointment</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/pages/appointment" style="color:#e9c767;text-decoration:underline;text-underline-offset:3px;">Book an Appointment</a><span style="margin:0 14px;opacity:.5;">|</span>
</div>
</div>3. Home Decor Store – Warm Links Marquee
Decor inspiration converts when it’s one click away. Warm serif links guide browsers from announcement to styled collections effortlessly.
Preview
Sample text: Shop the Look / New Handcrafted Pieces / Sale Corner
Liquid Code
{% comment %} LayoutKart snippet: shopify-announcement-bar-clickable-links v3 (Home Decor Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a9v3bar{overflow:hidden;background:#f4eee3;padding:11px 0;}
.a9v3track{display:inline-flex;white-space:nowrap;align-items:center;animation:a9v3sc 26s linear infinite;}
@keyframes a9v3sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a9v3track a,.a9v3track span{font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;}
.a9v3track a:hover{opacity:.75;}
</style>
<div class="a9v3bar">
<div class="a9v3track">
<a href="/collections/shop-the-look" style="color:#5b4632;text-decoration:underline;text-underline-offset:3px;">Shop the Look</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/shop-the-look" style="color:#5b4632;text-decoration:underline;text-underline-offset:3px;">Shop the Look</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/new" style="color:#5b4632;text-decoration:underline;text-underline-offset:3px;">New Handcrafted Pieces</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/new" style="color:#5b4632;text-decoration:underline;text-underline-offset:3px;">New Handcrafted Pieces</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/sale" style="color:#5b4632;text-decoration:underline;text-underline-offset:3px;">Sale Corner</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/sale" style="color:#5b4632;text-decoration:underline;text-underline-offset:3px;">Sale Corner</a><span style="margin:0 14px;opacity:.5;">|</span>
</div>
</div>4. Bookstore – Classic Links Marquee
Readers love curation. Linking marquee mentions directly to staff picks and signed editions captures intent at its peak.
Preview
Sample text: Signed Editions / Staff Picks / Pre-orders
Liquid Code
{% comment %} LayoutKart snippet: shopify-announcement-bar-clickable-links v4 (Bookstore) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a9v4bar{overflow:hidden;background:#241a12;padding:12px 0;}
.a9v4track{display:inline-flex;white-space:nowrap;align-items:center;animation:a9v4sc 28s linear infinite;}
@keyframes a9v4sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a9v4track a,.a9v4track span{font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;}
.a9v4track a:hover{opacity:.75;}
</style>
<div class="a9v4bar">
<div class="a9v4track">
<a href="/collections/signed" style="color:#f0dfb8;text-decoration:underline;text-underline-offset:3px;">Signed Editions</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/signed" style="color:#f0dfb8;text-decoration:underline;text-underline-offset:3px;">Signed Editions</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/staff-picks" style="color:#f0dfb8;text-decoration:underline;text-underline-offset:3px;">Staff Picks</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/staff-picks" style="color:#f0dfb8;text-decoration:underline;text-underline-offset:3px;">Staff Picks</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/preorder" style="color:#f0dfb8;text-decoration:underline;text-underline-offset:3px;">Pre-orders</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/preorder" style="color:#f0dfb8;text-decoration:underline;text-underline-offset:3px;">Pre-orders</a><span style="margin:0 14px;opacity:.5;">|</span>
</div>
</div>5. Fitness Store – Bold Links Marquee
Supplement buyers are goal-driven. High-energy links to deals and bundles shorten the path from motivation to checkout.
Preview
Sample text: Protein Deals / New Gear / Bundle & Save
Liquid Code
{% comment %} LayoutKart snippet: shopify-announcement-bar-clickable-links v5 (Fitness Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a9v5bar{overflow:hidden;background:#0d0d0d;padding:11px 0;}
.a9v5track{display:inline-flex;white-space:nowrap;align-items:center;animation:a9v5sc 20s linear infinite;}
@keyframes a9v5sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a9v5track a,.a9v5track span{font-family:'Arial Black', Arial, sans-serif;font-size:14px;font-weight:800;}
.a9v5track a:hover{opacity:.75;}
</style>
<div class="a9v5bar">
<div class="a9v5track">
<a href="/collections/protein" style="color:#d7ff3e;text-decoration:underline;text-underline-offset:3px;">Protein Deals</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/protein" style="color:#d7ff3e;text-decoration:underline;text-underline-offset:3px;">Protein Deals</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/new" style="color:#d7ff3e;text-decoration:underline;text-underline-offset:3px;">New Gear</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/new" style="color:#d7ff3e;text-decoration:underline;text-underline-offset:3px;">New Gear</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/bundles" style="color:#d7ff3e;text-decoration:underline;text-underline-offset:3px;">Bundle & Save</a><span style="margin:0 14px;opacity:.5;">|</span><a href="/collections/bundles" style="color:#d7ff3e;text-decoration:underline;text-underline-offset:3px;">Bundle & Save</a><span style="margin:0 14px;opacity:.5;">|</span>
</div>
</div>How to Add Clickable Links 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:
- In Shopify admin, go to Online Store → Themes.
- Click Customize on your live theme (works on Dawn and most free OS 2.0 themes).
- In the theme editor sidebar, click Add section → Custom Liquid.
- Delete the placeholder code in the Custom Liquid box and paste the snippet.
- 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 Clickable Links
- Destinations: replace the
hrefvalues with your real collection or page URLs (use relative paths like/collections/sale). - Link style: underlines use
text-underline-offsetfor a modern look — remove it for classic underlines. - Hover: links fade slightly on hover via the
a:hoverrule — change opacity or add a color shift. - New tabs: add
target="_blank"to links pointing off-site, but keep on-site links in the same tab.
More Shopify Code Sections
- Shopify Liquid Scrolling Announcement Bar: Code + Setup Guide
- Shopify Scrolling Announcement Bar with Icons
- Shopify Sticky Announcement Bar That Stays on Scroll
- Shopify Dual-Line Marquee Effect
- Shopify Countdown Timer Announcement Bar
- Shopify Animated Sale Announcement Bar
- Shopify Announcement Bar with Multiple Rotating Messages
- Shopify Collection Page Custom Filter Design
- Shopify Hero Banner Text Animation
- Shopify WhatsApp Checkout Button
Conclusion
A clickable announcement bar converts attention into traffic — every impression becomes a potential collection visit. Set your hrefs to real destinations, style the links to match your brand, and paste it into a Custom Liquid section. No app, no redirects, no lost shoppers. For more ways to guide visitors, explore the related Shopify Liquid 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.
