Shopify trust badges
without an app.
Trust signals below the add to cart button reduce checkout hesitation. Most stores add a paid app to get them. This fix delivers icon + text trust badges with a single Liquid snippet. It works without a paid app, image uploads, or JavaScript.
The code
One file. Remove any badges you don't need, or update the label text.
{% comment %}
Jelonyx · Trust Badges : no app required
Compatible with Dawn 12+, Horizon, and most Online Store 2.0 themes
Source: jelonyx.com/shopify/no-app/trust-badges
{% endcomment %}
{%- comment -%}
Remove any <li> blocks for badges that don't apply to your store.
To change a label, edit the text inside <span class="jlx-tb__label">.
To add a custom badge, copy any <li> block and replace the SVG and label.
{%- endcomment -%}
<ul class="jlx-tb" role="list">
<li class="jlx-tb__item">
<span class="jlx-tb__icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<rect x="5" y="8" width="8" height="7" rx="1" stroke="currentColor" stroke-width="1.4"/>
<path d="M6.5 8V6a2.5 2.5 0 0 1 5 0v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<circle cx="9" cy="11.5" r=".75" fill="currentColor"/>
</svg>
</span>
<span class="jlx-tb__label">Secure checkout</span>
</li>
<li class="jlx-tb__item">
<span class="jlx-tb__icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M9 2L3.5 4.75v4C3.5 12.1 5.9 14.9 9 16.25c3.1-1.35 5.5-4.15 5.5-7.5v-4L9 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
<path d="M6.5 9l1.75 1.75L11.5 7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="jlx-tb__label">Money-back guarantee</span>
</li>
<li class="jlx-tb__item">
<span class="jlx-tb__icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<rect x="1.5" y="6" width="11" height="7" rx="1" stroke="currentColor" stroke-width="1.4"/>
<path d="M12.5 8.5H14a1 1 0 0 1 .87.5l1.13 1.95V13h-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="4.5" cy="13" r="1.5" stroke="currentColor" stroke-width="1.4"/>
<circle cx="13.5" cy="13" r="1.5" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span>
<span class="jlx-tb__label">Free shipping</span>
</li>
<li class="jlx-tb__item">
<span class="jlx-tb__icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M3.5 9A5.5 5.5 0 0 1 14 5.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<path d="M14.5 9A5.5 5.5 0 0 1 4 12.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<path d="M11.5 5h3v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.5 13H3.5v-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="jlx-tb__label">Easy returns</span>
</li>
</ul>
<style>
.jlx-tb {
list-style: none;
margin: 16px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
display: flex;
flex-wrap: wrap;
gap: 12px 0;
}
.jlx-tb__item {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 50%;
min-width: 0;
padding-right: 12px;
}
.jlx-tb__icon {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--color-foreground, #1a1a1a);
opacity: 0.45;
}
.jlx-tb__label {
font-size: 12px;
font-family: inherit;
line-height: 1.3;
color: var(--color-foreground, #1a1a1a);
opacity: 0.65;
}
@media (min-width: 640px) {
.jlx-tb__item { flex: 1 1 25%; }
}
</style>How to install
- 01Open your theme code editor.
In Shopify Admin, go to Online Store → Themes. On your active theme, click the three-dot menu and select Edit code.
- 02Create a new snippet.
Under the Snippets folder, click Add a new snippet. Name it
jlx-trust-badgesand click Done. - 03Paste the code and customise your badges.
Delete any placeholder content and paste the entire code block above. Remove any
<li>blocks for badges that don't apply to your store, and update the label text inside each<span class="jlx-tb__label">to match your offer. Save the file. - 04Add the render tag via the theme customizer.
In Shopify Admin, go to Online Store → Themes → Customize. Navigate to a product page. Click on the product information section in the left panel, then click Add block → Custom Liquid. Enter the following, then drag the block to just below the Buy buttons block. Save.
{% render 'jlx-trust-badges' %}Alternatively, open
sections/main-product.liquidin the code editor. Find{% render 'product-form' %}and add the render tag on the line directly after it. - 05Test on a product page.
Open any product page. The trust badges should appear in a row just below the add to cart button (two columns on mobile, four across on wider screens).
How it works
The snippet renders a semantic <ul> list. Each badge is a <li> containing an inline SVG icon and a text label. Everything renders from the Liquid file itself without images, icon fonts, or external requests.
Layout is handled with flex-wrap. Each badge item uses flex: 1 1 50% so two badges sit side-by-side on narrow screens. At 640px and above, the basis switches to 25% to spread all four badges across one row.
The icons use currentColor for their stroke, so they automatically inherit your theme's foreground colour. The --color-foreground and --color-border CSS variables control the text and top separator line respectively. These are the same variables used by Dawn and Horizon, so the badges blend in without any colour edits.
Customising the badges
The snippet ships with four badges: Secure checkout, Money-back guarantee, Free shipping, and Easy returns. Delete any <li> block to remove a badge, or update the label text to match your store's specific offer (e.g. “Ships in 24 hours” or “Lifetime warranty”).
To add a custom badge with your own icon, copy any existing <li> block and replace the SVG path data with your own. The icon SVG should be 18×18 with stroke="currentColor" so it inherits the theme colour. Keep aria-hidden="true" on the icon wrapper. The label text provides the accessible name.
If you use three badges instead of four, set .jlx-tb__item { flex: 1 1 33%; } in the CSS so they share the row evenly on desktop. For two badges, use 50%.
Compatibility
Tested against Dawn 12+ and Horizon. Both themes define --color-foreground and --color-border, which the snippet reads for icon colour, text colour, and the separator line so the badges match your store's colours without any CSS changes.
On themes that do not define these CSS variables, the snippet falls back to neutral values: dark text on a white background with a light grey border. You can override the .jlx-tb, .jlx-tb__icon, and .jlx-tb__label classes in the snippet CSS to hard-code your colours if needed.
The snippet uses no JavaScript, no external fonts, and no image assets. It will render correctly in any browser that supports flexbox, which covers all browsers used by Shopify storefront visitors.
Limitations
- directly in the snippet file. Editing them requires access to the theme code editor. If you need non-technical team members to manage badge content from the Shopify customizer, a section schema with settings is the cleaner approach. That is a more involved build.
- All products get the same badges: the snippet renders identically on every product page it is placed on. If you need product-specific trust signals (e.g. different badges for food vs apparel), you would need to add Liquid conditionals based on product tags or type, or use separate snippets per product template.
- Headless storefronts: this is a Liquid snippet and does not apply to Hydrogen or other headless setups.
Need this installed?
If you would rather not edit theme code, we can install and style the trust badges for your store. We will provide a custom icon set, match colours to your brand, and write labels for your specific offer.