Displaying Custom Payment Icons on Shopify: A Community-Backed Guide

Hey there, fellow store owners! Let's talk about something that often comes up in our community discussions: displaying payment icons for third-party gateways. It's a common scenario, especially for those of us in regions where Shopify's native payment options might not cover all the local providers our customers prefer. One of our community members, Geronim0, recently highlighted this exact challenge, and the thread that followed offered some fantastic, practical solutions we can all learn from.

Geronim0 was using a third-party payment gateway and noticed that Shopify's built-in payment icon block in their purchased theme was coming up empty. This makes perfect sense when you think about it: Shopify's default block usually pulls from shop.enabled_payment_types, which is tied directly to the payment providers you've enabled through Shopify Payments or official integrations. If you're using something custom or local, it won't show up there automatically, as Daniel_Jude insightfully pointed out in the discussion.

The Community's Go-To Solution: Custom Liquid Blocks

The consensus from experts like Daniel_Jude and Ploqo in the thread points to using Shopify's flexible Custom Liquid blocks. This approach gives you full control to display exactly what you need, where you need it, without fighting against the theme's default logic.

Step 1: Get Your Payment Icons Ready

First things first, you'll need the actual image files for your payment providers. Make sure they're clear, appropriately sized (a height of 32px is a good starting point as suggested in the thread), and saved with simple, descriptive names (e.g., mcb-juice.png, my-t-money.png, local-pay.png).

1. In your Shopify admin, navigate to Content > Files.
2. Click the Upload files button (or Files at the top right, depending on your admin version) and upload each of your payment logo images. Keep those simple file names in mind – they'll be used in your code!

Step 2: Adding Icons to Your Footer

Now, let's get those icons into your footer. This is where the Custom Liquid block shines.

3. From your Shopify admin, go to Online Store > Themes.
4. Find your current theme and click Customize.
5. In the theme editor, scroll down to the Footer section in the left sidebar.
6. Click Add section within the Footer, then search for and select Custom Liquid.
7. In the Liquid code box, paste the following code. Remember to replace 'mcb-juice.png', 'my-t-money.png', and 'local-pay.png' with the exact file names of the logos you uploaded.

This code uses CSS display:flex to arrange your logos neatly side-by-side, flex-wrap:wrap for responsiveness on smaller screens, and justify-content:center to keep them centered. The gap:12px adds a nice space between them, and height:32px;width:auto; ensures they're uniformly sized without distortion. The file_url filter is crucial here, as it generates the correct URL for your uploaded images.

7. Click Save.

You should now see your custom payment icons displayed nicely in your footer!

Step 3: Adding Icons to Your Product Page (with Spacing Refinement)

Adding the icons to your product page follows a similar process, but we'll incorporate a clever spacing tweak that Ploqo shared to perfectly match your theme's existing layout, like the gap between your "Buy now" and "Add to cart" buttons.

8. In the theme editor, use the dropdown at the top to switch to Products > Default product.
9. In the left sidebar, open the Product information section, then under Details, click Add block.
10. Search for and select Custom Liquid.
11. Now, paste this slightly modified code into the Liquid code box. Again, update the image file names to yours.

This version includes a