Customer Photo Reviews

<section class="sl-cust-photo-reviews" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 1.75rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.25rem 0 0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
    </header>
    <div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;">
      {%- for block in section.blocks -%}
        {%- assign product = all_products[block.settings.product] -%}
        <article style="scroll-snap-align:start;background:{{ block.settings.card_color | default: 'transparent' }};border:1px solid currentColor;padding:clamp(1rem,2.5vw,1.5rem);display:flex;flex-direction:column;gap:.75rem;clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);border-radius:.375rem;" {{ block.shopify_attributes }}>
          <header style="display:flex;align-items:center;gap:.75rem;">
            <img src="{{ block.settings.customer_photo | image_url: width: 120 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/120/120' }}" alt="{{ block.settings.customer_name | default: 'Customer' }} photo" loading="lazy" style="width:3rem;height:3rem;border-radius:50%;object-fit:cover;flex:0 0 auto;" />
            <div style="display:flex;flex-direction:column;gap:.15rem;min-width:0;">
              <strong style="font-size:.95rem;">{{ block.settings.customer_name | default: 'Customer' }}</strong>
              {%- assign rating = block.settings.rating | default: 5 -%}
              <span role="img" aria-label="Rated {{ rating }} out of 5" style="color:var(--sl-accent,#0a5cff);font-size:.9rem;line-height:1;">
                {%- for i in (1..5) -%}{%- if i <= rating -%}&#9733;{%- else -%}<span style="opacity:.25;">&#9733;</span>{%- endif -%}{%- endfor -%}
              </span>
            </div>
          </header>
          <blockquote style="margin:0;font-size:.95rem;line-height:1.55;flex:1;">&ldquo;{{ block.settings.quote }}&rdquo;</blockquote>
          <footer style="display:flex;align-items:center;gap:.6rem;padding-top:.5rem;border-top:1px dashed currentColor;">
            <img src="{{ product.featured_image | image_url: width: 120 | default: block.settings.product_image | image_url: width: 120 | default: 'https://picsum.photos/seed/' | append: block.id | append: 'p/120/120' }}" alt="{{ product.title | default: block.settings.product_title }}" loading="lazy" style="width:2.5rem;height:2.5rem;border-radius:.25rem;object-fit:cover;flex:0 0 auto;" />
            <div style="display:flex;flex-direction:column;gap:.1rem;min-width:0;font-size:.8rem;">
              <span style="font-weight:600;">{{ product.title | default: block.settings.product_title | default: 'Featured product' }}</span>
              {%- if block.settings.purchase_date != blank -%}
                <time datetime="{{ block.settings.purchase_date }}" style="opacity:.7;">Purchased {{ block.settings.purchase_date | date: '%b %Y' }}</time>
              {%- endif -%}
            </div>
          </footer>
          <script type="application/ld+json">{"@context":"https://schema.org","@type":"Review","reviewRating":{"@type":"Rating","ratingValue":"{{ block.settings.rating | default: 5 }}","bestRating":"5"},"author":{"@type":"Person","name":{{ block.settings.customer_name | default: 'Customer' | json }}},"reviewBody":{{ block.settings.quote | json }},"itemReviewed":{"@type":"Product","name":{{ product.title | default: block.settings.product_title | default: 'Featured product' | json }}}}</script>
        </article>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Customer Photo Reviews",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Verified reviews" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "What our customers say" }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        { "type": "image_picker", "id": "customer_photo", "label": "Customer photo" },
        { "type": "text", "id": "customer_name", "label": "Customer name", "default": "Alex R." },
        { "type": "range", "id": "rating", "label": "Rating (1-5)", "min": 1, "max": 5, "step": 1, "default": 5 },
        { "type": "textarea", "id": "quote", "label": "Quote", "default": "Exceeded my expectations. Fast shipping and lovely packaging, too." },
        { "type": "product", "id": "product", "label": "Product" },
        { "type": "image_picker", "id": "product_image", "label": "Product image (fallback)" },
        { "type": "text", "id": "product_title", "label": "Product title (fallback)", "default": "Featured product" },
        { "type": "text", "id": "purchase_date", "label": "Purchase date (YYYY-MM-DD)", "default": "2025-10-12" },
        { "type": "color", "id": "card_color", "label": "Card background" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customer Photo Reviews",
      "blocks": [
        { "type": "review" }, { "type": "review" }, { "type": "review" }
      ]
    }
  ]
}
{% endschema %}