DEV Community

Cover image for How to add payment icons under the "add to cart" button in Shopify without any apps

Posted on • Updated on • Originally published at Medium

How to add payment icons under the "add to cart" button in Shopify without any apps

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

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

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

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

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

Open the product page and add a Custom Liquid block.

Shopify's theme editor

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

code snippet in a Custom Liquid block

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

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

Top comments (0)