Premium Trust Badges

Block· Product page

Pill-shaped trust badges in an accent color with inline icons — compact and high-contrast.

ProductSocial ProofPremium
Edit
Copied 0 times
Preview
Accent
Section code
<section class="sl-premium-trust" style="padding:clamp(16px,3vw,28px) 1rem;color:inherit;font-family:inherit;">
  <h2 class="visually-hidden" style="position:absolute;left:-9999px;">{{ section.settings.heading | default: 'Trust badges' }}</h2>
  <ul style="max-width:1100px;margin:0 auto;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;">
    {%- for block in section.blocks -%}
      <li style="display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;background:var(--sl-accent,#f97316);color:#fff;border-radius:999px;font-size:.85rem;font-weight:700;" {{ block.shopify_attributes }}>
        <span aria-hidden="true" style="font-size:1.05rem;line-height:1;">{{ block.settings.icon | default: '✓' }}</span>
        <span>{{ block.settings.label }}</span>
      </li>
    {%- endfor -%}
  </ul>
</section>
{% schema %}
{
  "name": "Premium Trust Badges",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading (screen-reader)", "default": "Trust badges" }
  ],
  "blocks": [
    {
      "type": "badge",
      "name": "Badge",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji/symbol)", "default": "✓" },
        { "type": "text", "id": "label", "label": "Label", "default": "Free shipping" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Premium Trust Badges",
      "blocks": [
        { "type": "badge" }, { "type": "badge" }, { "type": "badge" }, { "type": "badge" }
      ]
    }
  ]
}
{% endschema %}

Internal notesTeam only

Freeform markdown notes visible only to signed-in team members. Separate from the public description.