What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Add Payment Options Under "Add to Cart" buttons

Solved

Add Payment Options Under "Add to Cart" buttons

MedsyCare
Excursionist
38 0 6

Hi there,

 

I'd like to add the payment options which is located in the footer to also be visible just under the "Add to Cart" buttons on both the Homepage and Product Page, as per screenshot below.

 

Please help?

 

Thank you.

001.jpg002.jpg

Accepted Solution (1)
PremierStores
Shopify Partner
285 28 52

This is an accepted solution.

Go to Themes, Actions->Edit code: At the sidebar scroll down and search the product-template file and paste the code below where you need (It changes depending on which theme are you using or if your theme was edited before)

<ul>
            {%- for type in shop.enabled_payment_types -%}
              <li>
                {{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}
              </li>
            {%- endfor -%}
</ul>
Let's make the best store!
Contact us at: thepremierstores@gmail.com

View solution in original post

Replies 9 (9)

PremierStores
Shopify Partner
285 28 52

Hi, @MedsyCare

It needs to edit HTML code on your theme, we can help you with this task, feel free to send us an email and we will respond ASAP.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
MedsyCare
Excursionist
38 0 6
Hi there,

Can you advise how I can add location of payment options please?

Thank you.
PremierStores
Shopify Partner
285 28 52

This is an accepted solution.

Go to Themes, Actions->Edit code: At the sidebar scroll down and search the product-template file and paste the code below where you need (It changes depending on which theme are you using or if your theme was edited before)

<ul>
            {%- for type in shop.enabled_payment_types -%}
              <li>
                {{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}
              </li>
            {%- endfor -%}
</ul>
Let's make the best store!
Contact us at: thepremierstores@gmail.com
MedsyCare
Excursionist
38 0 6
Sorted!
ecopointzero
Visitor
2 0 0

Hello,

Just following your instructions, and they are appearing however the icons aren't formatting quite right. Would you be able to assist in having them sitting horizontally without bullet points?

Thank you!!

 

Screen Shot 2021-04-12 at 2.24.59 pm.jpg

 

Natalie_Latched
Tourist
4 0 4

I am having the same issue with them displaying vertically with bullet points using this code:

 

<ul>
            {%- for type in shop.enabled_payment_types -%}
              <li>
                {{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}
              </li>
            {%- endfor -%}
</ul>

Was there any fix for this? 

PremierStores
Shopify Partner
285 28 52

Hi, @Natalie_Latched @ecopointzero 

The code may change according to the theme store.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
Otayfer
Excursionist
40 0 10

This works for me 👍🏻.

 

One Question though:

On Mobile the Icons are aligned Left, on Desktop they are aligned centred.

 

How can I make the List also aligned to the left on desktop?

 

Thank you 😃

martijn18
Excursionist
37 1 3

When I use this code it makes the list vertically aligned, how can I adjust it such that the payment icons are horizontally aligned?