Diwali Sale is LIVE - special prices end in
⚡ Launch-ready Shopify themes — Instant licensed download · 300+ stores built with LayoutKart themes
Book Call

Free Marquee Effect Liquid Code for Shopify

By /

Want to add a modern scrolling marquee to your Shopify store without installing another app?

In this free Shopify code library, you’ll find ready-to-use Marquee Effect Liquid Code for different types of stores and design styles. From elegant jewelry stores to modern home decoration brands, each example comes with a different visual style that you can customize for your Shopify theme.

Simply choose a design, copy the code, and add it to your Shopify store.

Marquee Effect Liquid Code
Marquee Effect Liquid Code

Shopify Marquee Effect Liquid Code Library

Below are different Marquee Effect designs created for popular Shopify store categories. Each example uses a different style so you can choose the one that best matches your brand.

1. Jewelry Store – Elegant Marquee Effect

Create a luxury scrolling text section for jewelry and accessories stores.

Preview

NEW JEWELRY COLLECTION ✦ TIMELESS DESIGNS ✦ SHOP THE COLLECTION

NEW JEWELRY COLLECTION ✦ TIMELESS DESIGNS ✦ SHOP THE COLLECTION ✦ NEW JEWELRY COLLECTION ✦

Liquid Code

<div class="lk-jewelry-marquee">
  <div class="lk-jewelry-track">
    <span>NEW JEWELRY COLLECTION</span>
    <span>✦</span>
    <span>TIMELESS DESIGNS</span>
    <span>✦</span>
    <span>SHOP THE COLLECTION</span>
    <span>✦</span>
    <span>NEW JEWELRY COLLECTION</span>
    <span>✦</span>
  </div>
</div>

<style>
.lk-jewelry-marquee {
  overflow: hidden;
  width: 100%;
  background: #111;
  color: #fff;
  padding: 18px 0;
}

.lk-jewelry-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: lkJewelryMarquee 18s linear infinite;
}

.lk-jewelry-track span {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 2px;
  white-space: nowrap;
  margin-right: 35px;
}

@keyframes lkJewelryMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

2. Home Decoration – Modern Marquee Effect

A clean scrolling marquee for modern furniture and home decoration stores.

Preview

MAKE YOUR SPACE BEAUTIFUL • MODERN HOME • TIMELESS INTERIORS

MAKE YOUR SPACE BEAUTIFUL • MODERN HOME • TIMELESS INTERIORS • MAKE YOUR SPACE BEAUTIFUL •

Liquid Code

<div class="lk-home-marquee">
  <div class="lk-home-track">
    <span>MAKE YOUR SPACE BEAUTIFUL</span>
    <span>•</span>
    <span>MODERN HOME</span>
    <span>•</span>
    <span>TIMELESS INTERIORS</span>
    <span>•</span>
    <span>MAKE YOUR SPACE BEAUTIFUL</span>
    <span>•</span>
  </div>
</div>

<style>
.lk-home-marquee {
  overflow: hidden;
  width: 100%;
  background: #f3f0ea;
  color: #222;
  padding: 20px 0;
}

.lk-home-track {
  display: flex;
  width: max-content;
  animation: lkHomeMarquee 20s linear infinite;
}

.lk-home-track span {
  font-size: 28px;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 40px;
}

@keyframes lkHomeMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

3. Clothing Store – Bold Fashion Marquee

Use this bold scrolling marquee for fashion, clothing, and apparel stores.

Preview

NEW SEASON / FRESH STYLES / SHOP THE LATEST / NEW SEASON4

NEW SEASON / FRESH STYLES / SHOP THE LATEST / NEW SEASON /

Liquid Code

<div class="lk-fashion-marquee">
  <div class="lk-fashion-track">
    <span>NEW SEASON</span>
    <span>/</span>
    <span>FRESH STYLES</span>
    <span>/</span>
    <span>SHOP THE LATEST</span>
    <span>/</span>
    <span>NEW SEASON</span>
    <span>/</span>
  </div>
</div>

<style>
.lk-fashion-marquee {
  overflow: hidden;
  background: #000;
  color: #fff;
  padding: 22px 0;
}

.lk-fashion-track {
  display: flex;
  width: max-content;
  animation: lkFashionMarquee 14s linear infinite;
}

.lk-fashion-track span {
  font-size: 38px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 35px;
  letter-spacing: -1px;
}

@keyframes lkFashionMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

4. Beauty Store – Soft Marquee Effect

A smooth and minimal marquee for beauty, skincare, and cosmetics stores.

Preview

GLOW EVERY DAY ✦ BEAUTY ESSENTIALS ✦ FEEL YOUR BEST

GLOW EVERY DAY ✦ BEAUTY ESSENTIALS ✦ FEEL YOUR BEST ✦ GLOW EVERY DAY ✦

Liquid Code

<div class="lk-beauty-marquee">
  <div class="lk-beauty-track">
    <span>GLOW EVERY DAY</span>
    <span>✦</span>
    <span>BEAUTY ESSENTIALS</span>
    <span>✦</span>
    <span>FEEL YOUR BEST</span>
    <span>✦</span>
    <span>GLOW EVERY DAY</span>
    <span>✦</span>
  </div>
</div>

<style>
.lk-beauty-marquee {
  overflow: hidden;
  background: #f8eee9;
  color: #3b2925;
  padding: 18px 0;
}

.lk-beauty-track {
  display: flex;
  width: max-content;
  animation: lkBeautyMarquee 19s linear infinite;
}

.lk-beauty-track span {
  font-size: 25px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 32px;
}

@keyframes lkBeautyMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

5. Modern Gradient Marquee

A colorful modern gradient marquee that works well for creative brands, fashion stores, and modern Shopify themes.

Preview

DISCOVER SOMETHING NEW • SHOP THE LATEST COLLECTION •

Liquid Code

<div class="lk-gradient-marquee">
  <div class="lk-gradient-track">
    <span>DISCOVER SOMETHING NEW</span>
    <span>•</span>
    <span>SHOP THE LATEST COLLECTION</span>
    <span>•</span>
    <span>DISCOVER SOMETHING NEW</span>
    <span>•</span>
  </div>
</div>

<style>
.lk-gradient-marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #6d5dfc, #ec4899, #f59e0b);
  color: #fff;
  padding: 24px 0;
}

.lk-gradient-track {
  display: flex;
  width: max-content;
  animation: lkGradientMarquee 16s linear infinite;
}

.lk-gradient-track span {
  font-size: 34px;
  font-weight: 800;
  white-space: nowrap;
  margin-right: 42px;
}

@keyframes lkGradientMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

6. Minimal Luxury Marquee

A simple premium-looking marquee for luxury brands, jewelry stores, fashion brands, and premium products.

Preview

CRAFTED WITH PURPOSE — DESIGNED TO LAST — MADE FOR YOU

CRAFTED WITH PURPOSE — DESIGNED TO LAST — MADE FOR YOU — CRAFTED WITH PURPOSE —

Liquid Code

<div class="lk-luxury-marquee">
  <div class="lk-luxury-track">
    <span>CRAFTED WITH PURPOSE</span>
    <span>—</span>
    <span>DESIGNED TO LAST</span>
    <span>—</span>
    <span>MADE FOR YOU</span>
    <span>—</span>
    <span>CRAFTED WITH PURPOSE</span>
    <span>—</span>
  </div>
</div>

<style>
.lk-luxury-marquee {
  overflow: hidden;
  background: #fff;
  color: #111;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  padding: 17px 0;
}

.lk-luxury-track {
  display: flex;
  width: max-content;
  animation: lkLuxuryMarquee 22s linear infinite;
}

.lk-luxury-track span {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 3px;
  white-space: nowrap;
  margin-right: 45px;
}

@keyframes lkLuxuryMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

7. Free Shipping Marquee

Perfect for Shopify stores that want to highlight shipping or promotional offers.

Preview

FREE SHIPPING ON ORDERS OVER $50 • EASY RETURNS • SECURE CHECKOUT

FREE SHIPPING ON ORDERS OVER $50 • EASY RETURNS • SECURE CHECKOUT • FREE SHIPPING ON ORDERS OVER $50 •

Liquid Code

<div class="lk-shipping-marquee">
  <div class="lk-shipping-track">
    <span>FREE SHIPPING ON ORDERS OVER $50</span>
    <span>•</span>
    <span>EASY RETURNS</span>
    <span>•</span>
    <span>SECURE CHECKOUT</span>
    <span>•</span>
    <span>FREE SHIPPING ON ORDERS OVER $50</span>
    <span>•</span>
  </div>
</div>

<style>
.lk-shipping-marquee {
  overflow: hidden;
  background: #171717;
  color: #fff;
  padding: 15px 0;
}

.lk-shipping-track {
  display: flex;
  width: max-content;
  animation: lkShippingMarquee 17s linear infinite;
}

.lk-shipping-track span {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 30px;
}

@keyframes lkShippingMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>

How to Add the Marquee Effect to Shopify

You can add these snippets to your Shopify store using a Custom Liquid section.

  1. Open your Shopify Theme Editor.
  2. Add a Custom Liquid section.
  3. Copy the Liquid code from your preferred marquee.
  4. Paste the code into the Custom Liquid section.
  5. Save your changes.
  6. Preview your storefront.

You can replace the sample text, colors, font sizes, spacing, and animation speed to match your Shopify theme.

Customize the Marquee Speed

Each marquee uses a CSS animation duration such as:

animation: lkGradientMarquee 16s linear infinite;

Change 16s to control the speed.

For a faster marquee:

animation: lkGradientMarquee 10s linear infinite;

For a slower marquee:

animation: lkGradientMarquee 25s linear infinite;

More Shopify Code Sections

Explore more free Shopify sections and effects from LayoutKart:

  • Shopify Announcement Bar
  • Shopify Instagram Reels Section
  • Shopify Video Section
  • Shopify Product Grid
  • Shopify Product Card
  • Shopify Collection Section
  • Shopify Popup
  • Shopify Order Notification
  • Shopify Product Comparison
  • Shopify Footer
  • Shopify Countdown Timer
  • Shopify Testimonial Section

Each section can include ready-to-use code with a live preview, making it easier to customize your Shopify store without adding another app.

Conclusion

Marquee effects are a simple way to add movement and personality to a Shopify storefront. Whether you have a jewelry, clothing, home decoration, beauty, fashion, or modern lifestyle store, you can choose a marquee style that matches your brand.

Use the examples above as a starting point, customize the text and styling, and create a unique scrolling section for your Shopify store.

All code examples are designed to be lightweight, customizable, and easy to add through Shopify Custom Liquid.

anurag Layoutkart
Author: anurag Layoutkart

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top