← All sections
Trust Strip
A refined reassurance band with drawn-in icons, a mobile marquee and live payment icons.
Install
One file: sections/mf-trust-marquee.liquid. It appears in the theme editor as EX · Trust strip.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcphttps://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-trust-marquee.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Trust Strip" (trust-marquee) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor. - Customize. Online Store → Themes → Customize → Add section → EX · Trust strip. Every text, color and product is a setting.
{%- liquid
assign s = section.settings
assign count = section.blocks.size
assign cols = count
if count > 6
assign cols = 4
endif
if cols < 1
assign cols = 1
endif
assign cols_md = cols
if count == 4
assign cols_md = 2
elsif count > 4
assign cols_md = 3
endif
assign marquee_any = false
if s.layout_desktop == 'marquee' or s.layout_mobile == 'marquee'
assign marquee_any = true
endif
assign clones = 1
if count > 0
assign clones = 8 | divided_by: count
endif
if clones < 1
assign clones = 1
endif
assign copies = clones | plus: 1
assign accent_brightness = s.color_accent | color_brightness
assign on_accent = '#ffffff'
if accent_brightness > 150
assign on_accent = '#101312'
endif
assign tone = s.color_scheme
if s.color_scheme == 'custom'
assign bg_brightness = s.color_bg | color_brightness
if bg_brightness < 128
assign tone = 'dark'
else
assign tone = 'light'
endif
endif
case s.marquee_speed
when 'slow'
assign speed = 9
when 'fast'
assign speed = 4
else
assign speed = 6
endcase
-%}
<mf-trust-marquee
class="mf-trust mf-trust--{{ tone }} mf-trust--d-{{ s.layout_desktop }} mf-trust--m-{{ s.layout_mobile }} mf-trust--{{ s.item_alignment }} mf-trust--icon-{{ s.icon_style }}{% unless s.show_dividers %} mf-trust--plain{% endunless %}"
style="{% if s.color_scheme == 'custom' %}--mf-trust-bg: {{ s.color_bg }}; --mf-trust-fg: {{ s.color_text }}; {% endif %}--mf-trust-accent: {{ s.color_accent }}; --mf-trust-on-accent: {{ on_accent }}; --mf-trust-cols: {{ cols }}; --mf-trust-cols-md: {{ cols_md }}; --mf-trust-count: {{ count }}; --mf-trust-k: {{ copies }}; --mf-trust-speed: {{ speed }}s; --mf-trust-pt: {{ s.padding_top }}px; --mf-trust-pb: {{ s.padding_bottom }}px;"
>
<span class="mf-trust__beam" aria-hidden="true"></span>
<div class="mf-trust__inner">
{%- if count > 0 -%}
{%- capture clone_items -%}{%- endcapture -%}
<div class="mf-trust__rail">
<div class="mf-trust__viewport">
<div class="mf-trust__track">
<ul class="mf-trust__list" role="list">
{%- for block in section.blocks -%}
{%- liquid
assign b = block.settings
assign item_title = b.title | escape
-%}
{%- capture item_inner -%}
<span class="mf-trust__badge" aria-hidden="true">
<svg class="mf-trust__icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
{%- case b.icon -%}
{%- when 'truck' -%}
<path pathLength="1" d="M13.25 16.25V6.75H2.75v9.5h1.65"/><path pathLength="1" d="M13.25 9.25h3.9l3.35 3.6v3.4h-1.55"/><path pathLength="1" d="M8.3 16.25h6.5"/><circle pathLength="1" cx="6.4" cy="16.6" r="1.9"/><circle pathLength="1" cx="16.8" cy="16.6" r="1.9"/>
{%- when 'return' -%}
<path pathLength="1" d="M9.5 14.5 4.5 9.5l5-5"/><path pathLength="1" d="M4.5 9.5h10a5 5 0 0 1 0 10H11"/>
{%- when 'shield' -%}
<path pathLength="1" d="M12 2.75 19.25 5.5v5.75c0 4.6-3.05 8.3-7.25 9.95-4.2-1.65-7.25-5.35-7.25-9.95V5.5z"/><path pathLength="1" d="m8.75 12 2.3 2.3 4.2-4.55"/>
{%- when 'leaf' -%}
<path pathLength="1" d="M5 19C5 10 10 5 19 5c0 9-5 14-14 14z"/><path pathLength="1" d="M3.5 20.5 13 11"/>
{%- when 'clock' -%}
<circle pathLength="1" cx="12" cy="12" r="8.25"/><path pathLength="1" d="M12 7.5V12l3 2"/>
{%- when 'star' -%}
<path pathLength="1" d="m12 3.6 2.55 5.2 5.7.82-4.13 4.02.98 5.68L12 16.64l-5.1 2.68.98-5.68-4.13-4.02 5.7-.82z"/>
{%- when 'heart' -%}
<path pathLength="1" d="M12 20s-7.5-4.6-7.5-10.1A4.4 4.4 0 0 1 12 7.1a4.4 4.4 0 0 1 7.5 2.8C19.5 15.4 12 20 12 20z"/>
{%- when 'globe' -%}
<circle pathLength="1" cx="12" cy="12" r="8.25"/><path pathLength="1" d="M3.75 12h16.5"/><path pathLength="1" d="M12 3.75c2.3 2.3 3.4 5.05 3.4 8.25s-1.1 5.95-3.4 8.25c-2.3-2.3-3.4-5.05-3.4-8.25S9.7 6.05 12 3.75z"/>
{%- when 'lock' -%}
<rect pathLength="1" x="5" y="10.5" width="14" height="9.75" rx="2.4"/><path pathLength="1" d="M8.25 10.5V7.75a3.75 3.75 0 0 1 7.5 0v2.75"/><path pathLength="1" d="M12 14.4v2"/>
{%- when 'sparkle' -%}
<path pathLength="1" d="M11 3.5c.6 4.3 2.2 5.9 6.5 6.5-4.3.6-5.9 2.2-6.5 6.5-.6-4.3-2.2-5.9-6.5-6.5 4.3-.6 5.9-2.2 6.5-6.5z"/><path pathLength="1" d="M18.25 15.25c.25 1.6.9 2.25 2.5 2.5-1.6.25-2.25.9-2.5 2.5-.25-1.6-.9-2.25-2.5-2.5 1.6-.25 2.25-.9 2.5-2.5z"/>
{%- when 'gift' -%}
<rect pathLength="1" x="3.75" y="8.25" width="16.5" height="4" rx="1"/><path pathLength="1" d="M5.25 12.25v7a1 1 0 0 0 1 1h11.5a1 1 0 0 0 1-1v-7"/><path pathLength="1" d="M12 8.25v12"/><path pathLength="1" d="M12 8.25c-1.2-3.3-4.9-4.4-5.6-2.3-.5 1.6 1.9 2.3 5.6 2.3z"/><path pathLength="1" d="M12 8.25c1.2-3.3 4.9-4.4 5.6-2.3.5 1.6-1.9 2.3-5.6 2.3z"/>
{%- when 'chat' -%}
<path pathLength="1" d="M20.25 11.6c0 4.2-3.7 7.4-8.25 7.4-1.2 0-2.3-.2-3.35-.6L4.5 19.9l1.2-3.4a7 7 0 0 1-1.95-4.9c0-4.2 3.7-7.35 8.25-7.35s8.25 3.15 8.25 7.35z"/><path pathLength="1" d="M8.6 11.75h.01"/><path pathLength="1" d="M12 11.75h.01"/><path pathLength="1" d="M15.4 11.75h.01"/>
{%- endcase -%}
</svg>
</span>
<span class="mf-trust__text">
{%- if b.title != blank -%}
<span class="mf-trust__title">
{%- if b.link != blank -%}
<a class="mf-trust__link" href="{{ b.link }}" data-mf-tab>{{ item_title }}</a>
{%- else -%}
{{ item_title }}
{%- endif -%}
</span>
{%- endif -%}
{%- if b.subtitle != blank -%}
<span class="mf-trust__sub">{{ b.subtitle | escape }}</span>
{%- endif -%}
</span>
{%- endcapture -%}
<li class="mf-trust__item" style="--mf-trust-i: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
{{- item_inner | remove: ' data-mf-tab' -}}
</li>
{%- if marquee_any -%}
{%- capture clone_item -%}
<li class="mf-trust__item" style="--mf-trust-i: {{ forloop.index0 }};">
{{- item_inner | replace: 'data-mf-tab', 'tabindex="-1"' -}}
</li>
{%- endcapture -%}
{%- assign clone_items = clone_items | append: clone_item -%}
{%- endif -%}
{%- endfor -%}
</ul>
{%- if marquee_any -%}
{%- for copy in (1..clones) -%}
<ul class="mf-trust__list mf-trust__list--clone" role="list" aria-hidden="true">
{{- clone_items -}}
</ul>
{%- endfor -%}
{%- endif -%}
</div>
</div>
{%- if marquee_any -%}
<button type="button" class="mf-trust__toggle" aria-pressed="false" aria-label="{{ s.pause_label | escape }}" data-mf-trust-toggle>
<svg class="mf-trust__pause" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false"><rect x="3.5" y="2.5" width="3" height="11" rx="1" fill="currentColor"/><rect x="9.5" y="2.5" width="3" height="11" rx="1" fill="currentColor"/></svg>
<svg class="mf-trust__play" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false"><path d="M4.5 2.8v10.4a.8.8 0 0 0 1.2.7l8.2-5.2a.8.8 0 0 0 0-1.4L5.7 2.1a.8.8 0 0 0-1.2.7z" fill="currentColor"/></svg>
</button>
{%- endif -%}
</div>
{%- endif -%}
{%- if s.show_payment -%}
<div class="mf-trust__pay">
{%- if s.payment_label != blank or s.payment_note != blank -%}
<p class="mf-trust__secure">
<span class="mf-trust__lock" aria-hidden="true">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false"><rect x="5" y="10.5" width="14" height="9.75" rx="2.4"/><path d="M8.25 10.5V7.75a3.75 3.75 0 0 1 7.5 0v2.75"/><path d="M12 14.4v2"/></svg>
</span>
<span class="mf-trust__secure-text">
{%- if s.payment_label != blank -%}<span class="mf-trust__secure-label">{{ s.payment_label | escape }}</span>{%- endif -%}
{%- if s.payment_note != blank -%}<span class="mf-trust__secure-note">{{ s.payment_note | escape }}</span>{%- endif -%}
</span>
</p>
{%- endif -%}
{%- if shop.enabled_payment_types.size > 0 -%}
<ul class="mf-trust__methods" role="list">
{%- for type in shop.enabled_payment_types limit: 12 -%}
<li class="mf-trust__method" style="--mf-trust-i: {{ forloop.index0 | plus: count }};">
{{- type | payment_type_svg_tag: class: 'mf-trust__pay-icon' -}}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endif -%}
</div>
</mf-trust-marquee>
{% stylesheet %}
.mf-trust {
--mf-trust-bg: #f6f3ee;
--mf-trust-fg: #1c1a17;
--mf-trust-ink: var(--mf-trust-accent, #2e7556);
--mf-trust-muted: color-mix(in srgb, var(--mf-trust-fg) 70%, var(--mf-trust-bg));
--mf-trust-line: color-mix(in srgb, var(--mf-trust-fg) 13%, transparent);
--mf-trust-badge-1: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 16%, var(--mf-trust-bg));
--mf-trust-badge-2: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 5%, var(--mf-trust-bg));
--mf-trust-ring: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 22%, transparent);
--mf-trust-glow: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 11%, transparent);
--mf-trust-shine: rgba(255, 255, 255, 0.85);
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
padding: var(--mf-trust-pt, 36px) 0 var(--mf-trust-pb, 32px);
background: var(--mf-trust-bg);
color: var(--mf-trust-fg);
font-family: inherit;
}
.mf-trust--dark {
--mf-trust-bg: #0f1211;
--mf-trust-fg: #f1eee7;
--mf-trust-ink: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 52%, #ffffff);
--mf-trust-muted: color-mix(in srgb, var(--mf-trust-fg) 68%, var(--mf-trust-bg));
--mf-trust-line: color-mix(in srgb, var(--mf-trust-fg) 14%, transparent);
--mf-trust-badge-1: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 38%, var(--mf-trust-bg));
--mf-trust-badge-2: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 12%, var(--mf-trust-bg));
--mf-trust-ring: color-mix(in srgb, var(--mf-trust-ink) 26%, transparent);
--mf-trust-glow: color-mix(in srgb, var(--mf-trust-accent, #2e7556) 26%, transparent);
--mf-trust-shine: rgba(255, 255, 255, 0.22);
}
.mf-trust *,
.mf-trust *::before,
.mf-trust *::after {
box-sizing: border-box;
}
.mf-trust::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background:
radial-gradient(560px 180px at 8% 0%, var(--mf-trust-glow), transparent 70%),
radial-gradient(520px 200px at 92% 100%, var(--mf-trust-glow), transparent 70%),
linear-gradient(90deg, transparent, var(--mf-trust-line) 18%, var(--mf-trust-line) 82%, transparent) top / 100% 1px no-repeat,
linear-gradient(90deg, transparent, var(--mf-trust-line) 18%, var(--mf-trust-line) 82%, transparent) bottom / 100% 1px no-repeat;
}
.mf-trust::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background-image: radial-gradient(var(--mf-trust-line) 0.7px, transparent 0.9px);
background-size: 16px 16px;
-webkit-mask-image: radial-gradient(75% 130% at 50% 50%, transparent 45%, #000 100%);
mask-image: radial-gradient(75% 130% at 50% 50%, transparent 45%, #000 100%);
opacity: 0.45;
}
.mf-trust__beam {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 40%;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--mf-trust-ink) 50%, transparent);
opacity: 0;
transform: translateX(-100%);
}
.mf-trust--in .mf-trust__beam {
animation: mf-trust-beam 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.15s 1 both;
}
.mf-trust__inner {
position: relative;
width: min(100% - 40px, 1320px);
margin: 0 auto;
}
.mf-trust__rail {
position: relative;
}
.mf-trust__viewport {
position: relative;
}
.mf-trust__list {
display: grid;
grid-template-columns: repeat(var(--mf-trust-cols, 4), minmax(0, 1fr));
row-gap: 30px;
margin: 0;
padding: 0;
list-style: none;
-webkit-clip-path: inset(-40px 0 -40px 1px);
clip-path: inset(-40px 0 -40px 1px);
}
.mf-trust__list--clone {
display: none;
}
.mf-trust__item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
min-width: 0;
margin: 0;
padding: 6px clamp(12px, 1.8vw, 28px);
}
.mf-trust__item::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 1px;
background: linear-gradient(180deg, transparent, var(--mf-trust-line) 28%, var(--mf-trust-line) 72%, transparent);
}
.mf-trust--plain .mf-trust__item::before {
display: none;
}
.mf-trust--stacked .mf-trust__item {
flex-direction: column;
gap: 14px;
text-align: center;
}
.mf-trust__badge {
position: relative;
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 16px;
overflow: hidden;
color: var(--mf-trust-ink);
background: linear-gradient(155deg, var(--mf-trust-badge-1), var(--mf-trust-badge-2));
box-shadow:
inset 0 1px 0 var(--mf-trust-shine),
inset 0 0 0 1px var(--mf-trust-ring),
0 10px 22px -14px color-mix(in srgb, var(--mf-trust-accent, #2e7556) 70%, transparent);
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
}
.mf-trust__badge::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, var(--mf-trust-shine) 48%, transparent 64%);
opacity: 0.8;
transform: translateX(-130%);
transition: transform 0.7s ease;
}
.mf-trust--icon-solid .mf-trust__badge {
color: var(--mf-trust-on-accent);
background: linear-gradient(155deg, color-mix(in srgb, var(--mf-trust-accent, #2e7556) 82%, #ffffff), var(--mf-trust-accent, #2e7556));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 12px 24px -14px color-mix(in srgb, var(--mf-trust-accent, #2e7556) 85%, transparent);
}
.mf-trust--icon-plain .mf-trust__badge {
width: 32px;
height: 32px;
border-radius: 0;
overflow: visible;
background: none;
box-shadow: none;
}
.mf-trust--icon-plain .mf-trust__badge::after {
display: none;
}
.mf-trust__icon {
position: relative;
z-index: 1;
display: block;
width: 24px;
height: 24px;
}
.mf-trust--icon-plain .mf-trust__icon {
width: 28px;
height: 28px;
}
.mf-trust__item:hover .mf-trust__badge {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 var(--mf-trust-shine),
inset 0 0 0 1px var(--mf-trust-ring),
0 16px 26px -14px color-mix(in srgb, var(--mf-trust-accent, #2e7556) 80%, transparent);
}
.mf-trust__item:hover .mf-trust__badge::after {
transform: translateX(130%);
}
.mf-trust__text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
text-wrap: pretty;
}
.mf-trust__title {
display: block;
margin: 0;
font-family: inherit;
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.012em;
text-transform: none;
color: var(--mf-trust-fg);
}
.mf-trust__link {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: text-decoration-color 0.25s ease;
}
.mf-trust__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.mf-trust__link:hover {
text-decoration-color: currentColor;
}
.mf-trust__link:focus-visible {
outline: none;
text-decoration-color: currentColor;
}
.mf-trust__link:focus-visible::after {
border-radius: 14px;
outline: 2px solid var(--mf-trust-ink);
outline-offset: -2px;
}
.mf-trust__sub {
display: block;
margin: 0;
font-size: clamp(12px, 0.95vw, 13.5px);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--mf-trust-muted);
}
.mf-trust__toggle {
display: none;
position: absolute;
z-index: 3;
top: 50%;
right: -6px;
width: 32px;
height: 32px;
margin: -16px 0 0;
padding: 0;
place-items: center;
border: 1px solid var(--mf-trust-line);
border-radius: 50%;
-webkit-appearance: none;
appearance: none;
background: color-mix(in srgb, var(--mf-trust-bg) 82%, transparent);
color: var(--mf-trust-fg);
font: inherit;
line-height: 1;
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.45);
transition: transform 0.25s ease, background 0.25s ease;
}
.mf-trust__toggle::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
}
.mf-trust__toggle:hover {
transform: scale(1.06);
}
.mf-trust__toggle:focus-visible {
outline: 2px solid var(--mf-trust-ink);
outline-offset: 3px;
}
.mf-trust__toggle .mf-trust__pause {
display: block;
}
.mf-trust__toggle .mf-trust__play,
.mf-trust__toggle[aria-pressed="true"] .mf-trust__pause {
display: none;
}
.mf-trust__toggle[aria-pressed="true"] .mf-trust__play {
display: block;
margin-left: 2px;
}
.mf-trust__pay {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 28px;
margin-top: clamp(24px, 3vw, 34px);
padding-top: clamp(18px, 2vw, 22px);
}
.mf-trust__pay::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, var(--mf-trust-line), var(--mf-trust-line) 60%, transparent);
}
.mf-trust__secure {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: 13px;
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
color: var(--mf-trust-fg);
}
.mf-trust__lock {
position: relative;
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: var(--mf-trust-ink);
background: var(--mf-trust-badge-1);
box-shadow: inset 0 0 0 1px var(--mf-trust-ring);
}
.mf-trust__lock::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--mf-trust-ring);
opacity: 0;
}
.mf-trust__lock svg {
display: block;
}
.mf-trust__secure-text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 10px;
}
.mf-trust__secure-label {
font-weight: 650;
letter-spacing: -0.005em;
}
.mf-trust__secure-note {
color: var(--mf-trust-muted);
}
.mf-trust__methods {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.mf-trust__method {
margin: 0;
line-height: 0;
border-radius: 5px;
box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.35);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mf-trust__method:hover {
transform: translateY(-2px);
}
.mf-trust__pay-icon {
display: block;
width: 38px;
height: 24px;
}
/* Entrance: only when JS runs and motion is allowed */
.mf-trust--js .mf-trust__item,
.mf-trust--js .mf-trust__method,
.mf-trust--js .mf-trust__secure {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mf-trust--js .mf-trust__badge {
transform: scale(0.6) rotate(-8deg);
transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.mf-trust--js .mf-trust__icon > * {
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.mf-trust--js:not(.mf-trust--done) .mf-trust__item,
.mf-trust--js:not(.mf-trust--done) .mf-trust__method {
transition-delay: calc(var(--mf-trust-i, 0) * 90ms);
}
.mf-trust--js:not(.mf-trust--done) .mf-trust__badge {
transition-delay: calc(var(--mf-trust-i, 0) * 90ms + 90ms);
}
.mf-trust--js:not(.mf-trust--done) .mf-trust__icon > * {
transition-delay: calc(var(--mf-trust-i, 0) * 90ms + 260ms);
}
.mf-trust--js:not(.mf-trust--done) .mf-trust__secure {
transition-delay: calc(var(--mf-trust-count, 4) * 90ms);
}
.mf-trust--js.mf-trust--in .mf-trust__item,
.mf-trust--js.mf-trust--in .mf-trust__method,
.mf-trust--js.mf-trust--in .mf-trust__secure {
opacity: 1;
transform: none;
}
.mf-trust--js.mf-trust--in .mf-trust__badge {
transform: none;
}
.mf-trust--js.mf-trust--in .mf-trust__icon > * {
stroke-dashoffset: 0;
}
.mf-trust--js.mf-trust--in .mf-trust__item:hover .mf-trust__badge {
transform: translateY(-3px);
}
.mf-trust--in .mf-trust__lock::before {
animation: mf-trust-ping 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s 1 both;
}
/* Marquee: shared look, applied per breakpoint below */
@keyframes mf-trust-marquee {
to {
transform: translateX(calc(-100% / var(--mf-trust-k, 2)));
}
}
@keyframes mf-trust-beam {
0% { opacity: 0; transform: translateX(-100%); }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; transform: translateX(250%); }
}
@keyframes mf-trust-ping {
0% { opacity: 0.9; transform: scale(0.8); }
100% { opacity: 0; transform: scale(1.6); }
}
@media screen and (min-width: 750px) {
.mf-trust--d-marquee .mf-trust__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mf-trust--d-marquee .mf-trust__track {
display: flex;
width: max-content;
animation: mf-trust-marquee calc(var(--mf-trust-count, 4) * var(--mf-trust-speed, 6s)) linear infinite;
}
.mf-trust--d-marquee .mf-trust__list,
.mf-trust--d-marquee .mf-trust__list--clone {
display: flex;
flex-wrap: nowrap;
-webkit-clip-path: none;
clip-path: none;
}
.mf-trust--d-marquee .mf-trust__item {
flex: 0 0 auto;
padding: 8px clamp(28px, 3.2vw, 48px);
}
.mf-trust--d-marquee .mf-trust__text {
max-width: 260px;
}
.mf-trust--d-marquee.mf-trust--ctl .mf-trust__toggle {
display: grid;
}
.mf-trust--d-marquee.mf-trust--ctl .mf-trust__viewport {
margin-right: 34px;
}
}
@media screen and (max-width: 989px) {
.mf-trust__list {
grid-template-columns: repeat(var(--mf-trust-cols-md, 2), minmax(0, 1fr));
}
.mf-trust__item {
gap: 12px;
}
.mf-trust__badge {
width: 44px;
height: 44px;
border-radius: 14px;
}
}
@media screen and (max-width: 749px) {
.mf-trust__inner {
width: min(100% - 32px, 1320px);
}
.mf-trust--m-grid .mf-trust__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 0;
}
.mf-trust--m-grid .mf-trust__item {
flex-direction: column;
gap: 10px;
padding: 16px 10px;
text-align: center;
}
.mf-trust--m-grid .mf-trust__item:nth-child(n + 3)::after {
content: "";
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mf-trust-line) 25%, var(--mf-trust-line) 75%, transparent);
}
.mf-trust--m-grid.mf-trust--plain .mf-trust__item::after {
display: none;
}
.mf-trust--m-grid .mf-trust__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.mf-trust--m-grid .mf-trust__item:last-child:nth-child(odd)::before {
display: none;
}
.mf-trust--m-marquee .mf-trust__rail {
margin: 0 -16px;
}
.mf-trust--m-marquee .mf-trust__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 76%, transparent 93%);
mask-image: linear-gradient(90deg, transparent, #000 9%, #000 76%, transparent 93%);
}
.mf-trust--m-marquee .mf-trust__track {
display: flex;
width: max-content;
animation: mf-trust-marquee calc(var(--mf-trust-count, 4) * var(--mf-trust-speed, 6s)) linear infinite;
}
.mf-trust--m-marquee .mf-trust__list,
.mf-trust--m-marquee .mf-trust__list--clone {
display: flex;
flex-wrap: nowrap;
-webkit-clip-path: none;
clip-path: none;
}
.mf-trust--m-marquee .mf-trust__item {
flex: 0 0 auto;
flex-direction: row;
gap: 12px;
padding: 6px 22px;
text-align: left;
}
.mf-trust--m-marquee .mf-trust__text {
max-width: 210px;
}
.mf-trust--m-marquee.mf-trust--ctl .mf-trust__toggle {
display: grid;
right: 12px;
}
.mf-trust__title {
font-size: 14px;
}
.mf-trust__sub {
font-size: 12px;
}
.mf-trust__pay {
flex-direction: column;
justify-content: center;
gap: 14px;
text-align: center;
}
.mf-trust__pay::before {
background: linear-gradient(90deg, transparent, var(--mf-trust-line) 20%, var(--mf-trust-line) 80%, transparent);
}
.mf-trust__secure {
flex-wrap: wrap;
justify-content: center;
gap: 6px 10px;
text-align: center;
}
.mf-trust__secure-text {
display: contents;
}
.mf-trust__secure-note {
flex: 1 0 100%;
}
.mf-trust__methods {
justify-content: center;
gap: 6px;
}
}
.mf-trust--off .mf-trust__track,
.mf-trust--paused .mf-trust__track,
.mf-trust__viewport:hover .mf-trust__track,
.mf-trust__viewport:focus-within .mf-trust__track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.mf-trust__track {
animation: none !important;
}
.mf-trust__viewport {
overflow-x: auto !important;
scrollbar-width: none;
}
.mf-trust__list--clone,
.mf-trust__toggle {
display: none !important;
}
.mf-trust--js .mf-trust__item,
.mf-trust--js .mf-trust__method,
.mf-trust--js .mf-trust__secure,
.mf-trust--js .mf-trust__badge {
opacity: 1;
transform: none;
transition: none;
}
.mf-trust--js .mf-trust__icon > * {
stroke-dashoffset: 0;
transition: none;
}
.mf-trust__badge,
.mf-trust__badge::after,
.mf-trust__method,
.mf-trust__toggle {
transition: none;
}
.mf-trust__item:hover .mf-trust__badge,
.mf-trust--js.mf-trust--in .mf-trust__item:hover .mf-trust__badge,
.mf-trust__method:hover {
transform: none;
}
.mf-trust--in .mf-trust__lock::before,
.mf-trust--in .mf-trust__beam {
animation: none;
}
}
{% endstylesheet %}
{% javascript %}
if (!customElements.get('mf-trust-marquee')) {
customElements.define(
'mf-trust-marquee',
class extends HTMLElement {
connectedCallback() {
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
this.toggle = this.querySelector('[data-mf-trust-toggle]');
if (this.toggle && !reduce) {
this.classList.add('mf-trust--ctl');
this.onToggle = () => {
const paused = this.toggle.getAttribute('aria-pressed') !== 'true';
this.toggle.setAttribute('aria-pressed', String(paused));
this.classList.toggle('mf-trust--paused', paused);
};
this.toggle.addEventListener('click', this.onToggle);
}
if (!('IntersectionObserver' in window)) return;
if (!reduce) this.classList.add('mf-trust--js');
this.observer = new IntersectionObserver(
(entries) => {
const entry = entries[entries.length - 1];
if (!entry) return;
this.classList.toggle('mf-trust--off', !entry.isIntersecting);
if (entry.isIntersecting && !reduce && !this.classList.contains('mf-trust--in')) {
requestAnimationFrame(() => this.classList.add('mf-trust--in'));
const settle = (Number(this.style.getPropertyValue('--mf-trust-count')) || 4) * 90 + 1500;
this.doneTimer = setTimeout(() => this.classList.add('mf-trust--done'), settle);
}
},
{ threshold: 0.2 }
);
this.observer.observe(this);
}
disconnectedCallback() {
if (this.observer) this.observer.disconnect();
if (this.doneTimer) clearTimeout(this.doneTimer);
if (this.toggle && this.onToggle) this.toggle.removeEventListener('click', this.onToggle);
}
}
);
}
{% endjavascript %}
{% schema %}
{
"name": "EX · Trust strip",
"tag": "section",
"class": "mf-section",
"disabled_on": {
"groups": ["header"]
},
"max_blocks": 8,
"settings": [
{
"type": "header",
"content": "Secure checkout row"
},
{
"type": "checkbox",
"id": "show_payment",
"label": "Show payment methods",
"info": "Icons come from the payment methods enabled in your Shopify payment settings.",
"default": true
},
{
"type": "text",
"id": "payment_label",
"label": "Secure checkout label",
"default": "Secure checkout"
},
{
"type": "text",
"id": "payment_note",
"label": "Secure checkout note",
"default": "Encrypted payments · pay the way you prefer"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "layout_desktop",
"label": "Desktop layout",
"options": [
{ "value": "row", "label": "Row with dividers" },
{ "value": "marquee", "label": "Scrolling marquee" }
],
"default": "row"
},
{
"type": "select",
"id": "layout_mobile",
"label": "Mobile layout",
"options": [
{ "value": "grid", "label": "Two-column grid" },
{ "value": "marquee", "label": "Scrolling marquee" }
],
"default": "marquee"
},
{
"type": "select",
"id": "marquee_speed",
"label": "Marquee speed",
"options": [
{ "value": "slow", "label": "Slow" },
{ "value": "normal", "label": "Normal" },
{ "value": "fast", "label": "Fast" }
],
"default": "normal"
},
{
"type": "text",
"id": "pause_label",
"label": "Pause button label",
"info": "Read by screen readers on the marquee pause button.",
"default": "Pause scrolling"
},
{
"type": "select",
"id": "item_alignment",
"label": "Item layout",
"options": [
{ "value": "inline", "label": "Icon beside text" },
{ "value": "stacked", "label": "Icon above text" }
],
"default": "inline"
},
{
"type": "select",
"id": "icon_style",
"label": "Icon style",
"options": [
{ "value": "soft", "label": "Soft badge" },
{ "value": "solid", "label": "Solid badge" },
{ "value": "plain", "label": "Icon only" }
],
"default": "soft"
},
{
"type": "checkbox",
"id": "show_dividers",
"label": "Show dividers",
"default": true
},
{
"type": "range",
"id": "padding_top",
"label": "Top padding",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom padding",
"min": 0,
"max": 120,
"step": 4,
"unit": "px",
"default": 32
},
{
"type": "header",
"content": "Colors"
},
{
"type": "select",
"id": "color_scheme",
"label": "Color scheme",
"options": [
{ "value": "light", "label": "Light" },
{ "value": "dark", "label": "Dark" },
{ "value": "custom", "label": "Custom colors" }
],
"default": "light"
},
{
"type": "color",
"id": "color_bg",
"label": "Background",
"info": "Used when Color scheme is Custom colors.",
"default": "#f6f3ee"
},
{
"type": "color",
"id": "color_text",
"label": "Text",
"info": "Used when Color scheme is Custom colors.",
"default": "#1c1a17"
},
{
"type": "color",
"id": "color_accent",
"label": "Accent (icons)",
"default": "#2e7556"
}
],
"blocks": [
{
"type": "item",
"name": "Reassurance",
"settings": [
{
"type": "select",
"id": "icon",
"label": "Icon",
"options": [
{ "value": "truck", "label": "Delivery truck" },
{ "value": "return", "label": "Return arrow" },
{ "value": "shield", "label": "Shield" },
{ "value": "leaf", "label": "Leaf" },
{ "value": "clock", "label": "Clock" },
{ "value": "star", "label": "Star" },
{ "value": "heart", "label": "Heart" },
{ "value": "globe", "label": "Globe" },
{ "value": "lock", "label": "Lock" },
{ "value": "sparkle", "label": "Sparkle" },
{ "value": "gift", "label": "Gift" },
{ "value": "chat", "label": "Chat bubble" }
],
"default": "truck"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Free express shipping"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Dispatched within 24 hours"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional. For example your shipping or refund policy."
}
]
}
],
"presets": [
{
"name": "EX · Trust strip",
"blocks": [
{
"type": "item",
"settings": {
"icon": "truck",
"title": "Free express shipping",
"subtitle": "Dispatched within 24 hours"
}
},
{
"type": "item",
"settings": {
"icon": "return",
"title": "60-day skin guarantee",
"subtitle": "Full refund, even if opened"
}
},
{
"type": "item",
"settings": {
"icon": "leaf",
"title": "Clean, vegan formulas",
"subtitle": "Tested on sensitive skin"
}
},
{
"type": "item",
"settings": {
"icon": "chat",
"title": "Real skin experts",
"subtitle": "Replies within 2 hours"
}
}
]
},
{
"name": "EX · Trust strip (dark)",
"settings": {
"color_scheme": "dark",
"color_accent": "#6fcf9f"
},
"blocks": [
{
"type": "item",
"settings": {
"icon": "truck",
"title": "Free express shipping",
"subtitle": "Dispatched within 24 hours"
}
},
{
"type": "item",
"settings": {
"icon": "return",
"title": "60-day skin guarantee",
"subtitle": "Full refund, even if opened"
}
},
{
"type": "item",
"settings": {
"icon": "shield",
"title": "Dermatologist tested",
"subtitle": "Safe for sensitive skin"
}
},
{
"type": "item",
"settings": {
"icon": "chat",
"title": "Real skin experts",
"subtitle": "Replies within 2 hours"
}
}
]
}
]
}
{% endschema %}
Why it converts
Shipping, returns and payment reassurance placed at decision points removes the doubts that stall a purchase.
Specs
About this section
Trust Strip is a free Shopify Online Store 2.0 section that answers the questions shoppers ask just before they buy: how fast it ships, whether they can return it, and whether checkout is safe. Each reassurance is a block with an icon chosen from twelve built-in line icons (truck, return arrow, shield, leaf, clock, star, heart, globe, lock, sparkle, gift, chat bubble), a title, a subtitle and an optional link such as your refund policy. On desktop the items sit in a row separated by fading hairlines, each icon inside a soft, solid or bare badge; the band can also run as a slow scrolling marquee. On mobile merchants choose a two-column grid or a marquee that keeps the band to a single line. An optional secure-checkout row shows a lock, a label and a note beside the payment icons Shopify outputs for the methods enabled in your store. When the strip scrolls into view, items rise in sequence, badges settle with a spring and each icon draws its own stroke once. The marquee pauses on hover, on keyboard focus, off screen and through a visible pause button. With reduced motion the entrance is skipped and the marquee becomes a still, swipeable row. Light, dark and custom color schemes, an accent color, item layout, dividers and padding are settings. The conversion principle is anxiety removal: reassurance shown next to the hero, the buy box or the footer answers objections before they become exits. It ships as one self-contained .liquid file with scoped CSS and JavaScript and no external assets.
Questions
Where do the payment icons come from?
From Shopify itself. The section loops over shop.enabled_payment_types and prints each method with the payment_type_svg_tag filter, so the icons always match the payment methods switched on in Settings › Payments. Turn off Show payment methods to hide the whole row.
Where should I place the Trust Strip?
At decision points: directly below the hero on the home page, under the buy box on product pages, on the cart page, or just above the footer. The section can be added to the footer group, and it works on home, product, collection, cart and custom page templates.
Is the scrolling marquee accessible?
Yes. The first copy of the items is a normal list for screen readers; the repeated copies that make the loop seamless are hidden from assistive technology and removed from the tab order. The marquee pauses on hover and keyboard focus, has a labelled pause button, stops when off screen, and becomes a still row when the visitor prefers reduced motion.
How do I change the icons and colors?
Each reassurance block has an Icon dropdown with twelve line icons. In the section settings choose Light or Dark, or Custom colors to set your own background and text, then pick an accent color for the icon badges and a Soft, Solid or Icon only style.
More sections
Pro