A scrolling marquee grabs attention — but sometimes shoppers want to actually read the offer. That’s where pause-on-hover comes in: the bar scrolls automatically, then freezes the moment a cursor touches it so visitors can read every word. It’s a tiny UX upgrade that makes your announcements genuinely readable, and it takes one extra line of CSS. No app, no theme surgery — just paste the snippet into a Custom Liquid section. Here are 5 styled variations with live previews and copy-ready code.

1. Fashion Store – Bold Pause Marquee

Hype brands move fast, but readability sells. This bold black marquee freezes on hover so drop details actually get read before checkout.

Preview

Sample text: FLASH SALE — 30% OFF ENDS MIDNIGHT

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-marquee-pause-on-hover v1 (Fashion Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a2v1bar{overflow:hidden;background:#101010;padding:11px 0;}
.a2v1track{display:inline-flex;white-space:nowrap;animation:a2v1sc 20s linear infinite;}
@keyframes a2v1sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a2v1track span{color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:15px;font-weight:800;margin:0 28px;letter-spacing:1px;}
.a2v1bar:hover .a2v1track{animation-play-state:paused;}
.a2v1bar{cursor:default;}
</style>
<div class="a2v1bar">
  <div class="a2v1track">
    <span>FLASH SALE — 30% OFF ENDS MIDNIGHT ✦</span><span>FLASH SALE — 30% OFF ENDS MIDNIGHT ✦</span><span>FLASH SALE — 30% OFF ENDS MIDNIGHT ✦</span><span>FLASH SALE — 30% OFF ENDS MIDNIGHT ✦</span><span>FLASH SALE — 30% OFF ENDS MIDNIGHT ✦</span><span>FLASH SALE — 30% OFF ENDS MIDNIGHT ✦</span>
  </div>
</div>

2. Home Decor Store – Calm Linen Marquee

Home shoppers browse slowly and deliberately. A warm linen-toned bar that pauses on hover matches that unhurried, considered buying mood.

Preview

Sample text: Handwoven festive collection now live

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-marquee-pause-on-hover v2 (Home Decor Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a2v2bar{overflow:hidden;background:#f4eee3;padding:11px 0;}
.a2v2track{display:inline-flex;white-space:nowrap;animation:a2v2sc 28s linear infinite;}
@keyframes a2v2sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a2v2track span{color:#5b4632;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0 26px;letter-spacing:1px;}
.a2v2bar:hover .a2v2track{animation-play-state:paused;}
.a2v2bar{cursor:default;}
</style>
<div class="a2v2bar">
  <div class="a2v2track">
    <span>Handwoven festive collection now live —</span><span>Handwoven festive collection now live —</span><span>Handwoven festive collection now live —</span><span>Handwoven festive collection now live —</span><span>Handwoven festive collection now live —</span><span>Handwoven festive collection now live —</span>
  </div>
</div>

3. Fitness Store – High-Energy Marquee

Fitness buyers respond to energy. Neon-on-black with a lightning separator looks electric, and the hover-pause lets them catch the offer details mid-scroll.

Preview

Sample text: PROTEIN SALE — BUY 2 GET 1 FREE

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-marquee-pause-on-hover v3 (Fitness Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a2v3bar{overflow:hidden;background:#0d0d0d;padding:11px 0;}
.a2v3track{display:inline-flex;white-space:nowrap;animation:a2v3sc 18s linear infinite;}
@keyframes a2v3sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a2v3track span{color:#d7ff3e;font-family:'Arial Black', Arial, sans-serif;font-size:15px;font-weight:800;margin:0 26px;letter-spacing:1px;}
.a2v3bar:hover .a2v3track{animation-play-state:paused;}
.a2v3bar{cursor:default;}
</style>
<div class="a2v3bar">
  <div class="a2v3track">
    <span>PROTEIN SALE — BUY 2 GET 1 FREE ⚡</span><span>PROTEIN SALE — BUY 2 GET 1 FREE ⚡</span><span>PROTEIN SALE — BUY 2 GET 1 FREE ⚡</span><span>PROTEIN SALE — BUY 2 GET 1 FREE ⚡</span><span>PROTEIN SALE — BUY 2 GET 1 FREE ⚡</span><span>PROTEIN SALE — BUY 2 GET 1 FREE ⚡</span>
  </div>
</div>

4. Kids Store – Playful Pause Marquee

Parents shop between distractions. A cheerful purple bar that stops when hovered gives busy parents a fighting chance to read the deal.

Preview

Sample text: New toys every Friday — 20% off this week

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-marquee-pause-on-hover v4 (Kids Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a2v4bar{overflow:hidden;background:#6d28d9;padding:11px 0;}
.a2v4track{display:inline-flex;white-space:nowrap;animation:a2v4sc 24s linear infinite;}
@keyframes a2v4sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a2v4track span{color:#ffe45e;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:15px;font-weight:700;margin:0 26px;letter-spacing:1px;}
.a2v4bar:hover .a2v4track{animation-play-state:paused;}
.a2v4bar{cursor:default;}
</style>
<div class="a2v4bar">
  <div class="a2v4track">
    <span>New toys every Friday — 20% off this week ★</span><span>New toys every Friday — 20% off this week ★</span><span>New toys every Friday — 20% off this week ★</span><span>New toys every Friday — 20% off this week ★</span><span>New toys every Friday — 20% off this week ★</span><span>New toys every Friday — 20% off this week ★</span>
  </div>
</div>

5. Bookstore – Classic Reader Marquee

Book lovers appreciate the classics. Slow serif type on deep espresso, pausing politely on hover, feels like a well-designed book jacket.

Preview

Sample text: Signed editions — while stocks last

Liquid Code

{% comment %} LayoutKart snippet: shopify-liquid-marquee-pause-on-hover v5 (Bookstore) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a2v5bar{overflow:hidden;background:#241a12;padding:12px 0;}
.a2v5track{display:inline-flex;white-space:nowrap;animation:a2v5sc 30s linear infinite;}
@keyframes a2v5sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a2v5track span{color:#f0dfb8;font-family:Georgia, 'Times New Roman', serif;font-size:14px;font-weight:600;margin:0 28px;letter-spacing:1px;}
.a2v5bar:hover .a2v5track{animation-play-state:paused;}
.a2v5bar{cursor:default;}
</style>
<div class="a2v5bar">
  <div class="a2v5track">
    <span>Signed editions — while stocks last ❦</span><span>Signed editions — while stocks last ❦</span><span>Signed editions — while stocks last ❦</span><span>Signed editions — while stocks last ❦</span><span>Signed editions — while stocks last ❦</span><span>Signed editions — while stocks last ❦</span>
  </div>
</div>

How to Add a Pause-on-Hover 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 Pause-on-Hover Marquee

• Pause behavior: the magic is animation-play-state: paused on :hover — remove that line for a nonstop marquee.
• Speed: tweak the seconds in animation; 15–20s feels urgent, 28–35s feels premium.
• Cursor hint: add cursor: pointer if your bar contains links, so visitors know it’s interactive.
• Mobile: on touch screens there’s no hover — keep the text short so it’s readable at any scroll position.

More Shopify Code Sections

• Shopify Liquid Scrolling Announcement Bar: Code + Setup Guide
• Shopify Sticky Announcement Bar That Stays on Scroll
• Shopify Animated Sale Announcement Bar
• Shopify Countdown Timer Announcement Bar
• Shopify Scrolling Announcement Bar with Icons
• Shopify Announcement Bar with Clickable Links
• Shopify Dual-Line Marquee Effect
• Shopify Testimonial Auto Slider
• Shopify Infinite Logo Carousel
• Shopify Liquid Typing Text Effect

Conclusion

Pause-on-hover is the difference between a marquee people notice and one people actually read. It’s one line of CSS, zero apps, and it works on every OS 2.0 theme. Pick your style, paste it into a Custom Liquid section, and give your shoppers the courtesy of a readable announcement bar. Check the related tutorials for more motion effects that convert.

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.