USP Bar

<section class="sl-usp" aria-label="{{ section.settings.heading | default: 'Why shop with us' }}" style="padding:clamp(14px,2.25vw,22px) 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};border-top:1px solid currentColor;border-bottom:1px solid currentColor;">
  <ul style="max-width:1200px;margin:0 auto;padding:0;list-style:none;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:center;text-align:center;">
    {%- for block in section.blocks -%}
      <li style="display:flex;{{ section.settings.layout | default: 'flex-direction:column;' }};align-items:center;justify-content:center;gap:.5rem;padding:.3rem;" {{ block.shopify_attributes }}>
        <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:rgba(10,92,255,.1);color:var(--sl-accent,#0a5cff);font-size:1.05rem;line-height:1;flex:0 0 auto;">{{ block.settings.icon | default: '✓' }}</span>
        <div style="display:flex;flex-direction:column;gap:.1rem;min-width:0;">
          <span style="font-size:.9rem;font-weight:700;line-height:1.25;">{{ block.settings.title }}</span>
          {%- if block.settings.subtitle != blank -%}
            <span style="font-size:.75rem;opacity:.75;line-height:1.3;">{{ block.settings.subtitle }}</span>
          {%- endif -%}
        </div>
      </li>
    {%- endfor -%}
  </ul>
</section>
{% schema %}
{
  "name": "USP Bar",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading (screen-reader)", "default": "Why shop with us" },
    { "type": "select", "id": "layout", "label": "Layout", "options": [ { "value": "flex-direction:column;", "label": "Stacked" }, { "value": "flex-direction:row;", "label": "Inline" } ], "default": "flex-direction:row;" },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "blocks": [
    {
      "type": "usp",
      "name": "Selling point",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji or symbol)", "default": "✓" },
        { "type": "text", "id": "title", "label": "Title", "default": "Free shipping" },
        { "type": "text", "id": "subtitle", "label": "Subtitle", "default": "On orders over $60" }
      ]
    }
  ],
  "presets": [
    {
      "name": "USP Bar",
      "blocks": [
        { "type": "usp", "settings": { "icon": "🚚", "title": "Free shipping", "subtitle": "On orders over $60" } },
        { "type": "usp", "settings": { "icon": "↩", "title": "Easy returns", "subtitle": "30-day, no questions" } },
        { "type": "usp", "settings": { "icon": "🔒", "title": "Secure checkout", "subtitle": "SSL encrypted" } },
        { "type": "usp", "settings": { "icon": "✨", "title": "1M+ happy buyers", "subtitle": "Rated 4.9 / 5" } }
      ]
    }
  ]
}
{% endschema %}