{%- comment -%} MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections {%- endcomment -%} {%- comment -%} Trust badges: a row of reassurance points (shipping, returns, secure checkout ...) with a built-in line icon or a custom icon image, title, short text and optional link, plus the store's accepted payment icons. Layouts: row with dividers, cards, or a compact inline strip for under a buy button. Columns per device, including a horizontal scroll row on mobile. No JavaScript. Depends on: nothing (icons are inline SVG). {%- endcomment -%} {%- liquid assign s = section.settings assign heading_tag = s.heading_tag | default: 'h2' assign cols = s.columns | default: 4 assign cols_t = cols if cols_t > 3 assign cols_t = 3 endif assign block_count = section.blocks.size if block_count > 0 and block_count < cols assign cols = block_count endif if block_count > 0 and block_count < cols_t assign cols_t = block_count endif -%}
{%- if s.heading != blank -%} <{{ heading_tag }} class="lib-trust__heading lib-trust__heading--{{ s.heading_size }}"> {{- s.heading -}} {%- endif -%} {%- if block_count > 0 -%} {%- endif -%} {%- if s.show_payment and shop.enabled_payment_types.size > 0 -%}
{%- if s.payment_label != blank -%}

{{ s.payment_label | escape }}

{%- endif -%}
    {%- for type in shop.enabled_payment_types -%}
  • {{ type | payment_type_svg_tag: class: 'lib-trust__pay-icon' }}
  • {%- endfor -%}
{%- endif -%}
{% stylesheet %} .lib-trust { background-color: var(--lib-bg); background-image: var(--lib-bg-image, none); color: var(--lib-text); padding: var(--lib-pt) 1rem var(--lib-pb); --lib-gap: clamp(1rem, 3vw, 2rem); --lib-line: color-mix(in srgb, var(--lib-text) 14%, transparent); } .lib-trust__inner { max-width: 1200px; margin: 0 auto; } .lib-trust--full .lib-trust__inner { max-width: none; } @media (max-width: 749px) { .lib-trust { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); } .lib-trust[data-show='desktop'] { display: none; } } @media (min-width: 750px) { .lib-trust[data-show='mobile'] { display: none; } } .lib-trust__heading { margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } .lib-trust__heading--small { font-size: clamp(1.125rem, 2vw, 1.5rem); } .lib-trust__heading--large { font-size: clamp(1.875rem, 4vw, 3rem); } .lib-trust__heading--xlarge { font-size: clamp(2.25rem, 5.5vw, 4rem); } /* List: columns per device. Mobile is 1 or 2 columns, or a scrolling row. */ .lib-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lib-gap); } .lib-trust[data-cols-m='2'] .lib-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 749px) { .lib-trust[data-cols-m='scroll'] .lib-trust__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; } .lib-trust[data-cols-m='scroll'] .lib-trust__list::-webkit-scrollbar { display: none; } .lib-trust[data-cols-m='scroll'] .lib-trust__item { flex: 0 0 72%; scroll-snap-align: start; } } @media (min-width: 750px) { .lib-trust .lib-trust__list, .lib-trust[data-cols-m='2'] .lib-trust__list { grid-template-columns: repeat(var(--lib-cols-t), minmax(0, 1fr)); } } @media (min-width: 990px) { .lib-trust .lib-trust__list, .lib-trust[data-cols-m='2'] .lib-trust__list { grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr)); } } /* Item: icon on top or beside the text. */ .lib-trust__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; min-width: 0; } .lib-trust[data-icon-pos='side'] .lib-trust__item { flex-direction: row; align-items: flex-start; } .lib-trust__body { min-width: 0; } .lib-trust__title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; } .lib-trust__text { margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.5; opacity: 0.72; } .lib-trust__text a { color: inherit; } .lib-trust__link { color: inherit; text-decoration: none; } .lib-trust__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .lib-trust__item--link:hover .lib-trust__link { text-decoration: underline; text-underline-offset: 0.2em; } .lib-trust__link:focus-visible { outline: none; } .lib-trust__link:focus-visible::after { outline: 2px solid currentColor; outline-offset: 4px; } .lib-trust__text a { position: relative; z-index: 1; } /* Alignment: desktop, then mobile override. Applies to icon-on-top items and the heading. */ .lib-trust__inner[data-align='center'] .lib-trust__heading { text-align: center; } .lib-trust__inner[data-align='center'] .lib-trust__item { align-items: center; text-align: center; } .lib-trust[data-icon-pos='side'] .lib-trust__inner[data-align='center'] .lib-trust__item { justify-content: center; align-items: flex-start; text-align: left; } @media (max-width: 749px) { .lib-trust__inner[data-align-m='left'] .lib-trust__heading { text-align: left; } .lib-trust__inner[data-align-m='left'] .lib-trust__item { align-items: flex-start; text-align: left; } .lib-trust[data-icon-pos='side'] .lib-trust__inner[data-align-m='left'] .lib-trust__item { justify-content: flex-start; } .lib-trust__inner[data-align-m='center'] .lib-trust__heading { text-align: center; } .lib-trust__inner[data-align-m='center'] .lib-trust__item { align-items: center; text-align: center; } .lib-trust[data-icon-pos='side'] .lib-trust__inner[data-align-m='center'] .lib-trust__item { justify-content: center; align-items: flex-start; text-align: left; } } /* Icon */ .lib-trust__icon { flex: none; display: grid; place-items: center; width: var(--lib-icon-size); height: var(--lib-icon-size); color: var(--lib-accent); } .lib-trust__icon svg { width: 100%; height: 100%; display: block; } .lib-trust__icon-img { width: 100%; height: 100%; object-fit: contain; display: block; } .lib-trust[data-icon-style='circle'] .lib-trust__icon, .lib-trust[data-icon-style='outline'] .lib-trust__icon { box-sizing: content-box; padding: calc(var(--lib-icon-size) * 0.38); border-radius: 50%; } .lib-trust[data-icon-style='circle'] .lib-trust__icon { background: color-mix(in srgb, var(--lib-accent) 12%, transparent); } .lib-trust[data-icon-style='outline'] .lib-trust__icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-accent) 40%, transparent); } /* Layout: row with dividers. Lines sit in the gap; the first column's line falls outside and is clipped. */ .lib-trust--row .lib-trust__list { overflow: hidden; } .lib-trust--row .lib-trust__link:focus-visible::after { outline-offset: -2px; } .lib-trust--row .lib-trust__item::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: calc(var(--lib-gap) / -2 - 0.5px); border-inline-start: 1px solid var(--lib-line); } @media (max-width: 749px) { .lib-trust--row[data-cols-m='1'] .lib-trust__item::before { display: none; } .lib-trust--row[data-cols-m='1'] .lib-trust__item + .lib-trust__item { padding-top: var(--lib-gap); border-top: 1px solid var(--lib-line); } .lib-trust--row[data-cols-m='scroll'] .lib-trust__item:first-child::before { display: none; } } /* Layout: cards. */ .lib-trust--cards .lib-trust__list { gap: clamp(0.75rem, 2vw, 1.25rem); } .lib-trust--cards .lib-trust__item { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--lib-card); border-radius: var(--lib-radius); box-shadow: inset 0 0 0 1px var(--lib-line); transition: box-shadow 0.2s ease, transform 0.2s ease; } .lib-trust--cards .lib-trust__item--link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 30%, transparent); } /* Layout: compact inline, sized for under a buy button. Titles only. */ .lib-trust--inline { --lib-gap: 0.5rem 1.25rem; } .lib-trust--inline .lib-trust__heading { font-size: 0.95rem; margin-bottom: 0.75rem; } .lib-trust--inline .lib-trust__list, .lib-trust--inline[data-cols-m] .lib-trust__list { display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; overflow: visible; margin-inline: 0; padding-inline: 0; } .lib-trust--inline .lib-trust__item, .lib-trust--inline[data-icon-pos] .lib-trust__item { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 0.5rem; } .lib-trust--inline .lib-trust__item::before { display: none; } .lib-trust--inline .lib-trust__icon { width: min(var(--lib-icon-size), 22px); height: min(var(--lib-icon-size), 22px); padding: 0; background: none; box-shadow: none; } .lib-trust--inline .lib-trust__title { font-size: 0.875rem; font-weight: 500; } .lib-trust--inline .lib-trust__text { display: none; } .lib-trust--inline .lib-trust__inner[data-align='center'] .lib-trust__list { justify-content: center; } @media (max-width: 749px) { .lib-trust--inline .lib-trust__inner[data-align-m='left'] .lib-trust__list { justify-content: flex-start; } .lib-trust--inline .lib-trust__inner[data-align-m='center'] .lib-trust__list { justify-content: center; } } /* Payment icons */ .lib-trust__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--lib-line); } .lib-trust--inline .lib-trust__pay { margin-top: 1rem; padding-top: 0; border-top: 0; } .lib-trust__inner[data-align='center'] .lib-trust__pay { justify-content: center; } @media (max-width: 749px) { .lib-trust__inner[data-align-m='left'] .lib-trust__pay { justify-content: flex-start; } .lib-trust__inner[data-align-m='center'] .lib-trust__pay { justify-content: center; } } .lib-trust__pay-label { margin: 0; font-size: 0.85rem; opacity: 0.72; } .lib-trust__pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0.5rem; } .lib-trust__pay-item { display: flex; } .lib-trust__pay-icon { display: block; height: 24px; width: auto; } span.lib-trust__pay-icon { padding: 0 0.5rem; line-height: 24px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--lib-line); background: color-mix(in srgb, var(--lib-text) 4%, transparent); } @media (prefers-reduced-motion: reduce) { .lib-trust--cards .lib-trust__item { transition: none; } .lib-trust--cards .lib-trust__item--link:hover { transform: none; } } {% endstylesheet %} {% schema %} { "name": "Lib · Trust badges", "tag": "section", "class": "lib-section", "max_blocks": 8, "settings": [ { "type": "header", "content": "Content" }, { "type": "inline_richtext", "id": "heading", "label": "Heading", "info": "Optional. Leave empty under a buy button." }, { "type": "select", "id": "heading_tag", "label": "Heading tag", "info": "Use H1 only when this is the page's main heading.", "options": [ { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" }, { "value": "h3", "label": "H3" }, { "value": "p", "label": "Paragraph" } ], "default": "h2", "visible_if": "{{ section.settings.heading != blank }}" }, { "type": "select", "id": "heading_size", "label": "Heading size", "options": [ { "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" }, { "value": "xlarge", "label": "Extra large" } ], "default": "medium", "visible_if": "{{ section.settings.heading != blank }}" }, { "type": "header", "content": "Payment icons" }, { "type": "checkbox", "id": "show_payment", "label": "Show accepted payment icons", "info": "Icons for the payment methods active in your store's payment settings.", "default": true }, { "type": "text", "id": "payment_label", "label": "Payment label", "default": "Secure payment with", "visible_if": "{{ section.settings.show_payment }}" }, { "type": "header", "content": "Layout" }, { "type": "select", "id": "layout", "label": "Style", "options": [ { "value": "row", "label": "Row with dividers" }, { "value": "cards", "label": "Cards" }, { "value": "inline", "label": "Compact inline" } ], "default": "row", "info": "Compact inline shows small icons and titles only, for use under a buy button." }, { "type": "range", "id": "columns", "label": "Columns on desktop", "info": "Tablets show up to 3.", "min": 2, "max": 6, "step": 1, "default": 4, "visible_if": "{{ section.settings.layout != 'inline' }}" }, { "type": "select", "id": "columns_mobile", "label": "Mobile layout", "options": [ { "value": "1", "label": "1 column" }, { "value": "2", "label": "2 columns" }, { "value": "scroll", "label": "Horizontal scroll" } ], "default": "2", "visible_if": "{{ section.settings.layout != 'inline' }}" }, { "type": "select", "id": "icon_position", "label": "Icon position", "options": [ { "value": "top", "label": "Above text" }, { "value": "side", "label": "Beside text" } ], "default": "top", "visible_if": "{{ section.settings.layout != 'inline' }}" }, { "type": "text_alignment", "id": "text_alignment", "label": "Alignment on desktop", "default": "center" }, { "type": "select", "id": "text_alignment_mobile", "label": "Alignment on mobile", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" } ], "default": "center" }, { "type": "select", "id": "section_width", "label": "Width", "options": [ { "value": "page", "label": "Page width" }, { "value": "full", "label": "Full width" } ], "default": "page" }, { "type": "range", "id": "card_radius", "label": "Card corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 14, "visible_if": "{{ section.settings.layout == 'cards' }}" }, { "type": "header", "content": "Icons" }, { "type": "range", "id": "icon_size", "label": "Icon size", "info": "Compact inline caps icons at 22px.", "min": 16, "max": 64, "step": 2, "unit": "px", "default": 30 }, { "type": "select", "id": "icon_style", "label": "Icon background", "options": [ { "value": "plain", "label": "None" }, { "value": "circle", "label": "Tinted circle" }, { "value": "outline", "label": "Outlined circle" } ], "default": "plain" }, { "type": "header", "content": "Colors" }, { "type": "color", "id": "color_bg", "label": "Background", "default": "#FAFAF9" }, { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." }, { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1917" }, { "type": "color", "id": "color_icon", "label": "Icons", "default": "#9A5B34" }, { "type": "color", "id": "color_card", "label": "Card background", "default": "#FFFFFF", "visible_if": "{{ section.settings.layout == 'cards' }}" }, { "type": "header", "content": "Spacing and visibility" }, { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 }, { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 }, { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 40 }, { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 40 }, { "type": "select", "id": "show_on", "label": "Show on", "options": [ { "value": "all", "label": "All devices" }, { "value": "desktop", "label": "Desktop only" }, { "value": "mobile", "label": "Mobile only" } ], "default": "all" }, { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." } ], "blocks": [ { "type": "badge", "name": "Trust point", "limit": 8, "settings": [ { "type": "select", "id": "icon", "label": "Icon", "options": [ { "value": "none", "label": "None" }, { "value": "truck", "label": "Delivery truck" }, { "value": "return", "label": "Returns" }, { "value": "lock", "label": "Lock" }, { "value": "shield", "label": "Shield" }, { "value": "leaf", "label": "Leaf" }, { "value": "star", "label": "Star" }, { "value": "chat", "label": "Chat" }, { "value": "gift", "label": "Gift" }, { "value": "card", "label": "Card" }, { "value": "clock", "label": "Clock" }, { "value": "heart", "label": "Heart" }, { "value": "check", "label": "Check" }, { "value": "box", "label": "Package" }, { "value": "globe", "label": "Globe" } ], "default": "truck" }, { "type": "image_picker", "id": "icon_image", "label": "Custom icon", "info": "Optional. Replaces the built-in icon. A square SVG or PNG works best." }, { "type": "text", "id": "title", "label": "Title", "default": "Free delivery over $75" }, { "type": "inline_richtext", "id": "text", "label": "Text", "default": "Tracked to your door in 2 to 4 working days." }, { "type": "url", "id": "link", "label": "Link", "info": "Optional. Makes the whole point clickable." } ] } ], "presets": [ { "name": "Lib · Trust badges", "blocks": [ { "type": "badge", "settings": { "icon": "truck", "title": "Free delivery over $75", "text": "Tracked to your door in 2 to 4 working days." } }, { "type": "badge", "settings": { "icon": "return", "title": "30-day returns", "text": "Changed your mind? Send it back, on us." } }, { "type": "badge", "settings": { "icon": "lock", "title": "Secure checkout", "text": "Encrypted payments, never stored by us." } }, { "type": "badge", "settings": { "icon": "chat", "title": "Real people, real help", "text": "Write to us any weekday, we reply within a day." } } ] } ] } {% endschema %}