Benefit marquee

Copy-paste a theme-editor section for marketing - A horizontally scrolling strip of short benefits - pauses on hover and respects reduced-motion. Adapted from a real storefront build.

MarketingTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Free shipping•Easy returns•Quality checked•Secure checkout•COD available•

Blocks drive the items; it pauses on hover and respects reduced-motion.

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.

benefit-marquee.liquid

1{%- if section.blocks.size > 0 -%}2  <div class="gpl-marquee" style="--gpl-speed: {{ section.settings.speed }}s;" data-gpl-marquee>3    <div class="gpl-marquee__track">4      {%- for i in (1..2) -%}5        {%- for block in section.blocks -%}6          <span class="gpl-marquee__item" {{ block.shopify_attributes }} {% if i == 2 %}aria-hidden="true"{% endif %}>7            {{ block.settings.text | escape }}8          </span>9          {%- unless forloop.last and i == 2 -%}10          <span class="gpl-marquee__dot" aria-hidden="true">&bull;</span>11          {%- endunless -%}12          {%- endfor -%}13      {%- endfor -%}14    </div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

benefit-marquee.liquid

1{%- if section.blocks.size > 0 -%}2  <div class="gpl-marquee" style="--gpl-speed: {{ section.settings.speed }}s;" data-gpl-marquee>3    <div class="gpl-marquee__track">4      {%- for i in (1..2) -%}5        {%- for block in section.blocks -%}6          <span class="gpl-marquee__item" {{ block.shopify_attributes }} {% if i == 2 %}aria-hidden="true"{% endif %}>7            {{ block.settings.text | escape }}8          </span>9          {%- unless forloop.last and i == 2 -%}10          <span class="gpl-marquee__dot" aria-hidden="true">&bull;</span>11          {%- endunless -%}12          {%- endfor -%}13      {%- endfor -%}14    </div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access