Adding payment option icons, such as visa and mastercard on to cart & checkout pages

Solved
Highlighted
Tourist
11 0 2

Currently our site only has the 'Paypal' icon at the bottom left of the cart page:

https://www.norvegr.com/cart

I would like to add icons for 'Visa, Mastercard, American Express'

I took a look at this:

https://help.shopify.com/en/themes/customization/store/add-credit-card-icons

And searched for the word 'payment' in the following files:

theme.liquid

cart.liquid

icon-cart.liquid

cart-template.liquid

and couldn't find anything!

 

My question is how do we add these icons to both the cart page, and all of the checkout pages?

 

Many thanks!

0 Likes
Highlighted
Shopify Expert
667 170 234

This is an accepted solution.

Hi @sylvie_n 

You can just include this code in theme part where you want to show the icons 

              <ul class="payment-icons list--inline site-footer__icon-list">
                {% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}
                  {% for type in enabled_payment_types %}
                  <li class="payment-icon">
                    {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                  </li>
                {% endfor %}
              </ul>
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
Highlighted
Tourist
11 0 2

Fantastic - thank you!!

Do you know how I get rid of the big orange 'Paypal' button that appears on the bottom left of https://www.norvegr.com/cart?

Highlighted
Shopify Expert
667 170 234

This is an accepted solution.

Search for additional_checkout_buttons in cart.liquid file.

Probably looks something like:

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

So you can just remove that part.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
Highlighted
New Member
1 0 0

Adding that code shows like attached. can you pls suggest?Screen Shot 2019-12-16 at 6.52.06 PM.png

0 Likes
Highlighted

Thank you for the information. Added another payment icons on this site myrrhshop.

0 Likes
Highlighted
New Member
12 0 0
Can you please tell me which payment gateway are you using
0 Likes
Highlighted
Tourist
3 0 0

Hi , i have the same issue 

where we need to add the code??

0 Likes
Highlighted
New Member
4 0 0

Where, exactly, in the code does this part fit?

0 Likes
Highlighted
Explorer
61 1 14

@OTM Hi, is this applicable for all themes? Thanks

0 Likes