Related Products

<section class="sl-related" style="padding:clamp(40px,6vw,72px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1400px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 1.75rem;max-width:640px;margin-inline:auto;">
      {%- 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:.35rem 0 .5rem;font-size:clamp(1.5rem,3vw,2rem);font-family:inherit;">{{ section.settings.heading | default: 'You may also like' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.75;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:clamp(.75rem,2vw,1.25rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));">
      {%- if recommendations.products.size > 0 -%}
        {%- for product in recommendations.products limit: 4 -%}
          <article style="display:flex;flex-direction:column;gap:.4rem;">
            <a href="{{ product.url }}" style="color:inherit;text-decoration:none;">
              <img src="{{ product.featured_image | image_url: width: 600 | default: 'https://picsum.photos/seed/rel/600/600' }}" alt="{{ product.featured_image.alt | default: product.title }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.5rem;display:block;" />
            </a>
            <h3 style="margin:0;font-size:.95rem;font-weight:600;line-height:1.3;"><a href="{{ product.url }}" style="color:inherit;text-decoration:none;">{{ product.title }}</a></h3>
            <p style="margin:0;color:var(--sl-accent,#0a5cff);font-weight:700;font-size:.95rem;">{{ product.price | money }}</p>
          </article>
        {%- endfor -%}
      {%- else -%}
        {%- for i in (1..4) -%}
          <article style="display:flex;flex-direction:column;gap:.4rem;">
            <img src="https://picsum.photos/seed/rel{{ i }}/600/600" alt="{{ section.settings.placeholder_alt | default: 'Related product placeholder' }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.5rem;display:block;" />
            <h3 style="margin:0;font-size:.95rem;font-weight:600;line-height:1.3;">Related product {{ i }}</h3>
            <p style="margin:0;color:var(--sl-accent,#0a5cff);font-weight:700;font-size:.95rem;">$29.00</p>
          </article>
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Related Products",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Complete the look" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "You may also like" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Hand-picked pairings chosen by our team." },
    { "type": "text", "id": "placeholder_alt", "label": "Alt text (placeholder)", "default": "Related product placeholder" }
  ],
  "presets": [{ "name": "Related Products" }]
}
{% endschema %}