Loading
Copy-paste a theme-editor section for trust & social proof - A responsive icon grid for shipping, returns and authenticity claims, driven by section blocks. Adapted from a real storefront build.
{%- if section.blocks.size > 0 -%} <ul class="gpl-trustgrid gpl-trustgrid--{{ section.settings.columns }}"> {%- for block in section.blocks -%} <li class="gpl-trustgrid__card" {{ block.shopify_attributes }}> <span class="gpl-trustgrid__icon gpl-trustgrid__icon--{{ block.settings.icon }}" aria-hidden="true"> {%- case block.settings.icon -%} {%- when 'truck' -%} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="1.5"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg> {%- when 'refresh' -%} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> {%- when 'award' -%} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.5 12.9 17 22l-5-3-5 3 1.5-9.1"/></svg> {%- else -%} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg> {%- endcase -%} </span> <span class="gpl-trustgrid__text"> <strong>{{ block.settings.title | escape }}</strong> <span>{{ block.settings.subtitle | escape }}</span> </span> </li> {%- endfor -%} </ul>{%- endif -%} {% schema %}{ "name": "Trust badge grid", "settings": [ { "type": "select", "id": "columns", "label": "Columns on desktop", "options": [{ "value": "2", "label": "2" }, { "value": "4", "label": "4" }], "default": "2" } ], "blocks": [ { "type": "badge", "name": "Badge", "settings": [ { "type": "select", "id": "icon", "label": "Icon", "options": [ { "value": "shield", "label": "Shield" }, { "value": "truck", "label": "Delivery" }, { "value": "refresh", "label": "Returns" }, { "value": "award", "label": "Award" } ], "default": "shield" }, { "type": "text", "id": "title", "label": "Title", "default": "Free shipping" }, { "type": "text", "id": "subtitle", "label": "Subtitle" } ] } ], "max_blocks": 8, "presets": [{ "name": "Trust badge grid", "blocks": [{ "type": "badge" }, { "type": "badge" }, { "type": "badge" }, { "type": "badge" }] }]}{% endschema %} {% stylesheet %}.gpl-trustgrid { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr);}@media (min-width: 750px) { .gpl-trustgrid--4 { grid-template-columns: repeat(4, 1fr); }}.gpl-trustgrid__card { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.95rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;}.gpl-trustgrid__icon { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 50%;}/* Each trust type gets its own tint, like the big app icons */.gpl-trustgrid__icon--shield { background: #e6f7f0; color: #1a9e6a; }.gpl-trustgrid__icon--truck { background: #e8f0fe; color: #4a6fe3; }.gpl-trustgrid__icon--refresh { background: #f3eeff; color: #8b5cf6; }.gpl-trustgrid__icon--award { background: #fff8e1; color: #e6a817; }.gpl-trustgrid__icon svg { width: 1.3rem; height: 1.3rem; }.gpl-trustgrid__text { display: grid; min-width: 0; }.gpl-trustgrid__text strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.gpl-trustgrid__text span { font-size: 0.75rem; color: rgb(var(--color-foreground, 100 116 139) / 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }{% endstylesheet %}