How to Add Payment Icons on Shopify

Table of Contents

1. Introduction
2. Why Display Payment Icons?
3. Enabling Payment Icons in Your Footer
4. Editing the Code for Payment Icons
5. Addressing Common Issues
6. Conclusion
7. FAQ

Introduction

Imagine you're shopping online, ready to checkout, and then you can't see if your preferred payment method is recognized by the store. It's a bummer, right? Displaying payment icons prominently on your Shopify store instills confidence and trust in your buyers, enhancing their shopping experience and boosting your conversion rates.

In today's e-commerce world, these seemingly small details can have a huge impact. This post will guide you on how to add, remove, and customize payment icons on your Shopify store, ensuring that you provide clear payment options to your customers. By the end of this article, you'll know various methods to manage payment icons for all themes, including both free and paid versions.

Why Display Payment Icons?

Payment icons serve a significant role in your e-commerce store, as they:

1. Build Trust: Clearly showing accepted payment methods assures customers of their payment security.
2. Enhance User Experience: Visibility of familiar icons makes the checkout process smoother.
3. Improve Conversions: Transparent payment options can reduce cart abandonment rates.

Whether you’re using a free Shopify theme like Dawn or a customized paid theme, knowing how to tweak your payment icons can elevate your store’s credibility and efficiency.

Enabling Payment Icons in Your Footer

For Free Shopify Themes

1. Access Theme Editor:

   • Log in to your Shopify admin dashboard.
   • Navigate to Online Store > Themes.

2. Customize Your Theme:

   • Select Customize on the current theme.

3. Configure Footer:

   • Click on Footer on the left-hand menu.
   • Check the box titled Show payment icons.

4. Save Changes:

   • Click Save to apply the changes.

This straightforward method works perfectly for most Shopify-free themes. For customized themes, you might need to delve into the theme code.

Editing the Code for Payment Icons

For more control over the displayed icons, follow these steps to edit your theme’s code:

Step-by-Step Guide

1. Go to Theme Code:

   • From your Shopify dashboard, go to Online Store > Themes.
   • Click on Actions and select Edit code.

2. Locate the Footer File:

   • In the code editor, find the footer.liquid file under the Sections folder.

3. Modify the Code:

   • Look for the following line:

     {% for type in shop.enabled_payment_types %}
     

   • Replace it with:

     {% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}
     {% for type in enabled_payment_types %}
     

4. Edit or Add Payment Providers:

   • In the modified assign line, you can add or remove payment providers as per your requirement.

5. Save Your Changes:

   • Make sure to click Save to apply the edits.

Example Customization

If you want to include additional payment methods like Google Pay or Apple Pay, modify the list accordingly:

{% assign enabled_payment_types = 'visa,master,american_express,paypal,google_pay,apple_pay' | remove: ' ' | split: ',' %}

Addressing Common Issues

Payment Icons Not Showing Up

1. Check Enabled Payment Methods:

   • Make sure the payment methods are enabled in your store’s payment settings (Settings > Payments).

2. Theme Compatibility:

   • Some themes might not support automatic payment icon displays. In such cases, follow the code customization steps outlined earlier.

3. Contact Shopify Support:

   • If you’re using a Shopify-supported theme and still face issues, reach out to Shopify Support for specialized assistance.

Adding Icons Under the ‘Add to Cart’ Button

To display payment icons under the ‘Add to Cart’ button for a better user experience:

1. Access Theme Code:

   • Navigate to Online Store > Themes > Actions > Edit code.

2. Locate Product Template:

   • Open the product-template.liquid or similar file.

3. Insert Payment Icons Code:

   • Copy the <ul> list of payment icons from your footer.liquid file and paste it in the desired location under the Add to Cart button code.

4. Styling:

   • Use CSS to style the icons as per your theme’s design requirements.

Here’s a sample integration:

<div class="payment-icons">
  <ul class="list-payment">
    {% assign enabled_payment_types = 'visa,master,american_express,paypal,google_pay,apple_pay' | remove: ' ' | split: ',' %}
    {% for type in enabled_payment_types %}
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    {% endfor %}
  </ul>
</div>

Use CSS to ensure the icons align well and complement the overall design.

Conclusion

Adding and customizing payment icons on your Shopify store can significantly enhance your customers' purchasing experience. Whether you prefer going the simple route of enabling them in the theme editor or opting for more intricate code modifications, the improved visibility of your payment methods can build trust and potentially increase sales.

As you update your store, consider placing these icons strategically, such as in your footer or under key call-to-action buttons, to maximize their effectiveness. By making these small but impactful changes, you'll be well on your way to providing a seamless shopping experience.

FAQ

1. What if my theme doesn't support automatic payment icon display?

• In such cases, you will need to manually edit the footer.liquid or product-template.liquid files as discussed.

2. Can I add custom payment icons?

• Yes, you can upload custom SVG icons to your theme’s assets and reference them in your code.

3. Are these steps applicable to paid themes as well?

• Generally, yes, but always check your theme’s documentation as custom themes may have unique settings.

Enhance your Shopify store's trustworthiness by making the payment process transparent and straightforward. Happy selling!