Shopify Trust Badges: How to Add Them Without an App (Free Snippet)

Trust badges are the small payment and security icons you see under the Add to Cart button on most well-run Shopify stores — Visa, Mastercard, PayPal, Afterpay, Shop Pay. They exist to answer the quiet question every first-time visitor asks before they buy: is this store legit, and is my card safe here?

You don't need an app to add them. Most trust-badge apps charge $5–10 a month and load an external script to show a handful of icons. This guide gives you the same result for free: a single Liquid snippet with inline SVG icons, under 2KB, no external requests, no page-speed hit — and it works on any Online Store 2.0 theme, including Dawn.

Do trust badges actually work on Shopify?

Honest answer: modestly, and it depends on who's visiting. Trust badges don't create desire — they remove a reason to hesitate at the exact moment someone is deciding whether to commit. That makes them most useful when:

• Nobody's heard of you yet. A new or niche brand gets far more from badges than a store people already know.
• The price is high enough to make people pause. A $19 candle needs less reassurance than a $400 jacket.
• You accept a payment method the shopper prefers. Seeing Afterpay or PayPal under the button can be the difference for someone who won't enter card details on an unfamiliar site.

Because this version is free and weighs nothing, the maths is easy: add it, then watch your add-to-cart rate and checkout completion for a couple of weeks rather than assuming. If you want a fuller picture of what's holding conversions back, run a free Shopify store audit — trust signals are one of the things it checks.

Types of Shopify trust badges

"Trust badge" covers a few different things. Knowing which is which stops you cluttering the page with all of them.

• Payment icons — Visa, Mastercard, PayPal, Apple Pay, Shop Pay, Afterpay. The most useful kind, and what this snippet builds. Only show the methods you actually accept.
• Security badges — "Secure checkout", a padlock, SSL. Shopify's checkout is already PCI compliant and served over HTTPS, so a simple label is enough. Don't paste a Norton or McAfee seal you don't pay for; a badge that goes nowhere when clicked does the opposite of what you want.
• Guarantee badges — money-back guarantee, warranty, "100% authentic". Worth having if the claim is real and you honour it; hollow otherwise.
• Shipping and returns badges — free shipping over $X, 30-day returns, ships from Australia. Often more persuasive than payment icons for local stores. A free shipping progress bar does this job dynamically.

Where to put trust badges on a Shopify store

Placement matters more than design. In order of impact:

1. Directly under the Add to Cart button. This is the decision point and where almost all the value is. Everything below assumes you've done this first.
2. Next to the checkout button in the cart page or cart drawer — the second moment of commitment. Same snippet, different file (see below).
3. The footer. Low impact but expected. Most themes have a built-in "Show payment icons" toggle for this — no code needed.
4. Checkout. Shopify's checkout already shows accepted payment methods. Adding custom badges there requires Shopify Plus checkout customisation, and for most stores it isn't worth chasing.

What you'll build

• A row of payment trust icons (Visa, Mastercard, PayPal, Afterpay, Shop Pay)
• A "Secure payment" label above the icons
• Hover effects with smooth opacity transitions
• Fully customisable icon size, spacing, and opacity via CSS variables
• Inline SVG icons — under 2KB total, no external requests

The code

Here's the complete snippet. Copy it, paste it into a new file in your Shopify theme, and you're done.

{% comment %}
  Plynthr — Trust Badge Row
  https://plynthr.com/snippets/trust-badge-row/

  INSTALL:
  1. Create snippets/plynthr-trust-badges.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-trust-badges' -%} in your product form,
     after the Add to Cart button

  CUSTOMIZE:
  - --ptb-gap for spacing between icons
  - --ptb-size for icon size
  - Add or remove SVG icons below
{% endcomment %}

<style>
  :root {
    --ptb-gap: 8px;
    --ptb-size: 38px;
    --ptb-opacity: 0.65;
    --ptb-opacity-hover: 1;
    --ptb-label-color: #999;
  }

  .plynthr-trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ptb-gap);
    margin: 12px 0;
  }

  .plynthr-trust-badges__label {
    width: 100%;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ptb-label-color);
    margin-bottom: 2px;
  }

  .plynthr-trust-badges svg {
    width: var(--ptb-size);
    height: calc(var(--ptb-size) * 0.63);
    opacity: var(--ptb-opacity);
    transition: opacity 0.2s;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 4px 6px;
    background: #fff;
  }

  .plynthr-trust-badges svg:hover {
    opacity: var(--ptb-opacity-hover);
  }
</style>

<div class="plynthr-trust-badges">
  <span class="plynthr-trust-badges__label">Secure payment</span>

  <!-- Visa -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <path d="M19.5 21h-3l1.9-11.5h3L19.5 21zm11.8-11.2c-.6-.2-1.5-.5-2.7-.5-3 0-5.1 1.5-5.1 3.7 0 1.6 1.5 2.5 2.6 3.1 1.2.6 1.6.9 1.6 1.4 0 .8-.9 1.1-1.8 1.1-1.2 0-1.8-.2-2.8-.6l-.4-.2-.4 2.4c.7.3 2 .6 3.3.6 3.2 0 5.2-1.5 5.2-3.8 0-1.3-.8-2.2-2.5-3-1-.5-1.7-.9-1.7-1.4 0-.5.5-1 1.7-1 1 0 1.7.2 2.2.4l.3.1.5-2.3z" fill="#1A1F71"/>
  </svg>

  <!-- Mastercard -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <circle cx="19" cy="16" r="8" fill="#EB001B"/>
    <circle cx="29" cy="16" r="8" fill="#F79E1B"/>
    <path d="M24 10.3a8 8 0 010 11.4 8 8 0 000-11.4z" fill="#FF5F00"/>
  </svg>

  <!-- PayPal -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <path d="M18.5 24.5h-2.8l.2-1.2 2.1-13.3h3.5c2.4 0 4 1.2 3.6 3.5-.5 3-2.8 4.2-5.2 4.2h-1.6l-.8 6.8z" fill="#003087"/>
    <path d="M22.5 22.5h-2.8l.2-1.2 2.1-11.3h3.5c2.4 0 4 1.2 3.6 3.5-.5 3-2.8 4.2-5.2 4.2h-1.6l-.8 4.8z" fill="#0070E0"/>
  </svg>

  <!-- Afterpay -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#fff"/>
    <path d="M10 20.5l6-9h4l-6 9H10zm18 0l6-9h4l-6 9H28z" fill="#B2FCE4"/>
    <circle cx="21" cy="16" r="3.5" fill="#B2FCE4"/>
  </svg>

  <!-- Shop Pay -->
  <svg viewBox="0 0 48 32" fill="none">
    <rect width="48" height="32" rx="4" fill="#5A31F4"/>
    <path d="M14 14.5c.5-2 2.2-3 4.2-3h1.3c.3 0 .5.2.5.5l-.3 2c0 .2-.2.3-.4.3h-1.5c-.8 0-1.3.5-1.4 1.1l-.5 3c0 .2-.2.3-.4.3h-2c-.3 0-.5-.3-.4-.5l.9-3.7z" fill="#fff"/>
    <path d="M28 13h2.5l-2 8h-2l-.5-3.5L24 21h-2l2.5-8h2l.5 3.5L28 13z" fill="#fff"/>
  </svg>
</div>

You can also grab this from the Trust Badge Row snippet page, which has a one-click copy button.

Alternative: use Shopify's built-in payment icons

Shopify already knows which payment methods your store accepts, and it ships an official SVG for each one. The shop.enabled_payment_types object lists them, and the payment_type_svg_tag filter renders the icon. This is exactly what Dawn's footer "payment icons" setting uses under the hood.

If you'd rather show only what you accept and never maintain the list by hand, swap the hand-drawn SVGs in the snippet for this loop. The CSS above still applies, because it targets any svg inside the container:

<div class="plynthr-trust-badges">
  <span class="plynthr-trust-badges__label">Secure payment</span>
  {%- for type in shop.enabled_payment_types -%}
    {{ type | payment_type_svg_tag: class: 'plynthr-trust-badges__icon' }}
  {%- endfor -%}
</div>

Which should you use? The built-in loop is zero-maintenance and always accurate — if you switch on Apple Pay tomorrow, the icon appears by itself. The hand-drawn version gives you full control over which icons show and in what order, and lets you add non-payment badges (a returns or guarantee icon) alongside them. Either way you're adding no external scripts.

Installation

1. In your Shopify admin, go to Online Store → Themes → Edit Code
2. Under Snippets, click "Add a new snippet" and name it plynthr-trust-badges
3. Paste the code above and hit Save
4. Open your product template — usually sections/main-product.liquid
5. Find the Add to Cart button (search for button or add to cart)
6. Add {%- render 'plynthr-trust-badges' -%} directly after the button's closing tag
7. Save and preview a product page

No-code alternative: Custom Liquid block

If you'd rather not edit main-product.liquid, do steps 1–3 above, then open the theme editor (Customize), go to a product page, and in the Product information section click Add block → Custom Liquid. Paste {% render 'plynthr-trust-badges' %} into the block and drag it to sit just below the Buy buttons block. This works in Dawn and every other OS 2.0 theme, and survives theme updates better than editing the section file directly.

Adding trust badges to the cart page or cart drawer

Same snippet, different location. In Dawn, open sections/main-cart-footer.liquid (cart page) or snippets/cart-drawer.liquid (drawer) and add {%- render 'plynthr-trust-badges' -%} just below the checkout button. Other themes name these files differently — search for checkout in the theme code and you'll find the button quickly.

Customisation

All the visual properties are controlled by CSS custom properties (variables) in the :root block. Here's what you can change:

• --ptb-gap — Space between icons (default: 8px)
• --ptb-size — Icon width (default: 38px — try 44px for larger icons)
• --ptb-opacity — Default icon opacity (default: 0.65)
• --ptb-opacity-hover — Hover opacity (default: 1)
• --ptb-label-color — "Secure payment" text colour (default: #999)
• Add or remove SVG blocks to match your actual accepted payment methods

Trust badge app vs. a free snippet

When does an app make sense? If you want a large library of pre-designed guarantee and shipping badges, built-in A/B testing, or you're not comfortable touching theme code at all. For payment icons under the button — which is 90% of what people install these apps for — the snippet does the same job for nothing.

Mistakes to avoid

• Showing payment methods you don't accept. A shopper who chooses Afterpay at checkout and can't find it will abandon. Use the built-in loop if you're not sure.
• Fake security seals. Norton, McAfee and "TrustedSite" badges belong to paid services. A seal that doesn't verify when clicked reads as a scam signal.
• Too many badges. Five payment icons and one label is plenty. A wall of guarantees looks anxious, not trustworthy.
• Badges louder than the button. Full-colour, oversized icons pull the eye away from Add to Cart. Keep them muted — that's why the default opacity is 0.65.
• Placing them above the button. Badges answer a question the shopper asks while deciding. Below the button, not above it.
• Not checking mobile. Most Shopify traffic is on a phone. The snippet wraps to a second row automatically, but confirm it looks right at 375px wide.

Troubleshooting

Icons not showing on product page: Make sure you're editing the correct file. On Dawn-based themes, the product form is in sections/main-product.liquid. On older or custom themes, it might be in templates/product.liquid or a product section file. If you used a Custom Liquid block, check the snippet name matches exactly — plynthr-trust-badges, no .liquid extension in the render tag.

Icons look too big or too small: Adjust the --ptb-size variable. The height is automatically calculated at 63% of the width to maintain the correct card aspect ratio.

Want to remove the "Secure payment" label: Delete the <span class="plynthr-trust-badges__label"> line from the HTML.

Need to add Apple Pay or Google Pay: Either switch to the enabled_payment_types loop above (they'll appear automatically once enabled in your payment settings), or copy one of the existing SVG blocks and replace the path data. You can find free payment SVGs on simpleicons.org.

Frequently asked questions