Shopify Marquee Section Generator

A CSS-only scrolling strip for text or logos, that pauses for anyone who prefers reduced motion.

Your details

Content

Text

Motion

Speed (seconds per loop)

Direction

Pause on hover

Style

Background

Text color

Text size

Your section file (sections/marquee.liquid)

{%- comment -%}
  CSS-only scrolling strip. Content is duplicated once so the loop has no visible seam, and it respects
  prefers-reduced-motion by falling back to a normal, static, wrapped layout.
{%- endcomment -%}
{%- style -%}
  .ea-marquee{overflow:hidden;background:{{ section.settings.bg }};color:{{ section.settings.fg }};padding:.75em 0}
  .ea-marquee__track{display:flex;width:max-content;animation:ea-marquee-scroll {{ section.settings.speed }}s linear infinite;animation-direction:{{ section.settings.direction }}}
  .ea-marquee__group{display:flex;flex-shrink:0;gap:3em;padding-right:3em;white-space:nowrap;font-size:{{ section.settings.text_size }}px;align-items:center}
  .ea-marquee__group img{height:32px;width:auto;display:block}
  .ea-marquee:hover .ea-marquee__track{animation-play-state:paused}
  @keyframes ea-marquee-scroll{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.ea-marquee__track{animation:none;flex-wrap:wrap;width:auto}.ea-marquee__group{padding-right:0;white-space:normal}}
{%- endstyle -%}
{%- capture ea_marquee_content -%}
  {%- if section.settings.mode == 'logos' -%}
    {%- for block in section.blocks -%}
      {%- if block.settings.link != blank -%}<a href="{{ block.settings.link }}">{%- endif -%}
      {%- if block.settings.image -%}<img src="{{ block.settings.image | image_url: width: 200 }}" width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}" alt="{{ block.settings.image.alt | escape }}" loading="lazy" {{ block.shopify_attributes }}>{%- endif -%}
      {%- if block.settings.link != blank -%}</a>{%- endif -%}
    {%- endfor -%}
  {%- else -%}
    <span>{{ section.settings.text | escape }}</span>
  {%- endif -%}
{%- endcapture -%}
<div class="ea-marquee">
  <div class="ea-marquee__track">
    <div class="ea-marquee__group">{{ ea_marquee_content }}</div>
    <div class="ea-marquee__group" aria-hidden="true">{{ ea_marquee_content }}</div>
  </div>
</div>

{% schema %}
{
  "name": "Marquee",
  "tag": "section",
  "class": "ea-marquee-section",
  "settings": [
    {
      "type": "select",
      "id": "mode",
      "label": "Content",
      "options": [
        {
          "value": "text",
          "label": "Text"
        },
        {
          "value": "logos",
          "label": "Logos"
        }
      ],
      "default": "text"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text",
      "default": "Free shipping over $75 — New arrivals weekly — 30-day returns",
      "info": "Text mode only."
    },
    {
      "type": "range",
      "id": "speed",
      "label": "Speed",
      "min": 5,
      "max": 60,
      "step": 5,
      "unit": "s",
      "default": 20
    },
    {
      "type": "select",
      "id": "direction",
      "label": "Direction",
      "options": [
        {
          "value": "normal",
          "label": "Left"
        },
        {
          "value": "reverse",
          "label": "Right"
        }
      ],
      "default": "normal"
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover",
      "default": true
    },
    {
      "type": "color",
      "id": "bg",
      "label": "Background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "fg",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 12,
      "max": 32,
      "step": 1,
      "unit": "px",
      "default": 16
    }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Logo"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee"
    }
  ]
}
{% endschema %}

To install: in Shopify admin go to Online Store → Themes, click … next to your theme → Edit code. Under Sections choose Add a new section, name it as shown above, replace the contents with this code and save. Then open Customize and add the section where you want it. Try it on a duplicate of your theme first. For a logo strip, add an image block for each logo once it's placed.

Live preview

CSS animation, no JavaScript

The strip's content is duplicated once and animated with a CSS @keyframes loop that slides it exactly one copy's width, so it appears to scroll endlessly with no visible seam and no JavaScript running on every frame.

Anyone with prefers-reduced-motion turned on in their operating system sees the content laid out normally, wrapped and static, instead of the animation, which this respects automatically.

Adding it to your theme

01
Add the section
Online Store → Themes → Edit code → Sections → Add a new section named marquee, paste the code, then add it anywhere in Customize. For a logo strip, add an image block for each logo once it's placed.

Questions people ask

Can I use this for a scrolling list of press logos or "as seen in" badges?

Yes, switch to logo mode and add an image block per logo, each with an optional link.

Will it pause if someone hovers over it?

Turn on Pause on hover if you want that; it's off by default so the strip keeps moving.

Does the speed setting affect all screen sizes the same way?

The animation duration is fixed regardless of screen width, so the same setting will look faster on a narrow phone screen than on a wide desktop one, since the content travels the same distance in the same time either way.

Last reviewed 30 September 2026.