FreeBeginner

Trust Badge Row

Payment trust icons displayed below Add to Cart. Supports Visa, Mastercard, PayPal, Afterpay, and more. Lightweight SVG icons with no external dependencies. New to this? Read the full guide to adding Shopify trust badges without an app — placement, the built-in payment-icon alternative, and mistakes to avoid.

Category: Conversion Compatibility: All OS 2.0 Themes Updated: Sep 2026

snippets/plynthr-trust-badges.liquid

{% 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>

Installation

In your Shopify admin, go to Online Store → Themes → Edit Code
Under Snippets, click "Add a new snippet"
Name it plynthr-trust-badges
Paste the code above and save
Open your product template (e.g., sections/main-product.liquid)
Add {%- render 'plynthr-trust-badges' -%} after the Add to Cart button
Save and preview your store

Customization

--ptb-gap — Space between icons (default: 8px)
--ptb-size — Icon width (default: 38px)
--ptb-opacity — Default icon opacity (default: 0.65)
--ptb-label-color — "Secure payment" label color
Add or remove SVG blocks to match your accepted payment methods

Want your whole store dialled in?

Snippets fix one thing at a time. Want your whole Shopify store audited and tuned — speed, SEO, conversion? Get a free audit in about 60 seconds, or work with me directly.

Run your free store audit →

✓ Speed, SEO & mobile✓ Results in ~60s✓ No signup

FAQ

Can I add more payment icons?

Yes. Copy any SVG icon block and add it inside the .plynthr-trust-badges div. You can find free payment SVGs on sites like simpleicons.org.

Can I remove the 'Secure payment' label?

Yes. Delete the <span class="plynthr-trust-badges__label"> line.

Will this slow down my store?

No. The icons are inline SVGs — no external requests, no image files to load. Total size is under 2KB.

Trust Badge Row

Installation

Customization

Want your whole store dialled in?

FAQ

Related Snippets