Customer Wall

<section class="sl-customer-wall" style="padding:clamp(48px,7vw,80px) 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 auto 2rem;max-width:640px;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.4rem 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading | default: 'What customers are saying' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div style="column-count:1;column-gap:1rem;">
      <style>@media (min-width:640px){.sl-customer-wall>div{column-count:2;}}@media (min-width:1024px){.sl-customer-wall>div{column-count:3;}}</style>
      {%- for block in section.blocks -%}
        {%- assign rating = block.settings.rating | default: 5 -%}
        {%- assign initials = block.settings.name | default: 'AK' | split: ' ' | map: 'first' -%}
        <figure style="break-inside:avoid;margin:0 0 1rem;padding:1.15rem;border:1px solid currentColor;border-radius:.75rem;display:flex;flex-direction:column;gap:.6rem;background:{{ block.settings.card_color | default: 'transparent' }};" {{ block.shopify_attributes }}>
          <span role="img" aria-label="Rated {{ rating }} out of 5" style="color:var(--sl-accent,#0a5cff);letter-spacing:.14em;font-size:.95rem;line-height:1;">
            {%- for i in (1..5) -%}{%- if i <= rating -%}&#9733;{%- else -%}<span style="opacity:.25;">&#9733;</span>{%- endif -%}{%- endfor -%}
          </span>
          <blockquote style="margin:0;font-size:clamp(.95rem,1.4vw,1rem);line-height:1.55;">{{ block.settings.quote }}</blockquote>
          <figcaption style="display:flex;align-items:center;gap:.6rem;margin-top:.25rem;">
            <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.75rem;font-weight:700;">{{ block.settings.name | default: 'AK' | truncate: 2, '' | upcase }}</span>
            <span style="font-size:.85rem;"><strong>{{ block.settings.name | default: 'Anonymous' }}</strong>{%- if block.settings.location != blank -%}<span style="opacity:.65;"> · {{ block.settings.location }}</span>{%- endif -%}</span>
          </figcaption>
        </figure>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Customer Wall",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Real reviews" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "What customers are saying" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Over 10,000 happy customers. Here are just a few of their stories." },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "blocks": [
    {
      "type": "quote",
      "name": "Quote",
      "settings": [
        { "type": "textarea", "id": "quote", "label": "Quote", "default": "Best purchase I've made all year. Fits perfectly and the quality is incredible." },
        { "type": "text", "id": "name", "label": "Customer name", "default": "Sarah K." },
        { "type": "text", "id": "location", "label": "Location", "default": "Seattle, WA" },
        { "type": "range", "id": "rating", "label": "Rating (1-5)", "min": 1, "max": 5, "step": 1, "default": 5 },
        { "type": "color", "id": "card_color", "label": "Card background" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customer Wall",
      "blocks": [
        { "type": "quote", "settings": { "quote": "Best purchase I've made all year. Fits perfectly and the quality is incredible.", "name": "Sarah K.", "location": "Seattle, WA", "rating": 5 } },
        { "type": "quote", "settings": { "quote": "Finally a brand that delivers on its promises. Shipping was fast and packaging was gorgeous.", "name": "Marcus T.", "location": "Austin, TX", "rating": 5 } },
        { "type": "quote", "settings": { "quote": "Honestly better than I expected from the photos. Will absolutely order again.", "name": "Priya R.", "location": "Brooklyn, NY", "rating": 5 } },
        { "type": "quote", "settings": { "quote": "Customer service went above and beyond. Lost in the mail and they replaced it free.", "name": "James D.", "location": "London, UK", "rating": 5 } },
        { "type": "quote", "settings": { "quote": "Feels premium — the details matter. Already bought one for my sister.", "name": "Elena M.", "location": "Madrid, ES", "rating": 5 } },
        { "type": "quote", "settings": { "quote": "Minor issue with fit but they fixed it overnight. Customers for life.", "name": "Tom H.", "location": "Toronto, CA", "rating": 4 } }
      ]
    }
  ]
}
{% endschema %}