Free Trust Badges Section for ShopifyNo app. Copy, paste, done.

{%- if section.blocks.size > 0 or request.design_mode -%}
  <div
    class="sf-badges{% if section.settings.layout == 'inline' %} sf-badges--inline{% endif %}"
    style="--sf-badges-cols: {{ section.settings.columns }}; --sf-badges-text: {{ section.settings.text_color }}; --sf-badges-icon: {{ section.settings.icon_color }}; --sf-badges-bg: {{ section.settings.background_color }}; --sf-badges-pt: {{ section.settings.padding_top }}px; --sf-badges-pb: {{ section.settings.padding_bottom }}px;"
  >
    <div class="sf-badges__inner">
      {%- if section.settings.heading != blank -%}
        <h2 class="sf-badges__heading">{{ section.settings.heading | escape }}</h2>
      {%- endif -%}

      {%- if section.blocks.size > 0 -%}
        <ul class="sf-badges__list" role="list">
          {%- for block in section.blocks -%}
            <li class="sf-badges__item" {{ block.shopify_attributes }}>
              {%- unless block.settings.icon == 'none' -%}
                <span class="sf-badges__icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" focusable="false">
                    {%- case block.settings.icon -%}
                      {%- when 'shipping' -%}
                        <path d="M3 6.5h11v9.5H3z"/><path d="M14 10h3.8L21 13.2V16h-7"/><circle cx="7" cy="17.5" r="1.75"/><circle cx="17.5" cy="17.5" r="1.75"/>
                      {%- when 'returns' -%}
                        <path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>
                      {%- when 'secure' -%}
                        <rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7.5a4 4 0 0 1 8 0V11"/>
                      {%- when 'support' -%}
                        <path d="M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z"/>
                      {%- when 'quality' -%}
                        <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/>
                      {%- when 'eco' -%}
                        <path d="M5 20c0-8.5 5-15 15-15 0 10-6.5 15-15 15z"/><path d="M5 20 13 12"/>
                    {%- endcase -%}
                  </svg>
                </span>
              {%- endunless -%}
              <div class="sf-badges__text">
                {%- if block.settings.title != blank -%}
                  <p class="sf-badges__title">{{ block.settings.title | escape }}</p>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <p class="sf-badges__desc">{{ block.settings.text | escape }}</p>
                {%- endif -%}
              </div>
            </li>
          {%- endfor -%}
        </ul>
      {%- else -%}
        <p class="sf-badges__empty">Add badge blocks to show shipping, returns and other guarantees.</p>
      {%- endif -%}
    </div>
  </div>
{%- endif -%}

{% stylesheet %}
.sf-badges { color: var(--sf-badges-text); background: var(--sf-badges-bg); padding: var(--sf-badges-pt) 20px var(--sf-badges-pb); }
.sf-badges__inner { max-width: 1200px; margin: 0 auto; }
.sf-badges__heading { margin: 0 0 32px; text-align: center; font-size: clamp(22px, 17.6px + 1vw, 32px); line-height: 1.2; }
.sf-badges__list { display: grid; grid-template-columns: repeat(var(--sf-badges-cols), minmax(0, 1fr)); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
.sf-badges__item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sf-badges--inline .sf-badges__item { flex-direction: row; align-items: flex-start; text-align: left; }
.sf-badges__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: var(--sf-badges-icon); background: color-mix(in srgb, var(--sf-badges-icon) 10%, transparent); }
.sf-badges__title { margin: 0; font-weight: 600; line-height: 1.3; }
.sf-badges__desc { margin: 4px 0 0; font-size: 0.9375em; line-height: 1.5; opacity: 0.75; }
.sf-badges__empty { margin: 0; padding: 24px; border: 1px dashed currentColor; border-radius: 8px; text-align: center; opacity: 0.7; }
@media (max-width: 749px) {
  .sf-badges__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-badges--inline .sf-badges__list { grid-template-columns: 1fr; }
}
{% endstylesheet %}

{% schema %}
{
  "name": "SF trust badges",
  "tag": "section",
  "class": "sf-badges-section",
  "max_blocks": 8,
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "stacked", "label": "Icon above text" },
        { "value": "inline", "label": "Icon beside text" }
      ],
      "default": "stacked"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 4, "step": 1, "default": 4 },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#121212" },
    { "type": "color", "id": "icon_color", "label": "Icon", "default": "#121212" },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#ffffff" },
    { "type": "header", "content": "Spacing" },
    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 40 }
  ],
  "blocks": [
    {
      "type": "badge",
      "name": "Badge",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            { "value": "shipping", "label": "Shipping" },
            { "value": "returns", "label": "Returns" },
            { "value": "secure", "label": "Secure checkout" },
            { "value": "support", "label": "Support" },
            { "value": "quality", "label": "Quality" },
            { "value": "eco", "label": "Eco" },
            { "value": "none", "label": "None" }
          ],
          "default": "shipping"
        },
        { "type": "text", "id": "title", "label": "Title", "default": "Free shipping" },
        { "type": "text", "id": "text", "label": "Text", "default": "On orders over $50" }
      ]
    }
  ],
  "presets": [
    {
      "name": "SF trust badges",
      "blocks": [
        { "type": "badge", "settings": { "icon": "shipping", "title": "Free shipping", "text": "On orders over $50" } },
        { "type": "badge", "settings": { "icon": "returns", "title": "30-day returns", "text": "Hassle-free refunds" } },
        { "type": "badge", "settings": { "icon": "secure", "title": "Secure checkout", "text": "Encrypted payments" } },
        { "type": "badge", "settings": { "icon": "support", "title": "Real support", "text": "Replies within one business day" } }
      ]
    }
  ]
}
{% endschema %}