Expert Review Card

<article class="sl-expert-review" itemscope itemtype="https://schema.org/Review" style="padding:clamp(2rem,5vw,3rem);color:inherit;font-family:inherit;border:1px solid currentColor;border-radius:1rem;max-width:820px;margin:clamp(32px,6vw,64px) auto;background:{{ section.settings.bg_color | default: 'transparent' }};display:grid;grid-template-columns:1fr;gap:clamp(1rem,3vw,2rem);">
  <style>@media (min-width:640px){.sl-expert-review{grid-template-columns:auto 1fr !important;align-items:center;}}</style>
  <figure style="margin:0;display:flex;flex-direction:column;align-items:center;gap:.65rem;flex:0 0 auto;">
    <img src="{{ section.settings.avatar | image_url: width: 240 | default: 'https://picsum.photos/seed/expert/240/240' }}" alt="{{ section.settings.avatar_alt | default: section.settings.author_name }}" loading="lazy" style="width:clamp(96px,14vw,132px);height:clamp(96px,14vw,132px);border-radius:50%;object-fit:cover;display:block;border:3px solid var(--sl-accent,#0a5cff);" />
    {%- if section.settings.publication_logo != blank -%}
      <img src="{{ section.settings.publication_logo | image_url: width: 200 }}" alt="{{ section.settings.publication_name }}" loading="lazy" style="max-height:1.75rem;width:auto;opacity:.75;" />
    {%- elsif section.settings.publication_name != blank -%}
      <span style="font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65;font-weight:700;">{{ section.settings.publication_name }}</span>
    {%- endif -%}
  </figure>
  <div style="display:flex;flex-direction:column;gap:.75rem;">
    {%- assign rating = section.settings.rating | default: 5 -%}
    <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:1.1rem;letter-spacing:.18em;">
        {%- for i in (1..5) -%}{%- if i <= rating -%}&#9733;{%- else -%}<span style="opacity:.25;">&#9733;</span>{%- endif -%}{%- endfor -%}
      </span>
    </div>
    <blockquote itemprop="reviewBody" style="margin:0;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.45;font-style:italic;">&ldquo;{{ section.settings.quote }}&rdquo;</blockquote>
    <footer style="margin-top:.5rem;display:flex;flex-direction:column;gap:.15rem;">
      <strong itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">{{ section.settings.author_name }}</span></strong>
      {%- if section.settings.author_title != blank -%}
        <span style="font-size:.85rem;opacity:.75;">{{ section.settings.author_title }}</span>
      {%- endif -%}
    </footer>
  </div>
  <meta itemprop="itemReviewed" content="{{ section.settings.product_name | default: shop.name }}" />
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "{{ rating }}", "bestRating": "5" },
    "author": { "@type": "Person", "name": {{ section.settings.author_name | json }}{% if section.settings.author_title != blank %}, "jobTitle": {{ section.settings.author_title | json }}{% endif %} },
    "reviewBody": {{ section.settings.quote | json }},
    "itemReviewed": { "@type": "Product", "name": {{ section.settings.product_name | default: shop.name | json }} }{% if section.settings.publication_name != blank %},
    "publisher": { "@type": "Organization", "name": {{ section.settings.publication_name | json }} }{% endif %}
  }
  </script>
</article>
{% schema %}
{
  "name": "Expert Review Card",
  "settings": [
    { "type": "image_picker", "id": "avatar", "label": "Portrait photo" },
    { "type": "text", "id": "avatar_alt", "label": "Portrait alt text", "default": "Expert reviewer portrait" },
    { "type": "textarea", "id": "quote", "label": "Quote", "default": "This is the breakthrough product every clinician has been waiting for. Genuinely life-changing results in my patients." },
    { "type": "text", "id": "author_name", "label": "Author name", "default": "Dr. Alisha Patel, MD" },
    { "type": "text", "id": "author_title", "label": "Author title/credentials", "default": "Board-certified Sleep Specialist" },
    { "type": "range", "id": "rating", "label": "Rating (1-5)", "min": 1, "max": 5, "step": 1, "default": 5 },
    { "type": "image_picker", "id": "publication_logo", "label": "Publication logo" },
    { "type": "text", "id": "publication_name", "label": "Publication name", "default": "The Wall Street Journal" },
    { "type": "text", "id": "product_name", "label": "Reviewed product name", "default": "Featured product" },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "presets": [{ "name": "Expert Review Card" }]
}
{% endschema %}