How to Add Payment Icons Under the Add to Cart Button in Shopify (No App Needed works for any theme)

Ever noticed how the big e-commerce stores always display those small, reassuring payment icons, Visa, Mastercard, PayPal, Apple Pay right below their “Add to Cart” button?
There’s a reason for that.
Those tiny icons do something powerful: they build instant trust. A customer who sees familiar payment logos at the point of purchase is far more likely to complete checkout than one who isn’t sure whether their preferred payment method is even accepted.

The good news? You don’t need an expensive app or a developer to add payment icons to your Shopify product page. With just a few steps inside the Shopify Theme Editor, you can place a custom set of payment method icons right below your Add to Cart button, in under 10 minutes.
In this guide, I’ll walk you through exactly how to do it, step by step.

Why Payment Icons Matter on Your Product Page?

Before we dive in, let’s quickly talk about why this matters for your store:

Reduces cart abandonment: Customers abandon carts when they’re unsure. Visible payment icons remove that doubt instantly.
Builds credibility: Recognized logos like Visa, PayPal, or Stripe signal that your store is legitimate and secure.
Improves conversion rate: Multiple studies show that displaying payment trust badges near CTAs (Call-to-Action buttons) increases purchase confidence and directly impacts conversions.
Zero cost: Unlike most trust badge apps that charge monthly fees, this method is completely free.

Now let’s get into it.

What You’ll Need?

Access to your Shopify admin panel
Your live or preferred Shopify theme (Optional)
Custom payment icon images if you want to replace the defaults

Step-by-Step: How to Add Payment Icons in Shopify

Step 1: Go to Your Shopify Theme Editor

Log in to your Shopify Admin dashboard.
From the left sidebar, click on Online Store.
Click on Themes.
Find the theme you want to edit (your live theme or a duplicate), and click the Customize button.

Pro Tip: Always test changes on a duplicate theme before editing your live store. Go to Actions → Duplicate to create a safe copy first.

Step 2: Navigate to the Product Page

Once inside the Theme Editor:

At the top center of the editor, click the dropdown menu (it usually says “Home page” by default).
From the list, select Products → Default product (or your product template name).

This will take you to the Product Page layout where you can see and edit all sections.

Step 3: Add a Custom Code Block

Now here’s where the magic happens.

In the left panel, look at the sections listed under the Product Information area.
Scroll down and click “Add block” (usually a + icon or a button at the bottom of the section).
From the list of available blocks, select “Custom Liquid” or “Custom Code” (the exact label depends on your theme).

Note: If you don’t see a “Custom Liquid” block option, your theme may not support it natively. In that case, you can add it directly through the theme code — but most modern Shopify themes (including Dawn and other free themes) include this block.

Once the custom code block appears, drag it to position it directly below the “Buy Buttons” block (which contains your Add to Cart button).

Step 4: Paste the Payment Icons Code

With your custom code block selected, you’ll see a text area in the left panel where you can enter your code.

Paste the following HTML/CSS code into that block:

html

<!-- Payment Icons Block -->
<div class="payment-icons-wrapper" style="text-align: center; margin-top: 12px;">
  <p style="font-size: 13px; color: #888; margin-bottom: 8px;">Secure & Trusted Checkout</p>
  <div class="payment-icons" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center;">

    <!-- Visa -->
    <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/payment_icons/visa.svg"
         alt="Visa" title="Visa" style="height: 28px; width: auto;" loading="lazy">

    <!-- Mastercard -->
    <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/payment_icons/master.svg"
         alt="Mastercard" title="Mastercard" style="height: 28px; width: auto;" loading="lazy">

    <!-- PayPal -->
    <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/payment_icons/paypal.svg"
         alt="PayPal" title="PayPal" style="height: 28px; width: auto;" loading="lazy">

    <!-- American Express -->
    <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/payment_icons/american_express.svg"
         alt="American Express" title="American Express" style="height: 28px; width: auto;" loading="lazy">

    <!-- Apple Pay -->
    <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/payment_icons/apple_pay.svg"
         alt="Apple Pay" title="Apple Pay" style="height: 28px; width: auto;" loading="lazy">

    <!-- Google Pay -->
    <img src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/payment_icons/google_pay.svg"
         alt="Google Pay" title="Google Pay" style="height: 28px; width: auto;" loading="lazy">

  </div>
</div>

Click Save in the top right corner of the Theme Editor.

That’s it! Preview your product page and you should now see the payment icons displayed neatly below the Add to Cart button.

Step 5: Preview and Publish

After saving, click the eye icon or use the Preview button to see your changes on the live-looking version of the store.
Check both desktop and mobile views using the device toggle at the bottom of the editor.
If everything looks good, you’re done! If you were editing a duplicate theme, go back to Themes → click Actions → Publish on your updated theme.

How to Change or Replace a Payment Icon

Want to use your own custom payment icons instead of the default ones? Easy — here’s how:

Upload Your Custom Icon to Shopify Files

From your Shopify Admin, go to Content → Files (or Settings → Files in older versions).
Click Upload files and upload your custom payment icon image (PNG or SVG recommended; keep it small — under 50KB).
Once uploaded, click on the file name or the copy icon to copy the file URL (it will look something like https://cdn.shopify.com/s/files/1/XXXX/XXXX/files/your-icon-name.png).

Replace the Icon URL in the Code

Go back to your Custom Code block in the Theme Editor and find the <img> tag for the icon you want to replace.

For example, to replace the Visa icon:

html

<!-- Replace this URL with your copied file URL -->
<img src="PASTE_YOUR_CDN_URL_HERE"
     alt="Visa" title="Visa" style="height: 28px; width: auto;" loading="lazy">

Simply swap out the src="..." value with the URL you copied from Shopify Files and save.

Best Practice: Keep all icons at a consistent height (28px–32px works great) so they align neatly on the page.

Want to Remove an Icon?

Simply delete the entire <img> line for the icon you don’t want. For example, if you don’t accept Apple Pay, just remove that <img> tag entirely from the block.

Final Result

Once set up, your product page will display a clean row of payment icons directly below the Add to Cart button — just like the big stores do. Customers will immediately recognize their preferred payment methods, feel more confident, and be more likely to complete their purchase.

Here’s a quick recap of what we did:

Step	Action
1	Open Shopify Theme Editor
2	Go to the Product Page template
3	Add a Custom Liquid / Custom Code block below Buy Buttons
4	Paste the payment icons HTML code
5	Save and preview
Bonus	Upload custom icons to Files and replace the src URL

Frequently Asked Questions

Q 1: Will this work on all Shopify themes? A: It works on most modern Shopify themes that support custom liquid blocks, including Dawn, Sense, Craft, and most premium themes. Older themes may require editing the theme code directly.

Q 2: Do I need to know how to code? A: No! You’re just copying and pasting pre-written code. No coding knowledge required.

Q 3: Will the icons slow down my page? A: No. The icons are tiny SVG files (just a few KB each), and using loading="lazy" ensures they don’t affect your page speed.

Q 4: What if I want to add a “Secure Checkout” badge instead of individual icons? A: You can replace the entire block with a single badge image by following the same process — upload to Files, copy the URL, and paste it into the custom block.

Wrapping Up

Adding payment icons to your Shopify product page is one of the simplest — and most effective — things you can do to increase buyer trust and boost conversions. It takes less than 10 minutes, costs nothing, and makes your store look more professional instantly.

If you found this guide helpful, feel free to share it with other Shopify store owners. And if you have any questions or run into any issues, drop them in the comments below — I’d be happy to help!

Looking for more Shopify tips like this? Browse our Shopify Tutorials section for step-by-step guides that help you grow your store without the tech headaches.