In this tutorial, we’ll build a Shopify marquee text section from scratch using pure HTML, CSS, and JavaScript. Like our previous tutorials (scrolling announcement bar and parallax hero), the code provided here is an example only. You’ll copy it, paste it into a Custom HTML/Liquid block, and then tweak it to fit your store.
What You’ll Build
By the end of this article, you’ll have a marquee section that:
- Displays text scrolling continuously across the screen.
- Supports multiple messages separated by dividers.
- Can scroll left-to-right or right-to-left.
- Pauses when hovered for better readability.
- Allows customization of speed, fonts, colors, and spacing.
Example Code: Shopify Marquee Text Section
Here’s the ready-to-paste snippet. Remember: this is an example — you’ll replace the text and styles with your own.
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopify Marquee Text Section</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.marquee-section {
width: 100%;
background: #111;
color: #fff;
overflow: hidden;
position: relative;
height: 50px;
display: flex;
align-items: center;
}
.marquee-track {
display: flex;
white-space: nowrap;
will-change: transform;
}
.marquee-text {
padding: 0 2rem;
font-size: 1rem;
font-weight: 500;
}
.marquee-section.animate-left .marquee-track {
animation: marquee-left linear infinite;
animation-duration: var(--marquee-speed, 15s);
}
.marquee-section.animate-right .marquee-track {
animation: marquee-right linear infinite;
animation-duration: var(--marquee-speed, 15s);
}
@keyframes marquee-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.marquee-section.paused .marquee-track {
animation-play-state: paused !important;
}
</style>
<div class="marquee-section animate-left" id="marquee">
<div class="marquee-track">
<span class="marquee-text">🚚 Free shipping over $50</span>
<span class="marquee-text">🔥 20% off summer collection</span>
<span class="marquee-text">🌟 New arrivals in stock now</span>
<span class="marquee-text">📦 Fast & reliable delivery</span>
<!-- Duplicate for seamless loop -->
<span class="marquee-text">🚚 Free shipping over $50</span>
<span class="marquee-text">🔥 20% off summer collection</span>
<span class="marquee-text">🌟 New arrivals in stock now</span>
<span class="marquee-text">📦 Fast & reliable delivery</span>
</div>
</div>
<script>
(function() {
var marquee = document.getElementById('marquee');
if (!marquee) return;
marquee.addEventListener('mouseenter', function() {
marquee.classList.add('paused');
});
marquee.addEventListener('mouseleave', function() {
marquee.classList.remove('paused');
});
})();
</script>
</body>Step-by-Step Instructions
Step 1: Add the Section in Shopify
- Go to Online Store → Themes → Customize.
- Open the Homepage template (or any template where you want the marquee).
- Add a Custom HTML or Custom Liquid block.
- Paste the code above.
- Save.
Step 2: Replace the Text
Inside the .marquee-text spans, replace the example messages with your own:
<span class="marquee-text"> Free shipping over $50</span>
<span class="marquee-text"> 20% off summer collection</span>Step 3: Adjust the Speed
In the CSS, change animation-duration: var(--marquee-speed, 15s);
- Higher value = slower scroll (e.g., 25s).
- Lower value = faster scroll (e.g., 10s).
Step 4: Change Direction
Swap animate-left for animate-right in the main container:
<div class="marquee-section animate-right" id="marquee"></div>How It Works
- HTML.marquee-section = the container..marquee-track = holds the text spans..marquee-text = each individual message.
- CSS AnimationsTwo keyframes: marquee-left and marquee-right.They move the .marquee-track continuously across the container.
- JavaScriptSimple hover handler to pause animation when the user hovers over the marquee.
Customization Tips
- Colors: Change background: #111; and color: #fff; to match your brand.
- Font size: Adjust .marquee-text { font-size: … }.
- Spacing: Control padding between messages with padding: 0 2rem;.
- Height: Change .marquee-section { height: 50px; }.
- Icons/Emojis: Use emojis or inline SVGs for more eye-catching effects.
Best Practices
- Don’t overload: Keep the marquee text short and readable.
- Accessibility: Use high-contrast colors. Ensure text doesn’t move too fast.
- Performance: Avoid massive amounts of text — it can cause jank on low-powered devices.
- Use strategically: Marquees are best for one key message or a rotating set of offers.
Troubleshooting
- Marquee not moving? Double-check the class (animate-left or animate-right) is applied.
- Too fast/slow? Adjust the animation duration.
- Text cutoff? Make sure you duplicated the set of messages for seamless looping.
- Not responsive? Use percentages or viewport units for font size and spacing.
Conclusion
A marquee text section is a simple but powerful tool to highlight promotions or brand messaging. With this tutorial, you now know how to:
- Add a scrolling text marquee in Shopify with copy-paste code.
- Customize speed, direction, colors, and spacing.
- Troubleshoot common issues and make it your own.
The code here is an example only, but once you understand the structure, you can expand it endlessly: add gradients, icons, links, or even multiple rows of marquees.
By combining creativity with this foundation, you’ll have a Shopify store that not only looks modern but also communicates your message in a dynamic way.
