Logo / 'as seen in' marquee

Copy-paste a theme-editor section for marketing - A scrolling strip of press or partner marks. Ships with text placeholders - swap in your real logos as images.

MarketingTheme sectionFree to copyOS 2.0 themes

Live previewCustomize in playground

As featured in

Times of IndiaYourStoryInc42Economic TimesMint

Blocks take real logo images; text shows until assets are uploaded.

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.

logo-marquee.liquid

Complete source

1{%- comment -%}2  Uses image blocks for real logos; text renders as a fallback wordmark so the3  layout still works before assets are uploaded.4{%- endcomment -%}5{%- if section.blocks.size > 0 -%}6  <div class="gpl-logos" style="--gpl-speed: {{ section.settings.speed }}s;">7    <p class="gpl-logos__eyebrow">{{ section.settings.eyebrow | escape }}</p>8    <div class="gpl-logos__mask">9      <div class="gpl-logos__track">10        {%- for i in (1..2) -%}11          {%- for block in section.blocks -%}12            <span class="gpl-logos__item" {{ block.shopify_attributes }} {% if i == 2 %}aria-hidden="true"{% endif %}>13              {%- if block.settings.image != blank -%}14                {{ block.settings.image | image_url: height: 48 | image_tag: loading: 'lazy', class: 'gpl-logos__img', alt: block.settings.name }}15              {%- else -%}16                <span class="gpl-logos__word">{{ block.settings.name | escape }}</span>17              {%- endif -%}18            </span>19          {%- endfor -%}20        {%- endfor -%}21      </div>22    </div>23  </div>24{%- endif -%}25 26{% schema %}27{28  "name": "Logo marquee",29  "settings": [30    { "type": "text", "id": "eyebrow", "label": "Small heading", "default": "As featured in" },31    {32      "type": "range",33      "id": "speed",34      "label": "Seconds per loop",35      "min": 6,36      "max": 40,37      "step": 2,38      "default": 1639    }40  ],41  "blocks": [42    {43      "type": "logo",44      "name": "Logo",45      "settings": [46        { "type": "image_picker", "id": "image", "label": "Logo image" },47        { "type": "text", "id": "name", "label": "Name (fallback text)", "default": "Press name" }48      ]49    }50  ],51  "max_blocks": 14,52  "presets": [{ "name": "Logo marquee", "blocks": [{ "type": "logo" }, { "type": "logo" }, { "type": "logo" }, { "type": "logo" }] }]53}54{% endschema %}55 56{% stylesheet %}57.gpl-logos { padding: 1.5rem 0; text-align: center; }58.gpl-logos__eyebrow { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }59.gpl-logos__mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }60.gpl-logos__track {61  display: inline-flex;62  align-items: center;63  gap: 3rem;64  white-space: nowrap;65  animation: gpl-logos var(--gpl-speed, 16s) linear infinite;66  will-change: transform;67}68.gpl-logos:hover .gpl-logos__track { animation-play-state: paused; }69.gpl-logos__item { display: inline-flex; align-items: center; }70.gpl-logos__img { height: 1.75rem; width: auto; opacity: 0.7; }71.gpl-logos__word { font-size: 1rem; font-weight: 700; opacity: 0.55; letter-spacing: 0.02em; }72@keyframes gpl-logos { to { transform: translateX(-50%); } }73@media (prefers-reduced-motion: reduce) {74  .gpl-logos__track { animation: none; }75}76{% endstylesheet %}77

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.

logo-marquee.liquid

Complete source

1{%- comment -%}2  Uses image blocks for real logos; text renders as a fallback wordmark so the3  layout still works before assets are uploaded.4{%- endcomment -%}5{%- if section.blocks.size > 0 -%}6  <div class="gpl-logos" style="--gpl-speed: {{ section.settings.speed }}s;">7    <p class="gpl-logos__eyebrow">{{ section.settings.eyebrow | escape }}</p>8    <div class="gpl-logos__mask">9      <div class="gpl-logos__track">10        {%- for i in (1..2) -%}11          {%- for block in section.blocks -%}12            <span class="gpl-logos__item" {{ block.shopify_attributes }} {% if i == 2 %}aria-hidden="true"{% endif %}>13              {%- if block.settings.image != blank -%}14                {{ block.settings.image | image_url: height: 48 | image_tag: loading: 'lazy', class: 'gpl-logos__img', alt: block.settings.name }}15              {%- else -%}16                <span class="gpl-logos__word">{{ block.settings.name | escape }}</span>17              {%- endif -%}18            </span>19          {%- endfor -%}20        {%- endfor -%}21      </div>22    </div>23  </div>24{%- endif -%}25 26{% schema %}27{28  "name": "Logo marquee",29  "settings": [30    { "type": "text", "id": "eyebrow", "label": "Small heading", "default": "As featured in" },31    {32      "type": "range",33      "id": "speed",34      "label": "Seconds per loop",35      "min": 6,36      "max": 40,37      "step": 2,38      "default": 1639    }40  ],41  "blocks": [42    {43      "type": "logo",44      "name": "Logo",45      "settings": [46        { "type": "image_picker", "id": "image", "label": "Logo image" },47        { "type": "text", "id": "name", "label": "Name (fallback text)", "default": "Press name" }48      ]49    }50  ],51  "max_blocks": 14,52  "presets": [{ "name": "Logo marquee", "blocks": [{ "type": "logo" }, { "type": "logo" }, { "type": "logo" }, { "type": "logo" }] }]53}54{% endschema %}55 56{% stylesheet %}57.gpl-logos { padding: 1.5rem 0; text-align: center; }58.gpl-logos__eyebrow { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }59.gpl-logos__mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }60.gpl-logos__track {61  display: inline-flex;62  align-items: center;63  gap: 3rem;64  white-space: nowrap;65  animation: gpl-logos var(--gpl-speed, 16s) linear infinite;66  will-change: transform;67}68.gpl-logos:hover .gpl-logos__track { animation-play-state: paused; }69.gpl-logos__item { display: inline-flex; align-items: center; }70.gpl-logos__img { height: 1.75rem; width: auto; opacity: 0.7; }71.gpl-logos__word { font-size: 1rem; font-weight: 700; opacity: 0.55; letter-spacing: 0.02em; }72@keyframes gpl-logos { to { transform: translateX(-50%); } }73@media (prefers-reduced-motion: reduce) {74  .gpl-logos__track { animation: none; }75}76{% endstylesheet %}77