Verified Reviews Grid

<section class="sl-verified-reviews" style="padding:clamp(48px,8vw,96px) 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:1280px;margin:0 auto;">
    <header style="text-align:center;margin:0 auto 2.5rem;max-width:720px;color:inherit;font-family:inherit;">
      <p role="img" aria-label="5 out of 5 stars" style="margin:0 0 .75rem;font-size:clamp(1.25rem,2.25vw,1.5rem);letter-spacing:.2em;color:var(--sl-accent,#0a5cff);line-height:1;">&#9733;&#9733;&#9733;&#9733;&#9733;</p>
      <h2 style="margin:0 0 .75rem;font-size:clamp(2rem,5vw,3.25rem);line-height:1.05;letter-spacing:-.015em;font-family:inherit;font-weight:800;">{{ section.settings.heading }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.75;line-height:1.55;font-size:clamp(1rem,1.8vw,1.1rem);">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));">
      {%- for block in section.blocks -%}
        {%- assign rating = block.settings.rating | default: 5 -%}
        <article itemscope itemtype="https://schema.org/Review" style="display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.25rem,2.5vw,1.75rem);border:1px solid currentColor;border-radius:.75rem;background:{{ block.settings.card_color | default: 'transparent' }};color:inherit;font-family:inherit;" {{ block.shopify_attributes }}>
          <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" style="line-height:1;">
            <meta itemprop="ratingValue" content="{{ rating }}" />
            <meta itemprop="bestRating" content="5" />
            <span role="img" aria-label="Rated {{ rating }} out of 5" style="color:var(--sl-accent,#0a5cff);font-size:1rem;letter-spacing:.15em;">
              {%- for i in (1..5) -%}{%- if i <= rating -%}&#9733;{%- else -%}<span style="opacity:.25;">&#9733;</span>{%- endif -%}{%- endfor -%}
            </span>
          </div>
          {%- if block.settings.title != blank -%}
            <h3 itemprop="name" style="margin:0;font-size:1.05rem;font-weight:700;line-height:1.3;font-family:inherit;">{{ block.settings.title }}</h3>
          {%- endif -%}
          {%- if block.settings.body != blank -%}
            <p itemprop="reviewBody" style="margin:0;opacity:.85;line-height:1.6;font-size:.95rem;flex:1;">{{ block.settings.body }}</p>
          {%- endif -%}
          <footer style="display:flex;align-items:center;gap:.5rem;padding-top:.75rem;border-top:1px dashed currentColor;margin-top:auto;">
            <span itemprop="author" itemscope itemtype="https://schema.org/Person" style="display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;">
              <span itemprop="name">{{ block.settings.customer_name | default: 'Verified Customer' }}</span>
              <span role="img" aria-label="Verified" title="Verified buyer" style="display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:50%;font-size:.7rem;font-weight:700;line-height:1;">&#10003;</span>
            </span>
          </footer>
          {%- if block.settings.product_name != blank -%}
            <p itemprop="itemReviewed" itemscope itemtype="https://schema.org/Product" style="margin:0;opacity:.55;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;">
              <span itemprop="name">{{ block.settings.product_name }}</span>
            </p>
          {%- endif -%}
        </article>
      {%- endfor -%}
    </div>
  </div>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": {{ section.settings.product_name | default: 'Featured product' | json }},
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "{{ section.settings.aggregate_rating | default: '4.9' }}",
      "reviewCount": "{{ section.settings.review_count | default: '1247' }}",
      "bestRating": "5"
    },
    "review": [
      {%- for block in section.blocks -%}
      {
        "@type": "Review",
        "reviewRating": { "@type": "Rating", "ratingValue": "{{ block.settings.rating | default: 5 }}", "bestRating": "5" },
        "author": { "@type": "Person", "name": {{ block.settings.customer_name | default: 'Verified Customer' | json }} },
        "name": {{ block.settings.title | default: 'Review' | json }},
        "reviewBody": {{ block.settings.body | default: '' | json }},
        "itemReviewed": { "@type": "Product", "name": {{ block.settings.product_name | default: section.settings.product_name | default: 'Featured product' | json }} }
      }{%- unless forloop.last -%},{%- endunless -%}
      {%- endfor -%}
    ]
  }
  </script>
</section>
{% schema %}
{
  "name": "Verified Reviews Grid",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Real results, real reviews." },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Hundreds of thousands of happy customers. Here's what a few of them had to say." },
    { "type": "text", "id": "product_name", "label": "Default product name (for JSON-LD)", "default": "Mute Nasal Dilator" },
    { "type": "text", "id": "aggregate_rating", "label": "Aggregate rating", "default": "4.9" },
    { "type": "text", "id": "review_count", "label": "Total review count", "default": "1247" },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        { "type": "text", "id": "title", "label": "Review title", "default": "Life-changing sleep" },
        { "type": "textarea", "id": "body", "label": "Review body", "default": "I have tried everything under the sun for snoring. Nothing worked until this. Two nights in and my partner is finally sleeping through the night." },
        { "type": "text", "id": "customer_name", "label": "Customer name", "default": "Sarah M." },
        { "type": "text", "id": "product_name", "label": "Product name", "default": "MUTE NASAL DILATOR" },
        { "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": "Verified Reviews Grid",
      "blocks": [
        { "type": "review", "settings": { "title": "Life-changing sleep", "body": "I have tried everything for snoring. Nothing worked until this. Two nights in and my partner is finally sleeping through the night.", "customer_name": "Sarah M.", "product_name": "MUTE NASAL DILATOR", "rating": 5 } },
        { "type": "review", "settings": { "title": "Finally, deep breaths", "body": "I run 10km every morning. Switching to nasal breathing felt impossible until I tried Turbine. My pace has dropped and I recover faster.", "customer_name": "James T.", "product_name": "TURBINE PERFORMANCE", "rating": 5 } },
        { "type": "review", "settings": { "title": "Travels well, works great", "body": "I travel weekly for work. The to-go pack fits in my wallet and has saved me from countless bad hotel-room nights. Worth every penny.", "customer_name": "Priya K.", "product_name": "MUTE TO GO PACK", "rating": 5 } },
        { "type": "review", "settings": { "title": "My wife is happy again", "body": "She had not had a full night's sleep in three years. After two weeks she told me I was quieter than the dog. Buy this, seriously.", "customer_name": "Daniel R.", "product_name": "MUTE NASAL DILATOR", "rating": 5 } }
      ]
    }
  ]
}
{% endschema %}