Shopify Scroll-on-Hover Banner Effect Tutorial (Full Example Code)

A static banner does the job of showing promotions or store-wide offers, but interactive banners go further — they invite user engagement. One of the simplest interactive techniques is the scroll-on-hover effect, where the text or content inside the banner scrolls horizontally only when the visitor hovers over it.

Shopify
Date
Sep 24, 2026
Author
Matvii Yanovych
1 min
Scroll-on Hover
Scroll-on Hover

—

This balances clarity with interactivity: the banner stays calm and readable until hovered, at which point the text smoothly scrolls to reveal the full message or extra offers.

In this tutorial, you’ll learn how to add a Shopify scroll-on-hover banner effect using pure HTML, CSS, and JavaScript — no apps, no Liquid, no external libraries. This example is just a demo snippet you can paste into your Custom HTML/Liquid block, then tweak to match your store.

What You’ll Build

  • A banner at the top of your store (or any page section).
  • Text that scrolls left or right only on hover.
  • Smooth, modern animation with adjustable speed.
  • Fully responsive for desktop and mobile.
  • Simple CSS variables to tweak fonts, colors, and spacing.

Example Code — Scroll-on-Hover Banner

Copy this entire snippet and paste it into your Shopify Custom HTML or Custom Liquid section.
Remember: This is an example only — edit the messages, colors, and speed to fit your brand.

DESIGNED FOR REFERENCE ONLY 
<body>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopify Scroll on Hover Banner Effect</title>
  <style>
    :root {
      --hover-bg: #111;
      --hover-fg: #fff;
      --hover-height: 48px;
      --hover-speed: 12s; /* adjust for faster/slower */
    }

    body { margin: 0; font-family: Arial, sans-serif; }

    .hover-banner {
      width: 100%;
      height: var(--hover-height);
      background: var(--hover-bg);
      color: var(--hover-fg);
      overflow: hidden;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
    }

    .hover-track {
      display: inline-flex;
      white-space: nowrap;
      transform: translateX(0);
    }

    .hover-text {
      padding: 0 2rem;
      font-size: 14px;
      font-weight: 500;
    }

    /* Animation only triggers when hovered */
    .hover-banner:hover .hover-track {
      animation: scroll-left var(--hover-speed) linear infinite;
    }

    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
  </style>


  <div class="hover-banner">
    <div class="hover-track">
      <span class="hover-text">🚚 Free shipping over $50</span>
      <span class="hover-text">🔥 Buy 2 get 1 free this weekend</span>
      <span class="hover-text">⭐ Join our rewards club for exclusive perks</span>
      <!-- Duplicate for seamless looping -->
      <span class="hover-text">🚚 Free shipping over $50</span>
      <span class="hover-text">🔥 Buy 2 get 1 free this weekend</span>
      <span class="hover-text">⭐ Join our rewards club for exclusive perks</span>
    </div>
  </div>

</body>

Step-by-Step Setup

Step 1: Open the Theme Editor

  • Go to Online Store → Themes → Customize.
  • Choose the homepage or any template you want the banner to appear on.

Step 2: Insert the Snippet

  • Add a Custom HTML block at the very top.
  • Paste the snippet above.
  • Save your changes.

Step 3: Customize Text & Offers

Change the <span class="hover-text">…</span> lines with your own store announcements, offers, or calls-to-action.

Step 4: Adjust Speed & Colors

  • Change --hover-speed in the CSS to control animation speed.
  • Adjust --hover-bg and --hover-fg for background/text color.
  • Increase or decrease --hover-height to change banner thickness.

How It Works

  1. HTML: The .hover-banner contains a .hover-track with multiple .hover-text spans. The text is duplicated to create a looping effect.
  2. CSS: The @keyframes scroll-left moves the track left. Animation only runs when .hover-banner is hovered, thanks to the :hover selector.
  3. No JS Required: This effect works with just HTML and CSS — lean, fast, and mobile-friendly.

Customization Ideas

  • Right-to-left scroll: Flip the animation direction in the keyframes.
  • Pause on hover-in/out: Already built in — no scroll unless hovered.
  • Use emojis/icons: Add small icons or inline SVGs for extra pop.
  • Link each message: Wrap messages in <a> tags with href values for clickable CTAs.
  • Different speeds per message: Create multiple tracks with separate animations.

SEO & UX Best Practices

  • Keep text short and clear: long sentences are hard to read.
  • Highlight high-value offers (free shipping, discounts, limited time).
  • Make sure text contrasts strongly with the background.
  • Don’t overwhelm — use no more than 3–4 messages at once.
  • Test on mobile devices: ensure readability at smaller widths.

Troubleshooting

  • Text doesn’t scroll: Ensure you hover directly on the banner, not outside.
  • Too fast or too slow: Change --hover-speed.
  • Text gets cut off: Duplicate messages so the track length exceeds container width.
  • Not visible? Double-check that background and color have good contrast.

Conclusion

With this snippet, you’ve learned how to create a Shopify scroll-on-hover banner effect that looks professional, engages customers, and draws attention to your promos. It’s lightweight, requires no apps, and is fully customizable.

Use this as a foundation, then get creative: add gradient backgrounds, clickable links, or stack multiple hover banners for special campaigns. With thoughtful customization, this small effect can deliver big results in engagement and conversions.