One scrolling line is nice. Two lines moving in opposite directions is unforgettable. The dual-line marquee creates a kinetic, editorial look — think fashion week banners and music festival posters — that makes your store feel alive the second it loads. It’s pure CSS (one row runs the animation in reverse), so there’s zero JavaScript and zero performance cost. Paste it into a Custom Liquid section — no app needed. Five bold variations below, each with a live preview and the exact code.

1. Fashion Store – Runway Dual Marquee

Nothing says fashion like opposing motion. Black and gold rows sliding past each other feel like a runway — perfect for drop announcements.

Preview

Sample text: NEW SEASON DROP

Liquid Code

{% comment %} LayoutKart snippet: shopify-dual-line-marquee-effect v1 (Fashion Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a10v1r1{overflow:hidden;background:#101010;padding:10px 0;}
.a10v1r1 .trk{display:inline-flex;white-space:nowrap;animation:a10v1k1 22s linear infinite;animation-direction:normal;}
@keyframes a10v1k1{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v1r1 span{color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:800;margin:0 28px;letter-spacing:1px;}
.a10v1r2{overflow:hidden;background:#d4af37;padding:10px 0;}
.a10v1r2 .trk{display:inline-flex;white-space:nowrap;animation:a10v1k2 26s linear infinite;animation-direction:reverse;}
@keyframes a10v1k2{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v1r2 span{color:#101010;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:800;margin:0 28px;letter-spacing:1px;}
</style>
<div class="a10v1r1"><div class="trk"><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span></div></div>
<div class="a10v1r2"><div class="trk"><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span><span>NEW SEASON DROP ✦</span></div></div>

2. Electronics Store – Cyber Dual Marquee

Dual motion reads as high-tech energy. Navy and purple counter-scrolling rows give your sale the feel of a product launch event.

Preview

Sample text: MEGA TECH SALE

Liquid Code

{% comment %} LayoutKart snippet: shopify-dual-line-marquee-effect v2 (Electronics Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a10v2r1{overflow:hidden;background:#071c33;padding:10px 0;}
.a10v2r1 .trk{display:inline-flex;white-space:nowrap;animation:a10v2k1 18s linear infinite;animation-direction:normal;}
@keyframes a10v2k1{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v2r1 span{color:#37e0ff;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:15px;font-weight:800;margin:0 26px;letter-spacing:1px;}
.a10v2r2{overflow:hidden;background:#7b2ff7;padding:10px 0;}
.a10v2r2 .trk{display:inline-flex;white-space:nowrap;animation:a10v2k2 22s linear infinite;animation-direction:reverse;}
@keyframes a10v2k2{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v2r2 span{color:#ffffff;font-family:'Trebuchet MS', Verdana, sans-serif;font-size:15px;font-weight:800;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a10v2r1"><div class="trk"><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span></div></div>
<div class="a10v2r2"><div class="trk"><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span><span>MEGA TECH SALE ▸</span></div></div>

3. Beauty Store – Soft Dual Marquee

Even maximalist motion can feel soft. Blush and white rows in slow serif counter-scroll give beauty promos a dreamy, editorial quality.

Preview

Sample text: The glow edit is here

Liquid Code

{% comment %} LayoutKart snippet: shopify-dual-line-marquee-effect v3 (Beauty Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a10v3r1{overflow:hidden;background:#fbeef2;padding:11px 0;}
.a10v3r1 .trk{display:inline-flex;white-space:nowrap;animation:a10v3k1 28s linear infinite;animation-direction:normal;}
@keyframes a10v3k1{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v3r1 span{color:#a1234f;font-family:Georgia, 'Times New Roman', serif;font-size:15px;font-weight:600;margin:0 28px;letter-spacing:1px;}
.a10v3r2{overflow:hidden;background:#ffffff;padding:11px 0;}
.a10v3r2 .trk{display:inline-flex;white-space:nowrap;animation:a10v3k2 32s linear infinite;animation-direction:reverse;}
@keyframes a10v3k2{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v3r2 span{color:#a1234f;font-family:Georgia, 'Times New Roman', serif;font-size:15px;font-weight:600;margin:0 28px;letter-spacing:1px;}
</style>
<div class="a10v3r1"><div class="trk"><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span></div></div>
<div class="a10v3r2"><div class="trk"><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span><span>The glow edit is here ❋</span></div></div>

4. Food Store – Fresh Dual Marquee

Food promos should feel abundant. Orange and black rows moving against each other create the buzzing energy of a busy weekend market.

Preview

Sample text: WEEKEND FEAST — 30% OFF

Liquid Code

{% comment %} LayoutKart snippet: shopify-dual-line-marquee-effect v4 (Food Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a10v4r1{overflow:hidden;background:#e8590c;padding:10px 0;}
.a10v4r1 .trk{display:inline-flex;white-space:nowrap;animation:a10v4k1 20s linear infinite;animation-direction:normal;}
@keyframes a10v4k1{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v4r1 span{color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:15px;font-weight:800;margin:0 26px;letter-spacing:1px;}
.a10v4r2{overflow:hidden;background:#1a1a1a;padding:10px 0;}
.a10v4r2 .trk{display:inline-flex;white-space:nowrap;animation:a10v4k2 24s linear infinite;animation-direction:reverse;}
@keyframes a10v4k2{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v4r2 span{color:#ffd43b;font-family:Verdana, Geneva, sans-serif;font-size:15px;font-weight:800;margin:0 26px;letter-spacing:1px;}
</style>
<div class="a10v4r1"><div class="trk"><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span></div></div>
<div class="a10v4r2"><div class="trk"><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span><span>WEEKEND FEAST — 30% OFF •</span></div></div>

5. Fitness Store – Beast Dual Marquee

Fitness is confrontation. Black and volt rows colliding in opposite directions feel aggressive in exactly the way gym culture loves.

Preview

Sample text: NO EXCUSES — GEAR UP

Liquid Code

{% comment %} LayoutKart snippet: shopify-dual-line-marquee-effect v5 (Fitness Store) - paste into a Shopify Custom Liquid section {% endcomment %}
<style>
.a10v5r1{overflow:hidden;background:#0d0d0d;padding:10px 0;}
.a10v5r1 .trk{display:inline-flex;white-space:nowrap;animation:a10v5k1 18s linear infinite;animation-direction:normal;}
@keyframes a10v5k1{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v5r1 span{color:#d7ff3e;font-family:'Arial Black', Arial, sans-serif;font-size:16px;font-weight:800;margin:0 28px;letter-spacing:1px;}
.a10v5r2{overflow:hidden;background:#d7ff3e;padding:10px 0;}
.a10v5r2 .trk{display:inline-flex;white-space:nowrap;animation:a10v5k2 22s linear infinite;animation-direction:reverse;}
@keyframes a10v5k2{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.a10v5r2 span{color:#0d0d0d;font-family:'Arial Black', Arial, sans-serif;font-size:16px;font-weight:800;margin:0 28px;letter-spacing:1px;}
</style>
<div class="a10v5r1"><div class="trk"><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span></div></div>
<div class="a10v5r2"><div class="trk"><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span><span>NO EXCUSES — GEAR UP ⚡</span></div></div>

How to Add a Dual-Line 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 Dual-Line Marquee

• Directions: the second row uses animation-direction: reverse — flip which row reverses for a different feel.
• Speed contrast: give the rows different durations (e.g. 18s vs 26s) so the motion feels organic, not mechanical.
• Colors: high-contrast row pairs (dark/light) create the most striking editorial effect.
• Height: keep padding tight — two rows already command attention; slimmer rows look more premium.

More Shopify Code Sections

• Shopify Liquid Scrolling Announcement Bar: Code + Setup Guide
• Shopify Liquid Marquee Effect with Pause on Hover
• Shopify Scrolling Announcement Bar with Icons
• Shopify Announcement Bar with Clickable Links
• Shopify Animated Sale Announcement Bar
• Shopify Countdown Timer Announcement Bar
• Shopify Infinite Logo Carousel
• Shopify Scrolling Brand Logo Section
• Shopify Animated Gradient Text
• Shopify Liquid Typing Text Effect

Conclusion

The dual-line marquee is the boldest announcement effect in this series — two rows, opposite directions, pure CSS, zero apps. Use it for launches, drops, and big sales when you want maximum energy above the fold. Paste it into a Custom Liquid section, tune the speed contrast, and let the motion sell. More kinetic Shopify snippets are waiting 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.