Solved

Payment Icons Under Add to Cart in Product Page

StoreHelpNeeded
Excursionist
38 0 10

Hello guys,

 

Can you help me add payment icons as they are in my footer under the add to cart button on my product page? I only want those to appear centered under the button: Visa, Mastercard, Amex, Apple Pay, Google Pay & Shopify Pay.

 

Website: shopcutify.com/blender

 

Thank you! Any help is appreciated!!

Accepted Solution (1)
BSSCommerce-HDL
Shopify Expert
726 240 251

This is an accepted solution.

Hi @StoreHelpNeeded
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid

Step 3: Insert the below code to file -> Save

{% if template.name == 'product' %}
<script>
   let orginal_payment = document.querySelector('.inline-list.payment-icons.site-footer__payment-icons');
   let atc = document.querySelector('button[type="submit"][name="add"]');
   if(orginal_payment && atc) {
      let clone_payment = orginal_payment.cloneNode(true);
      atc.insertAdjacentElement('afterend', clone_payment);
   }
</script>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 8 (8)

BSSCommerce-HDL
Shopify Expert
726 240 251

Hi @StoreHelpNeeded

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716308769985.png

 

Step 2: Search file theme.liquid

BSSTechVenture_1-1716308778946.png

 

Step 3: Insert the below code to file -> Save

{% if template.name == 'product' %}
<script>
   let orginal_payment = document.querySelector('.inline-list.payment-icons.site-footer__payment-icons');
   let atc = document.querySelector('.new-form-atc.addCart');
   if(orginal_payment && atc) {
      let clone_payment = orginal_payment.cloneNode(true);
      atc.insertAdjacentElement('afterend', clone_payment);
   }
</script>
{% endif %}

Here is result: 

BSSTechVenture_2-1716308920617.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
StoreHelpNeeded
Excursionist
38 0 10

Can you please tell me where exactly I need to paste it? I am not getting the same results as you. At the bottom of the theme.liquid page?

Thank you

BSSCommerce-HDL
Shopify Expert
726 240 251

Hi @StoreHelpNeededCan you kindly share the details theme.liquid of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Noavi24
Tourist
3 0 0

Please, can you inform where exactly this code script should be paste on the file theme.liquid? At the very end of the page? 

BSSCommerce-HDL
Shopify Expert
726 240 251

Hi @Noavi24, Paste it before the close body tag  </body>

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Noavi24
Tourist
3 0 0

It worked but it is not centralized below the add to cart bottom.

BSSCommerce-HDL
Shopify Expert
726 240 251

Hi @Noavi24Can you kindly share the details of your problem and store link with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-HDL
Shopify Expert
726 240 251

This is an accepted solution.

Hi @StoreHelpNeeded
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid

Step 3: Insert the below code to file -> Save

{% if template.name == 'product' %}
<script>
   let orginal_payment = document.querySelector('.inline-list.payment-icons.site-footer__payment-icons');
   let atc = document.querySelector('button[type="submit"][name="add"]');
   if(orginal_payment && atc) {
      let clone_payment = orginal_payment.cloneNode(true);
      atc.insertAdjacentElement('afterend', clone_payment);
   }
</script>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency