How to Add Payment Icons to Your Shopify Store Footer

Published on Jun 4, 2024

By Aisha Patel

#Shopify#E-commerce#Web Development
Free stock photo of attractive, beautiful, black

In the world of e-commerce, building trust with your customers is paramount. One simple yet effective way to do this is by displaying payment icons in your store’s footer. These icons not only inform customers about the payment methods you accept but also lend credibility to your business. If you’re a Shopify store owner looking to add payment icons to your footer, you’ve come to the right place. This guide will walk you through the process, troubleshoot common issues, and provide alternative solutions.

Understanding Payment Icons in Shopify Themes

What Are Payment Icons?

Payment icons are small visual representations of the payment methods your store accepts. They typically include logos of credit card companies, digital wallets, and other payment providers.

Why Are They Important?

Displaying payment icons can:

  • Increase customer trust
  • Improve conversion rates
  • Provide a better user experience

How Shopify Handles Payment Icons

Most Shopify themes, especially free ones, are designed to automatically display payment icons based on your store’s payment settings. This means that when you enable a payment method in your Shopify admin, the corresponding icon should appear in your footer without any additional configuration.

Adding Payment Icons to Your Shopify Footer

Method 1: Using Theme Settings (Recommended)

For most Shopify themes, adding payment icons is as simple as toggling a setting:

  1. Go to your Shopify admin
  2. Navigate to “Online Store” > “Themes”
  3. Click “Customize” on your active theme
  4. Find the “Footer” section
  5. Look for an option like “Show payment icons”
  6. Enable this option

If you don’t see the icons after enabling this setting, ensure that you have payment methods activated in your Shopify payments settings.

Method 2: Editing Theme Code

If the above method doesn’t work, you may need to edit your theme’s code:

  1. In your Shopify admin, go to “Online Store” > “Themes”
  2. Click “Actions” > “Edit code” on your active theme
  3. Look for a file named “footer.liquid”
  4. Add the following code where you want the icons to appear:
{% if shop.enabled_payment_types.size > 0 %}
  <ul class="payment-icons">
    {% for type in shop.enabled_payment_types %}
      <li>
        {{ type | payment_type_svg_tag: class: 'icon' }}
      </li>
    {% endfor %}
  </ul>
{% endif %}
  1. Save the changes

This code will display icons for all enabled payment methods in your store.

Troubleshooting Common Issues

Icons Not Appearing

If you’ve followed the above steps and still don’t see the icons, consider these potential issues:

1. Theme Compatibility

Some older or heavily customized themes may not support automatic payment icon display. In this case, you might need to use a third-party app or manually add SVG icons.

2. Payment Provider Limitations

Certain payment providers, especially local or less common ones, may not have icons available in Shopify’s system. For example, if you’re using a provider like QuickPay, you might need to add its icon manually.

3. Caching Issues

Sometimes, changes don’t appear immediately due to caching. Try hard refreshing your browser or viewing your store in an incognito window.

Alternative Solutions

Using Shopify Apps

If you’re not comfortable editing code or want more customization options, consider using a Shopify app. There are several apps available in the Shopify App Store that allow you to add and customize payment icons easily.

Manual Icon Addition

For complete control over your payment icons:

  1. Obtain SVG files for the payment methods you want to display
  2. Upload these SVGs to your theme’s assets
  3. Edit your theme’s footer.liquid file to include these custom icons

This method requires more technical skill but offers the most flexibility.

Best Practices for Payment Icon Display

Keep It Relevant

Only display icons for payment methods you actually accept. Misleading customers can lead to frustration and lost sales.

Maintain Consistency

Ensure that the icons match your store’s overall design aesthetic. Consider factors like size, color, and placement.

Update Regularly

As you add or remove payment methods, make sure to update your footer icons accordingly.

By following this guide, you should be able to successfully add payment icons to your Shopify store’s footer. Remember, these small visual cues can significantly impact your store’s credibility and conversion rates. If you encounter any issues, don’t hesitate to reach out to Shopify support or consult with a Shopify expert for personalized assistance.

Take Our Quick Quiz:

Which primary product image do you think has the highest conversion rate?