A scrolling brand-logos marquee is the louder, prouder cousin of the infinite carousel: edge-faded, pause-on-hover, often with a headline like “As Featured In”. It turns a static logo row into a living trust signal that visitors play with. And yes — pure CSS, no app required.

Below are 6 marquee styles, each scrolling live — hover to pause them. Copy your favourite into a Custom Liquid section. (Want the simpler no-frills version? See our infinite logo carousel tutorial too.)

1. Fashion – Editorial Press Marquee

Serif press names — VOGUE, ELLE, GQ — drifting across ivory with soft edge fades. It reads like the opening credits of a fashion film: prestigious, unhurried, inevitable. Hover pauses the scroll so readers can savour each name. The mask fade on both edges is what separates ‘marquee’ from ‘cheap ticker’ — don’t skip it.

Preview

Hover the marquee ☝️ — it pauses so you can read.

Liquid Code

<div class="lk-bl1">
  <p class="lk-bl1-head">AS FEATURED IN</p>
  <div class="lk-bl1-mask"><div class="lk-bl1-track"><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">VOGUE</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">ELLE</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">GQ</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">BAZAAR</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">COSMO</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">VOGUE</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">ELLE</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">GQ</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">BAZAAR</span><span style="font-family:Georgia,serif;font-size:26px;letter-spacing:2px;color:#444">COSMO</span></div></div>
</div>
<style>
.lk-bl1{background:#faf8f4;padding:34px 0;border-radius:12px;text-align:center}
.lk-bl1-head{font-size:12px;letter-spacing:4px;color:#999;margin:0 0 18px;font-weight:700}
.lk-bl1-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lk-bl1-track{display:flex;align-items:center;gap:70px;width:max-content;animation:lk-bl1Mq 24s linear infinite;}
.lk-bl1-mask:hover .lk-bl1-track{animation-play-state:paused}
@keyframes lk-bl1Mq{to{transform:translateX(-50%)}}
</style>

2. Beauty – Glowing Review Badges

Star-rated badges (‘4.9 ★ 12k reviews’) scrolling on blush instead of plain logos. This marquee sells ratings, not just names — social proof with numbers hits harder. Each badge is a pill with soft shadow, floating past like compliments. Beauty shoppers trust crowds; show them the crowd.

Preview

Review badges scrolling live ☝️ — hover to pause.

Liquid Code

<div class="lk-bl2">
  <p class="lk-bl2-head">LOVED BY THOUSANDS</p>
  <div class="lk-bl2-mask"><div class="lk-bl2-track"><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 12k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 8k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 25k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 5k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 18k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 12k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 8k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 25k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 5k reviews</span><span style="background:#fff;padding:10px 24px;border-radius:30px;font-weight:700;color:#9d4e5c;box-shadow:0 3px 12px rgba(0,0,0,.07);font-size:15px">★ 4.9 · 18k reviews</span></div></div>
</div>
<style>
.lk-bl2{background:#fdf5f2;padding:34px 0;border-radius:12px;text-align:center}
.lk-bl2-head{font-size:12px;letter-spacing:4px;color:#999;margin:0 0 18px;font-weight:700}
.lk-bl2-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lk-bl2-track{display:flex;align-items:center;gap:70px;width:max-content;animation:lk-bl2Mq 24s linear infinite;}
.lk-bl2-mask:hover .lk-bl2-track{animation-play-state:paused}
@keyframes lk-bl2Mq{to{transform:translateX(-50%)}}
</style>

3. Tech – Reverse Direction Ticker

Everything scrolls left — so scroll right and watch heads turn. This reverse-direction ticker on deep navy with electric-blue brand names feels contrarian and cutting-edge, perfect for standing out in a sea of sameness. The reversed flow subtly signals ‘we do things differently’. Tech brands, this one’s yours.

Preview

Scrolling backwards ☝️ — deliberately different.

Liquid Code

<div class="lk-bl3">
  <p class="lk-bl3-head">POWERING INNOVATION</p>
  <div class="lk-bl3-mask"><div class="lk-bl3-track"><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">NVIDIA</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">INTEL</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">AMD</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">ARM</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">QUALCOMM</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">NVIDIA</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">INTEL</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">AMD</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">ARM</span><span style="font-family:'Courier New',monospace;font-weight:700;color:#5ee7ff;font-size:20px">QUALCOMM</span></div></div>
</div>
<style>
.lk-bl3{background:#060a14;padding:34px 0;border-radius:12px;text-align:center}
.lk-bl3-head{font-size:12px;letter-spacing:4px;color:#999;margin:0 0 18px;font-weight:700}
.lk-bl3-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lk-bl3-track{display:flex;align-items:center;gap:70px;width:max-content;animation:lk-bl3Mq 20s linear infinite;animation-direction:reverse}
.lk-bl3-mask:hover .lk-bl3-track{animation-play-state:paused}
@keyframes lk-bl3Mq{to{transform:translateX(-50%)}}
</style>

4. Food – Double Row Marquee

Two rows scrolling in opposite directions — pure kinetic joy. Top row glides left with supplier names, bottom row slides right with certifications (Organic, Vegan, Halal). The counter-motion is hypnotic; visitors can’t look away. Food brands: this is how you make ‘our partners’ the most fun section on the page.

Preview

Two rows, opposite directions ☝️ — mesmerising.

Liquid Code

<div class="lk-bl4">
  <p class="lk-bl4-head">OUR PARTNERS</p>
  <div class="lk-bl4-mask"><div class="lk-bl4-track"><span>FRESH FARMS</span><span>DAIRY CO</span><span>SPICE ROUTE</span><span>BAKERY</span><span>ORCHARD</span><span>FRESH FARMS</span><span>DAIRY CO</span><span>SPICE ROUTE</span><span>BAKERY</span><span>ORCHARD</span></div></div>
  <div class="lk-bl4-mask"><div class="lk-bl4-track rev"><span>ORGANIC</span><span>VEGAN</span><span>HALAL</span><span>GLUTEN-FREE</span><span>NON-GMO</span><span>ORGANIC</span><span>VEGAN</span><span>HALAL</span><span>GLUTEN-FREE</span><span>NON-GMO</span></div></div>
</div>
<style>
.lk-bl4{background:#fffdf5;padding:30px 0;border-radius:12px;text-align:center}
.lk-bl4-head{font-size:12px;letter-spacing:4px;color:#b45309;margin:0 0 16px;font-weight:700}
.lk-bl4-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);margin-bottom:14px}
.lk-bl4-track{display:flex;align-items:center;gap:60px;width:max-content;animation:lkBl4Mq 22s linear infinite}
.lk-bl4-track.rev{animation-direction:reverse}
.lk-bl4-mask:hover .lk-bl4-track{animation-play-state:paused}
.lk-bl4-track span{font-weight:800;color:#92400e;white-space:nowrap;font-size:18px}
@keyframes lkBl4Mq{to{transform:translateX(-50%)}}
</style>

5. Fitness – High-Energy Sponsor Strip

Condensed black type with red slashes on charcoal — the marquee equivalent of a stadium announcement. It moves fast (16s loop) because fitness never stands still. Use it for sponsor logos, athlete names, or event partners. The speed is the message: this brand moves.

Preview

High-speed marquee ☝️ — blink and you’ll miss a logo.

Liquid Code

<div class="lk-bl5">
  <p class="lk-bl5-head">OFFICIAL PARTNERS</p>
  <div class="lk-bl5-mask"><div class="lk-bl5-track"><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">ROGUE <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">NIKE <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">GNC <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">REEBOK <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">PUMA <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">ROGUE <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">NIKE <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">GNC <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">REEBOK <span style="color:#ff3b3b">/</span></span><span style="font-weight:900;font-size:22px;color:#fff;letter-spacing:1px">PUMA <span style="color:#ff3b3b">/</span></span></div></div>
</div>
<style>
.lk-bl5{background:#0d0d0d;padding:34px 0;border-radius:12px;text-align:center}
.lk-bl5-head{font-size:12px;letter-spacing:4px;color:#999;margin:0 0 18px;font-weight:700}
.lk-bl5-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lk-bl5-track{display:flex;align-items:center;gap:70px;width:max-content;animation:lk-bl5Mq 16s linear infinite;}
.lk-bl5-mask:hover .lk-bl5-track{animation-play-state:paused}
@keyframes lk-bl5Mq{to{transform:translateX(-50%)}}
</style>

6. Luxury – Slow Golden Marquee

Slow it right down. A 40-second gold-on-black marquee doesn’t scroll — it processes, like royalty. The glacial pace says these partnerships were earned over decades, not bought last Tuesday. For heritage brands, auction houses, and anyone whose logo strip should feel like a hall of fame.

Preview

Glacial golden scroll ☝️ — luxury takes its time.

Liquid Code

<div class="lk-bl6">
  <p class="lk-bl6-head">IN DISTINGUISHED COMPANY</p>
  <div class="lk-bl6-mask"><div class="lk-bl6-track"><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">CARTIER</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">ROLEX</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">HERMÈS</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">CHANEL</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">DIOR</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">CARTIER</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">ROLEX</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">HERMÈS</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">CHANEL</span><span style="font-family:Georgia,serif;font-size:24px;letter-spacing:3px;color:#d4af37">DIOR</span></div></div>
</div>
<style>
.lk-bl6{background:#101010;padding:34px 0;border-radius:12px;text-align:center}
.lk-bl6-head{font-size:12px;letter-spacing:4px;color:#999;margin:0 0 18px;font-weight:700}
.lk-bl6-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lk-bl6-track{display:flex;align-items:center;gap:70px;width:max-content;animation:lk-bl6Mq 40s linear infinite;}
.lk-bl6-mask:hover .lk-bl6-track{animation-play-state:paused}
@keyframes lk-bl6Mq{to{transform:translateX(-50%)}}
</style>

How to Add Scrolling Brand Logos Section to Shopify

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize on your live (published) theme.
3. In the theme editor sidebar, click Add section → Custom Liquid.
4. Copy the code from any variation above and paste it into the Custom Liquid box.
5. Drag the section where you want it on the homepage and click Save — done! No app needed.

Customize the Scrolling Brand Logos Section

• The edge fade comes from the mask-image gradient — adjust the percentages (12%/88%) for a wider or narrower fade.
• Pause on hover is built in via animation-play-state:paused — remove that line if you want non-stop motion.
• Change speed in the animation shorthand (24s) and direction with animation-direction:reverse.
• Swap text logos for image logos: replace each <span> with <img src="..." style="height:36px">.
• Keep the track content duplicated exactly ({logos}{logos}) or the loop will jump — that’s the seamless-loop secret.

More Shopify Code Sections

• Shopify Infinite Logo Carousel (No App)
• Shopify Liquid Announcement Bar with Scrolling Text
• Shopify Dual-Line Marquee Effect
• Shopify Animated Counter Section
• Shopify Testimonial Auto Slider
• Shopify Hero Banner Text Animation (Liquid + CSS)
• Shopify Scrolling Brand Logos Section
• Shopify Countdown Announcement Bar

Conclusion

A scrolling brand marquee turns borrowed credibility into a living, breathing homepage moment — and the edge-fade plus hover-pause details are what make it feel designed rather than pasted. Pick the speed and style that match your brand’s pulse, duplicate your logo row for the seamless loop, and drop it into Custom Liquid. Trust, on autopilot.

Want more copy-paste Shopify sections like this? Check out LayoutKart’s premium Shopify templates — professionally designed themes packed with conversion-boosting sections, ready to launch in minutes.