Add payment icons underneath checkout button on cart page

[YordiMNL]

Hello there,

How do I add the payment icons underneath the checkout button on my cart page?
I use the dawn theme.

This is the code I’ve added in my footer which I also want to add underneath my checkout button:

{% assign enabled_payment_types = 'ideal,visa,maestro,master,american_express,bancontact' | remove: ' ' | split: ',' %} {% for type in enabled_payment_types %}
• {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}

Kind regards,

Yordi

[suyash1]

@YordiMNL - you can add it in cart.liquid page

[YordiMNL]

Thanks for your response @suyash1

But where exactly?

[suyash1]

@YordiMNL - you will need to check the liquid code for the checkout code, then you can put your code after it

checkout code most probably would be the button code

[GemPages]

Hello @YordiMNL

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you:

1. Go to Online Store → Theme → Edit code:

2. Open your Sections/main-cart-footer.liquid theme file

3. Find line 65 and added code after:

       {% assign enabled_payment_types = 'ideal,visa,maestro,master,american_express,bancontact' | remove: ' ' | split: ',' %}
       {% for type in enabled_payment_types %}
          - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
          
       {%- endfor -%}

Result:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[YordiMNL]

@suyash1

I’m not technical. If you can kindly give some specific place where I add this code.

I’ve tried it under multiple buttons in the checkout-drawer.liquid file but nothings seems to change.

[suyash1]

@YordiMNL - try solution given by @GemPages - if you just can not do it then please let me know, I can try it and provide you the result.

[YordiMNL]

@GemPages

Thank your very much for the information, it worked!

But how to increase the spacing between the payment icons and the button?

[GemPages]

@YordiMNL

I added a css ‘margin top: 10px’ in your code
You can change it with a suitable number

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[seasonmusthaves]

Hi, I also entered the code but it does not work. Do you have any ideas why it doesn’t ?

[greenvalleycode]

This should be the accepted solution. Thank you.