How to Add Payment Icons on Shopify

Shoppers decide whether to trust a store in the few seconds before they click Add to cart. A shopper who can't see Visa, PayPal or Klarna on the page has to guess whether their way of paying is accepted, and some leave instead of finding out at checkout.

Payment icons answer that question on the page itself. A row of card and wallet logos under the Add to cart button shows the payment methods your store accepts, and the same row can repeat on the cart page, in the cart drawer and in the footer.

Here are the three ways to add payment icons to a Shopify store: with a Payment Icons app, from your theme settings, or with custom code.

What Are Payment Icons?

Payment icons are the logos of the payment methods a store accepts, such as Visa, Mastercard, American Express, PayPal, Apple Pay, Klarna and Afterpay, shown as a row of small badges. They're also called payment logos or payment badges.

A good row of payment icons includes:

• Only the methods you accept: Every logo in the row matches a payment method that works at your checkout.
• A short line of text: A line such as "Secure payment with" above the logos tells shoppers what the row means.
• The right size for the page: The logos are big enough to recognize on a phone, without pushing the Add to cart button out of view.
• The right places: The row shows where shoppers decide to buy, on the product page, the cart page and the cart drawer.

Payment icons don't change your checkout. They show shoppers in advance which payment methods they'll find there.

Where Should Payment Icons Go on a Shopify Store?

Put payment icons right under the Add to cart button on your product page first, since that's where shoppers decide to buy. Then repeat the same row in the places shoppers pass on the way to checkout.

• Product page: Under the Add to cart button, where the shopper is about to commit
• Cart drawer: Under the checkout button in the Vitals Cart Drawer app, so the logos are the last thing shoppers see before checkout
• Cart page: Next to the checkout button, for stores that send shoppers to a full cart page
• Footer: On every page of the store with your theme's own payment icons setting, as a quieter reminder

Shopify's checkout already shows the card logos you accept next to the card payment option, so you don't need to add payment icons there.

What's the Quickest Way to Add Payment Icons?

• Vitals - All in One App is the quickest way to add payment icons for most stores
• Vitals also offers 40+ apps, such as trust badges, product reviews and a cart drawer, in one subscription of $29.99/month, so you don't have to install and pay for each app separately

Here's how the three methods compare. If you'd rather weigh several trust apps against each other, see our list of the best trust badges apps for Shopify.

How to Add Payment Icons With a Payment Icons App?

Install the Vitals - All in One App, open its Payment Logos app and click Activate app. The payment icons then show on your product pages, and the steps below set which logos show, how they look and where they appear.

Step 1: Add Vitals to Your Shopify Store

Install the Vitals - All in One App from the Shopify App Store. The 7-day free trial includes the Vitals Payment Logos app.

Step 2: Confirm the Install in Shopify

Click Install to approve the store data Vitals uses. Shopify then takes you to the Vitals dashboard.

Step 3: Open Payment Logos

In the Vitals dashboard, find Payment Logos in the list of apps and click it.

Step 4: Activate Payment Logos

On the Payment Logos page, click Activate app to turn the payment icons on. The settings below have a live preview, with a switch between mobile and desktop.

Step 5: Choose a Logo Style

The Styles card shows two thumbnails. The first is Color, the default, with each logo in its brand colors on a white card. The second is Black, with every built-in logo in one solid color. With Black selected, Logo color in the Settings card changes that color to match your theme.

Step 6: Pick the Payment Methods You Accept

In the Logos card, click Select logos. The Add logos window holds 48 built-in logos, including Visa, Mastercard, American Express, Maestro, PayPal, Klarna and Afterpay. Toggle the logos you accept, click Save, then drag the selected logos into the order you want. Four or five logos fit best in one row.

Step 7: Add Your Own Payment Logo (Optional)

If you accept a local or regional payment method that isn't in the list, scroll to Custom logos in the same window. Click Upload image, paste an image URL and click Import, or click Choose from Shopify Files. You can add up to 10 custom logos, as .jpg, .png or .webp images up to 2 MB each.

Step 8: Set the Text, Size and Alignment

In the Settings card, write the line that shows above the logos in Text above the logos, such as "Secure payment with". Then set:

• Alignment: Left, center or right, with separate desktop and mobile values
• Logo size: How large each logo is, 40 px by default
• Text size: The size of the text above the logos
• Space between logos and Space between elements: The gaps inside the row
• Margin: The space around the row, with separate desktop and mobile values

Step 9: Choose Where the Icons Show on the Product Page

In the Position card, Location sets which part of the product page the icons attach to: Product description, Buy buttons section, Add to cart button or Product end section. Position then places the icons Above or Below that part. By default, the icons show after the product form. Pick Add to cart button and Below to put the icons right under the button.

Step 10: Add Payment Icons to the Cart Page, Footer and Other Pages

The automatic placement works on product pages only. To show the same payment icons on another page, add the Vitals Payment Logos block in the Shopify theme editor:

1. Click Customize next to your theme in Online Store → Themes
2. Open the cart page, or another page, from the page menu at the top
3. Click Add block in a section, then pick Payment Logos under Vitals
4. Drag the block next to the checkout button, then click Save

The block shows the same logos and text you set in Vitals. You can also add the block to the footer if your theme's footer accepts app blocks. Off the product page, the row is always centered.

Step 11: Show Payment Icons in the Cart Drawer

If you use the Vitals Cart Drawer app, open Cart Drawer, go to Payment logos and tick Show payment logos. Set Placement to Below the checkout button or Below the disclaimer text. The drawer shows the logos, text and alignment you picked in Payment Logos.

Step 12: Limit the Icons to Certain Products (Optional)

The icons show on every product by default. Expand Advanced display rules to show them only on products within a price, discount or inventory range, only on products you pick, or on every product except the products you exclude.

Step 13: Save and Test on Your Phone

Click Save, then open a product page on your phone and on desktop. Check that the icons show where you expect, that every logo matches a payment method at your checkout, and that the row doesn't push the Add to cart button down too far. Then check the cart page and the cart drawer too.

Step 14: Voila, Your Payment Icons Are Live on the Store

Your shoppers now see the payment methods you accept right under the Add to cart button, before they ever reach checkout.

How to Add Payment Icons From Your Theme Settings?

Most Shopify themes include a payment icons option in the footer. To check your theme's settings:

1. Click Customize next to your theme in Online Store → Themes
2. Click the Footer section in the left sidebar
3. Look for Show payment icons and tick the box, then click Save

The footer icons come from the payment methods turned on in Settings → Payments, so you can't choose which logos show, change their order or add a local payment method. Most themes show the icons in the footer only, not under the Add to cart button or on the cart page. If footer icons are all you need, the theme setting is enough on its own.

How to Add Payment Icons Without an App?

Hire a developer to add payment icons to your product page and cart page with Liquid and CSS. Shopify's Liquid can list the payment methods enabled on your store and output each one as an icon.

Custom payment icons usually involve:

1. Copying your theme first, so the live store isn't affected
2. Adding a snippet that outputs your store's payment icons, or your own logo images
3. Placing the snippet under the Add to cart button and next to the cart page's checkout button
4. Styling the row for size, spacing and alignment on mobile and desktop
5. Testing on every product template, then publishing the theme copy

Custom code means no extra app, but you or your developer have to maintain it. A theme update can replace the files the snippet is in, so the icons may need adding back after each update. A theme or third-party cart drawer needs its own code too.

How to Increase Trust With Payment Icons?

Payment icons build trust by answering "can I pay the way I want?" before the shopper reaches checkout. These settings help:

• Put the icons right under the Add to cart button. Shoppers see the logos at the moment they decide. Set Location to Add to cart button and Position to Below
• Show only the payment methods you accept. A logo that's missing at checkout costs more trust than it gains. Match Select logos to Settings → Payments in Shopify
• Show your buy now, pay later options. Shoppers who plan to split the payment look for Klarna or Afterpay. Add their logos in Select logos if your checkout offers them
• Add your local payment methods. Shoppers in some countries look for a local wallet or bank transfer logo. Upload the logo under Custom logos
• Add a short line above the logos. A line such as "Secure payment with" tells shoppers what the row means. Write it in Text above the logos
• Repeat the icons before checkout. Show the same row on the cart page with the Payment Logos block, and in the Vitals cart drawer with Show payment logos

Why Aren't My Payment Icons Showing or Working?

These are the usual causes when payment icons don't show:

• The icons don't show at all: Check that the app is activated, and that Advanced display rules don't exclude the product you're testing
• The icons show in the wrong spot: Change Location and Position in the Position card. On an Online Store 2.0 theme, you can add the Payment Logos block in the theme editor instead
• The icons show too far from the Add to cart button: Lower the top value under Margin, and under the mobile margin for phones
• The icons don't show on the cart page: Automatic placement is for product pages only. Add the Payment Logos block to the cart page in the theme editor
• The icons don't show in the cart drawer: Payment Logos shows in the Vitals Cart Drawer app only, not in your theme's cart drawer or another app's drawer. Tick Show payment logos in Cart Drawer
• The footer shows different icons: The footer icons come from your theme, not from Vitals. Change them in Settings → Payments, or turn them off in the theme's footer settings
• A custom logo doesn't change color: Logo color recolors the built-in logos only. Upload a version of your logo in the color you want
• An image URL won't import: The URL has to link straight to a .jpg, .png or .webp file up to 2 MB, not to a page that contains the image

Which Payment Icons Method Should You Choose?

Vitals - All in One App suits most stores, but the right method depends on where you want the icons and which logos you need.

• Choose Vitals - All in One App if you want payment icons on the product page, cart page and cart drawer, with your own choice of logos. It also includes 40+ other apps in one subscription of $29.99/month, so you don't have to install and pay for each app separately
• Choose your theme's setting if you only want payment icons in the footer, matching the payment methods in your Shopify settings
• Choose custom code if you'd rather add the icons by hand and keep them working through theme updates

Start a 7-day free trial: Install the Vitals - All in One App and add payment icons

Frequently Asked Questions

1. What is the best way to add payment icons on Shopify?

Vitals - All in One App is the best way for most stores. It adds payment icons under the Add to cart button without code, with 48 built-in logos and your own custom logos. The same icons can show on the cart page and in the cart drawer.

2. Does Shopify show payment icons automatically?

Shopify shows the card logos you accept at checkout. On your store pages, most themes can show payment icons in the footer once you tick Show payment icons in the footer settings, based on the payment methods in Settings → Payments. Shopify doesn't add payment icons to the product page on its own.

3. How do I add payment icons under the Add to cart button?

In the Vitals Payment Logos app, go to the Position card, set Location to Add to cart button and Position to Below, then click Save. On an Online Store 2.0 theme, you can also drag the Payment Logos block under the button in the theme editor.

4. Can I add a payment method that isn't in the list?

Yes. In the Vitals Payment Logos app, click Select logos and scroll to Custom logos. You can upload up to 10 of your own logos, as .jpg, .png or .webp images up to 2 MB each, or import a logo from an image URL.

5. How do I add payment icons to the Shopify footer?

Most themes include a footer option. Go to Online Store → Themes → Customize, click the Footer section and tick Show payment icons. If you want to pick the footer logos yourself, add the Vitals Payment Logos block to the footer, if your theme's footer accepts app blocks.

6. Can payment icons show in the cart drawer?

Yes, in the Vitals Cart Drawer app. Go to Cart Drawer → Payment logos, tick Show payment logos and choose Below the checkout button or Below the disclaimer text. Payment Logos can't show inside a theme's own cart drawer or another app's drawer.

7. Will payment icons slow down my store?

Every app adds some code to the page. Vitals loads all of its apps from one script, so turning on Payment Logos doesn't add a new script, while a single-purpose payment icons app loads its own script. We haven't speed-tested every setup, so check your own pages before and after a change.