Best Sellers Rail

<nav class="sl-bestsellers" aria-label="Best sellers" style="padding:clamp(32px,6vw,64px) 0;color:inherit;font-family:inherit;">
  <div style="display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:0 1rem;margin:0 0 1.25rem;max-width:1200px;margin-inline:auto;">
    <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
    {%- if section.settings.view_all_link != blank -%}
      <a href="{{ section.settings.view_all_link }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;font-size:.9rem;border-bottom:1px solid var(--sl-accent,#0a5cff);">{{ section.settings.view_all_text | default: 'View all' }}</a>
    {%- endif -%}
  </div>
  <div style="display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem 1rem 1rem;">
    {%- assign coll = collections[section.settings.collection] -%}
    {%- assign limit = section.settings.number_to_show | default: 8 -%}
    {%- if coll.products.size > 0 -%}
      {%- for product in coll.products limit: limit -%}
        <article style="flex:0 0 clamp(200px,60vw,260px);scroll-snap-align:start;border:1px solid currentColor;border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;">
          <a href="{{ product.url }}" style="color:inherit;text-decoration:none;display:block;">
            <img src="{{ product.featured_image | image_url: width: 520 | default: 'https://picsum.photos/seed/bs/520/520' }}" alt="{{ product.featured_image.alt | default: product.title }}" loading="lazy" style="width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;" />
            <div style="padding:.75rem;">
              <h3 style="margin:0 0 .25rem;font-size:1rem;">{{ product.title }}</h3>
              <p style="margin:0;font-weight:600;color:var(--sl-accent,#0a5cff);">{{ product.price | money }}</p>
            </div>
          </a>
        </article>
      {%- endfor -%}
    {%- else -%}
      {%- for i in (1..4) -%}
        <article style="flex:0 0 clamp(200px,60vw,260px);scroll-snap-align:start;border:1px solid currentColor;border-radius:.5rem;overflow:hidden;">
          <img src="https://picsum.photos/seed/bs{{ i }}/520/520" alt="{{ section.settings.placeholder_alt | default: 'Product placeholder' }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;display:block;" />
          <div style="padding:.75rem;">
            <h3 style="margin:0 0 .25rem;font-size:1rem;">Product {{ i }}</h3>
            <p style="margin:0;font-weight:600;color:var(--sl-accent,#0a5cff);">$29.00</p>
          </div>
        </article>
      {%- endfor -%}
    {%- endif -%}
  </div>
</nav>
{% schema %}
{
  "name": "Best Sellers Rail",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Best sellers" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "range", "id": "number_to_show", "label": "Products to show", "min": 4, "max": 12, "step": 1, "default": 8 },
    { "type": "text", "id": "view_all_text", "label": "View all text", "default": "View all" },
    { "type": "url", "id": "view_all_link", "label": "View all link" },
    { "type": "text", "id": "placeholder_alt", "label": "Alt text (placeholder)", "default": "Product placeholder" }
  ],
  "presets": [{ "name": "Best Sellers Rail" }]
}
{% endschema %}