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:
<ul class="list list-payment" role="list">
{% assign enabled_payment_types = 'ideal,visa,maestro,master,american_express,bancontact' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>


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

[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. 

[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:

<ul class="list list-payment" role="list" style="margin-top:10px;">
       {% assign enabled_payment_types = 'ideal,visa,maestro,master,american_express,bancontact' | remove: ' ' | split: ',' %}
       {% for type in enabled_payment_types %}
          <li class="list-payment__item">
             {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
          </li>
       {%- endfor -%}
</ul>

Result: 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[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.