UGC Video Spotlight

<section class="sl-ugc-video-spotlight" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1100px;margin:0 auto;display:grid;gap:clamp(1.25rem,4vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;">
    {%- assign sl_ugc_src = section.settings.video_url | default: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' -%}
    {%- assign sl_ugc_poster = section.settings.poster | image_url: width: 720 | default: 'https://picsum.photos/seed/ugc-spotlight/720/1280' -%}
    <figure style="margin:0;position:relative;border-radius:1rem;overflow:hidden;background:#000;aspect-ratio:9/16;max-width:360px;width:100%;justify-self:center;">
      <video controls playsinline preload="metadata" poster="{{ sl_ugc_poster }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
        <source src="{{ sl_ugc_src }}" type="video/mp4" />
        <img src="{{ sl_ugc_poster }}" alt="{{ section.settings.poster_alt | default: 'Customer story video' }}" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />
      </video>
    </figure>
    <div style="display:flex;flex-direction:column;gap:.85rem;">
      {%- assign rating = section.settings.rating | default: 5 -%}
      <div role="img" aria-label="Rated {{ rating }} out of 5" style="display:inline-flex;gap:.15rem;color:var(--sl-accent,#0a5cff);font-size:1.15rem;line-height:1;">
        {%- for i in (1..5) -%}{%- if i <= rating -%}<span>&#9733;</span>{%- else -%}<span style="opacity:.25;">&#9733;</span>{%- endif -%}{%- endfor -%}
      </div>
      {%- 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:0;font-size:clamp(1.35rem,2.75vw,2rem);line-height:1.25;">{{ section.settings.heading }}</h2>
      <blockquote style="margin:0;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6;font-style:italic;opacity:.95;">&ldquo;{{ section.settings.quote }}&rdquo;</blockquote>
      <p style="margin:0;display:flex;align-items:center;gap:.5rem;font-size:.9rem;">
        <strong>{{ section.settings.customer_name | default: 'Verified customer' }}</strong>
        <span style="display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.7rem;border-radius:999px;font-weight:700;letter-spacing:.05em;">
          <span aria-hidden="true">&#10003;</span> Verified purchase
        </span>
      </p>
      {%- if section.settings.cta_text != blank -%}
        <a href="{{ section.settings.cta_link | default: '#' }}" style="align-self:flex-start;margin-top:.25rem;padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-weight:700;">{{ section.settings.cta_text }}</a>
      {%- endif -%}
    </div>
  </div>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"Review","reviewRating":{"@type":"Rating","ratingValue":"{{ section.settings.rating | default: 5 }}","bestRating":"5"},"author":{"@type":"Person","name":{{ section.settings.customer_name | default: 'Verified customer' | json }}},"reviewBody":{{ section.settings.quote | json }}}</script>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":{{ section.settings.heading | json }},"description":{{ section.settings.quote | json }},"thumbnailUrl":{{ sl_ugc_poster | json }},"uploadDate":{{ section.settings.upload_date | default: '2025-01-01' | json }},"contentUrl":{{ sl_ugc_src | json }}}</script>
</section>
{% schema %}
{
  "name": "UGC Video Spotlight",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Real stories, real regrowth" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "\"I saw results in four weeks.\"" },
    { "type": "textarea", "id": "quote", "label": "Quote", "default": "I was skeptical, but my hair has never felt healthier. The difference is visible in every photo." },
    { "type": "text", "id": "customer_name", "label": "Customer name", "default": "Sarah M." },
    { "type": "range", "id": "rating", "label": "Rating (1-5)", "min": 1, "max": 5, "step": 1, "default": 5 },
    { "type": "url", "id": "video_url", "label": "Video URL (.mp4)" },
    { "type": "image_picker", "id": "poster", "label": "Poster image" },
    { "type": "text", "id": "poster_alt", "label": "Poster alt text", "default": "Customer story video" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Shop the product" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "text", "id": "upload_date", "label": "Upload date (YYYY-MM-DD)", "default": "2025-01-01" }
  ],
  "presets": [{ "name": "UGC Video Spotlight" }]
}
{% endschema %}