Adding the payment method icons underneath the "checkout" button

Highlighted
New Member
2 0 0

I know how to have the payment method icons show up in the footer, but its way down our screen.  I wanted to include the icons right underneath the ShopPay and PayPal buttons right on the cart page.  I found the code in the footer.liquid file that displays that:

 

<div class="grid__item one-half small--one-whole">
{% if section.settings.show_payment_icons %}
<div class="grid__item site-footer__payment-icons">
{% unless shop.enabled_payment_types == empty %}
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="payment-icons list--inline site-footer__icon-list">
{% for type in shop.enabled_payment_types %}
<li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{% endfor %}
</ul>
{% endunless %}
</div>
{% endif %}
</div>

 

But when I inserted this in my cart liquid file it did not display anything on the screen.  I am thinking it is because I am filling a footer class that does not get displayed on the cart screen.  Help?  

0 Likes
Highlighted
Shopify Staff
Shopify Staff
407 35 86

Hi, @Chrisbagups!

 

Julie here from Shopify Support.

 

It's great to hear that you've figured out how to add payment icons to your footer, and adding these to your cart page is a great idea and there are a couple of ways you can achieve this.

 

First, you could achieve this using custom code, as you're currently trying to do. While you're on the right track, we actually have a tutorial on how to add more checkout buttons to the cart page that I think you'll find pretty useful. Have you come across this help doc yet?

 

Another resource to help you with adding this through your theme's code is this forum post. In there, you'll some instructions from other merchants who have implemented this in their own themes. This should also be a useful resource to refer to. If you need further guidance following those particular instructions, free to reply to that post directly.

 

Aside from custom code, you could use an app like Free Trust Badge Master and Free Trust Badge. Both of these apps are easy to install and allow you to add payment icons and trust badges to your cart page and product pages. You can also customize the payment icons, choosing whether you'd like them to display in colour or black and white. If you're wanting to avoid custom code, then I highly recommend exploring these options.

 

I hope this guides you in the right direction! Let me know if you have any further questions. 

Julie | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes