You are on Supply, which is a vintage theme, so there is no marquee block built in.
Add a custom section.
Create the section
- Online Store > Themes. Next to Supply, click the … menu > Edit code.
- In the left list click the sections folder, then the New file icon. Name it
testimonial-marquee and keep the type as Liquid.
- Delete the starter code, paste this in, then Save:
{%- assign speed = section.settings.speed | default: 40 -%}
<div class="tm-wrap" style="
background: {{ section.settings.bg_color }};
padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
{%- if section.settings.heading != blank -%}
<h2 class="tm-heading" style="color: {{ section.settings.heading_color }};">
{{ section.settings.heading }}
</h2>
{%- endif -%}
<div class="tm-marquee" id="tm-{{ section.id }}">
<div class="tm-track">
{%- for i in (1..2) -%}
{%- for block in section.blocks -%}
<div class="tm-card" {{ block.shopify_attributes }} style="
width: {{ section.settings.card_width }}px;
background: {{ section.settings.card_color }};
color: {{ section.settings.text_color }};">
<div class="tm-stars" aria-hidden="true">★★★★★</div>
<p class="tm-quote">{{ block.settings.quote }}</p>
{%- if block.settings.name != blank -%}
<p class="tm-name">{{ block.settings.name }}</p>
{%- endif -%}
</div>
{%- endfor -%}
{%- endfor -%}
</div>
</div>
</div>
<style>
#tm-{{ section.id }} { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#tm-{{ section.id }} .tm-track { display: flex; width: max-content; gap: 20px; animation: tm-scroll-{{ section.id }} {{ speed }}s linear infinite; }
@keyframes tm-scroll-{{ section.id }} { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tm-heading { text-align: center; margin: 0 0 26px; font-size: 28px; letter-spacing: .5px; }
#tm-{{ section.id }} .tm-card { flex: 0 0 auto; box-sizing: border-box; padding: 26px 24px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.08); text-align: left; }
#tm-{{ section.id }} .tm-stars { color: #f5b301; font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
#tm-{{ section.id }} .tm-quote { font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
#tm-{{ section.id }} .tm-name { font-size: 14px; font-weight: 700; margin: 0; opacity: .85; }
</style>
{% schema %}
{
"name": "Testimonials marquee",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "What our customers say" },
{ "type": "range", "id": "speed", "min": 15, "max": 90, "step": 5, "unit": "s", "label": "Scroll speed (lower = faster)", "default": 40 },
{ "type": "range", "id": "card_width", "min": 240, "max": 480, "step": 10, "unit": "px", "label": "Card width", "default": 320 },
{ "type": "header", "content": "Colors" },
{ "type": "color", "id": "bg_color", "label": "Section background", "default": "#0f1115" },
{ "type": "color", "id": "heading_color", "label": "Heading text", "default": "#ffffff" },
{ "type": "color", "id": "card_color", "label": "Card background", "default": "#ffffff" },
{ "type": "color", "id": "text_color", "label": "Card text", "default": "#1a1a1a" },
{ "type": "header", "content": "Spacing" },
{ "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Padding top", "default": 48 },
{ "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Padding bottom", "default": 48 }
],
"blocks": [
{
"type": "testimonial",
"name": "Testimonial",
"settings": [
{ "type": "textarea", "id": "quote", "label": "Quote", "default": "Fantastic service and the radio works perfectly." },
{ "type": "text", "id": "name", "label": "Customer name", "default": "Happy customer" }
]
}
],
"presets": [
{ "name": "Testimonials marquee",
"blocks": [
{ "type": "testimonial" }, { "type": "testimonial" }, { "type": "testimonial" },
{ "type": "testimonial" }, { "type": "testimonial" }
]
}
]
}
{% endschema %}
Add it to your home page
- Go back and click Customize.
- On the home page click Add section, then choose Testimonials marquee.
Add your reviews
- Click each Testimonial to set the quote and the customer name.
- Use Add Testimonial for more. The 5 stars show on every card automatically.
Style and speed
- In the section settings set the scroll speed, card width, and colours.
- Lower speed number = faster. It scrolls non-stop with no pausing, and loops seamlessly.
- Save.
On matching that product description layout: that is a separate product-page job (a custom section or product metafields on your product template), not the same as this marquee.
If you would pull in real verified star reviews automatically, apps like Judge.me, Loox, or Okendo do that and can feed a carousel.
Regards,
Ploqo
