fbpx

Add 30% to your sales 💰 with upsells!Get App

Get 30% sales increase 💰 with upsells!Get App

How to Add Payment Option Icons to Cart & Checkout Pages

How to Add Payment Option Icons to Cart & Checkout Pages

How to add payment option icons to cart and checkout pages

If your Shopify store has a multitude of payment options, you’re more likely to make sales if people have the liberty to choose the payment method of their choice. 

So, how can you add the payment option icons, such as American Express, MasterCard, and Visa, to your checkout and cart pages? 

payment option

Adding payment options to cart and checkout Pages 

If you want to add more payment options to your cart and checkout pages, you’ll have to tweak the code. Go to the part of your theme where you want to show the icons and paste this code: 

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

Here’s how to do it: 

  • Go to the Online Stores section in your admin and click on Themes 
  • Choose the Theme and go to Actions 
  • Click on Edit Code 
  • Go to Sections. Select footer.liquid 
  • Look for the following code: 
{% for type in shop.enabled_payment_types %}
  • Replace it with this code: 
{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}

{% for type in enabled_payment_types %}
  • In this code, you can separate the payment providers by a comma, such as visa,master,american_express,paypal 
  • Lastly, click Save 

To learn more about the payment providers supported by Shopify, check your payment settings. 

How to remove PayPal from the payment options 

If you do not want to show the PayPal option (as PayPal is not operational in some countries so some vendors do not offer this payment method), you can remove its code from the theme.liquid. It will look something like this: 

{% if additional_checkout_buttons %}

  <div class="additional-checkout-buttons">

    {{ content_for_additional_checkout_buttons }}

  </div>

{% endif %}

Removing this section from the code will remove the PayPal icon from the payment methods. 

 

Related Posts
Leave a Reply