How to add payment icons under the "add to cart" button in Shopify without any apps
Tags: webdev, shopify, tutorial, frontend
Published: 2023-10-01 16:00:00

In the world of e-commerce, even the smallest details can have a big impact. Payment icons, strategically placed below the add to cart button, can make a significant difference in building trust and enhancing the shopping experience for your customers. In this guide, I’ll show you how to easily add payment icons to your Shopify store, helping you build trust and boost conversions.

Shopify themes do have a setting in the theme editor that allows you to add payment icons. The problem is that those icons will be placed in the footer, and you can’t move them around.

In order to optimize your store’s conversion rate, it’s best to place those icons under the CTA (call-to-action) buttons, so they’re easily visible to buyers. **You can do this without installing any apps by copying the code from the footer and pasting it into a Custom Liquid block.** Let’s demonstrate!

In this example, I’ll be using Shopify’s default Dawn theme. The code may be different in other themes, but the process is the same. You don’t need to be a developer to do this:
1. Navigate to the footer
2. Hover over the payment icons
3. Right-click and press _Inspect_

This will bring up the browser developer tools, which will help us find the relevant snippet of code.

![a context menu including 'Inspect' option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qfxh9a404javvs5xyus.png)

If you don’t see any payment icons in the footer, you need to enable them through the theme editor. If it’s enabled and you still don’t see the icons, head over to Shopify’s payment settings and make sure your store is configured to accept payments.

![Shopify theme settings for Dawn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65jl10203g9posn984sn.png)

After pressing _Inspect_, you should see a DOM tree that contains a `<ul>` (unordered list) element with a **list-payment** class. This is the element that contains all the payment icons.

![Chrome DevTools showing the DOM tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fheuz2n9vbsgcf328ke.png)

Great. Now that we know what to search for, it’s time to have a look at the theme code. Go to your Shopify admin → Online Store → Themes and press the three dots on the right, then select _Edit code_.

![Shopify admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahjgrpi48yc6masjmmw0.png)

Search for **footer.liquid** and open the file. Use the Ctrl+F keyboard shortcut and search for the class name that we found earlier: **list-payment**. Copy the `<ul>` code and go back to the theme editor.

![Shopify's code editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnkfjjr6ufyird6khpbe.png)

Open the product page and add a _Custom Liquid_ block.

![Shopify's theme editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujyckm9wnuhw10uj8pms.png)

Paste the code we copied, and you’ll see the payment icons.

![code snippet in a Custom Liquid block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93qd52simlvx09y4n282.png)

Since this is a block, we can easily move it around. I placed mine just under the _Buy it now_ button. Lastly, I’ll add a CSS declaration to the `<ul>` element, which will center the icons: `style="justify-content: center;"`

![a CSS declaration highlighted in a Custom Liquid block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgwkas6qzv60mfmrl2lk.png)

Save your changes, and that’s it! Got any questions or feedback? Leave a comment!