Adding payment icons under add to cart button on all products

Store Design
, , ,

Topic summary

A user asks how to display payment icons below the “Add to Cart” button on product pages in the Dawn theme.

Initial Solution:

  • Add code to buy-buttons.liquid file using a Liquid snippet that loops through enabled payment types and renders SVG icons.

Alternative Method (for Dawn theme):
Since the buy-buttons.liquid file doesn’t exist in Dawn:

  • Navigate to Online Store > Themes > Customize
  • Open Default product template
  • Add a Custom Liquid block below Buy buttons
  • Insert the provided code snippet with payment type loop

Follow-up Questions:

  • One user asks how to edit which payment options display in the icons (wants to remove Union Pay and others)
  • Another user on Prestige theme reports the solution works but creates unwanted black dots on the icons

Both follow-up issues remain unresolved. The discussion demonstrates a working technical solution with implementation screenshots, though customization questions are still open.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hey guys when using the DAWN THEME how can i add the payment icons under the add to cart button on all my products as shown in the photo below ? Thanks in advance guyss

https://mauro-milan.nl/collections/bestsellers/products/roma-set-white

IMG_0345.jpeg
IMG_0345.jpeg1290Ă—2796 177 KB

2

Hi @Pietsharm93 ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the buy-buttons.liquid file.

3, Paste the code snippet provided below right below the product-form, then save your changes.


      {%- for type in shop.enabled_payment_types -%}
        - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
        
      {%- endfor -%}

Like this

BSSTekLabs_0-1722658584144.png
BSSTekLabs_0-1722658584144.png2878Ă—1618 304 KB

Here is the result

BSSTekLabs_1-1722658599633.png
BSSTekLabs_1-1722658599633.png2879Ă—1613 209 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

1 Like
3

Looks great brother but i don’t have such file “buy-buttons.liquid” not anywhere i have a file that starts with buttons, noted that i use the dawn theme ? Should i paste this in assets or theme.liquid possibly?

4

If you couldn’t find the buy-buttons.liquid file, I have another way for you to add the payment icons to the product page.

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Customize.

2, Locate and open the Default product template.

3, Add a Custom liquid block and drag it under the Buy buttons.

  1. Paste the code snippet provided below, then save your changes.

      {%- for type in shop.enabled_payment_types -%}
        - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
        
      {%- endfor -%}

BSSTekLabs_0-1722659612657.png
BSSTekLabs_0-1722659612657.png2878Ă—1612 428 KB

BSSTekLabs_1-1722659661137.png
BSSTekLabs_1-1722659661137.png2878Ă—1620 404 KB

BSSTekLabs_2-1722659697515.png
BSSTekLabs_2-1722659697515.png2878Ă—1620 448 KB

Here is the result

BSSTekLabs_0-1722661805214.png
BSSTekLabs_0-1722661805214.png1922Ă—1614 294 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

1 Like
5

This is really helpful, thanks. But how do I now edit the payment options within the image? We do not offer union pay or others. Thanks!

6

Hi there,
I’m using the Prestige theme and I implemented your suggestion right away. It worked, but there are several black dots appearing on the icons. Do you know how I can remove them?