Add payment icons underneath buy now button - Dawn Theme

[PodfinAdmin]

Im using Dawn theme and im trying to add payment icons underneath the buy it now button

I have tried following the guide here but the icons are not showing

https://community.shopify.com/c/shopify-design/how-to-insert-shopify-payment-icons-below-quot-buy-it-now-quot/td-p/518969

I found the section i believe I need to add the code into based on the above and pasted the code after “{{ form | payment_button }}”

.methods-of-payment img { padding: 0.2em; } .lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }

Please help

[EcomRAZ]

Hi @PodfinAdmin ,

Have you uploaded the icons images in the files and assigned them right in the code?

[BSS-Commerce]

Hi @PodfinAdmin

It is important that you need to find the right file and the location of the button, For Dawn theme, please follow these steps:

1. Go to the file main-product.liquid

2. Ctrl Shift F “product-form__buttons”. Then, add 123 to that tag and SAVE again. Go back to storefront, F12 to check if the element is correct (a note that this is to check the correct file and the right location you want)

• Find the tag and add 123

• Check the storefront

3. Add the img tag to the place where you want

I hope that it will help you solve the issue.

[PodfinAdmin]

Thank you for taking the time to assist with this

I have followed the first two steps and added in the code as per the screenshots below however the icon is still not showing

[EcomRAZ]

Hi @PodfinAdmin ,

If you can give me access to website, I would be able to inspect the code and fix it for you.

Cheers

Technika

[BSS-Commerce]

Hi @PodfinAdmin

• First, please check to see if it has been added to your page. (Make sure you did step 2 correctly)

If it’s already added to your page, you can add the class to the img. tag

Next, you go to base.css, scroll to the bottom and add this code:

.bss-custome {
  width: 55px;
  height: 35px;
  display: inline-block;
  position: relative;
  opacity: 1;
  z-index: 10
}

Or you can change the position of the image you want and check it for sure.

I hope that it will work for you.