Choose which payment icons to display

Caution

Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free vintage themes don't receive updates except security fixes.

Note

If you use a free theme from Shopify, then you can contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. Learn more about the Shopify Design Policy.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

All free Shopify themes include the option to display payment icons in your footer. The icons that show are determined by your store's payment settings and the customer's region and currency. You can enable payment icons in the theme editor. If you want to add or remove payment icons without changing your payment settings, then you can do so by editing your theme code.

Enable payment icons in your footer

The first step of the customization is to enable the payment icons in your footer:

1. Go to the theme editor.

2. Click Footer.

3. Check the Show payment icons checkbox.

4. Click Save.

Caution

If you don't use a free theme from Shopify, and your theme doesn't include the option to enable payment icons in the footer, then this customization won't work for your theme.

Edit the code for your payment icons

In this step, you will change the way that payment icons are assigned to your footer. By default, your theme shows the icons that are associated with the payment gateway you have enabled in the payment settings section of your admin and that are available for the current customer's region and currency. With this customization, you will manually add or remove the payment icons that you want to display.

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. In the Sections directory, click footer.liquid. If your theme doesn't include this file, then click theme.liquid in the Layout directory.
4. Find the following code in the file:

{% for type in shop.enabled_payment_types %}

1. Replace that code with the following:

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

1. In the code that you just pasted, there is a list of payment providers separated by commas: visa,master,american_express,paypal. The payment providers that you include in this list will determine which payment icons display on your online store. You can edit the list of payment providers to suit your needs. Review the list of available values and copy the name of each icon that you need from that list, without the .svg extension. Common values are listed below: - afterpay - american_express - apple_pay - bitcoin - dankort - diners_club - discover - dogecoin - dwolla - facebook_pay - forbrugsforeningen - google_pay - ideal - jcb - klarna - klarna-pay-later - litecoin - maestro - master - paypal - shopify_pay - sofort - unionpay - visa
2. Click Save.

iPhone

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
5. In the Sections directory, click footer.liquid. If your theme doesn't include this file, then click theme.liquid in the Layout directory.
6. Find the following code in the file:

{% for type in shop.enabled_payment_types %}

1. Replace that code with the following:

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

1. In the code that you just pasted, there is a list of payment providers separated by commas: visa,master,american_express,paypal. The payment providers that you include in this list will determine which payment icons display on your online store. You can edit the list of payment providers to suit your needs. Review the list of available values and copy the name of each icon that you need from that list, without the .svg extension. Common values are listed below: - afterpay - american_express - apple_pay - bitcoin - dankort - diners_club - discover - dogecoin - dwolla - facebook_pay - forbrugsforeningen - google_pay - ideal - jcb - klarna - klarna-pay-later - litecoin - maestro - master - paypal - shopify_pay - sofort - unionpay - visa
2. Click Save.

Android

1. From the Shopify app, tap the … button.
2. In the Sales channels section, tap Online Store.
3. Tap Manage themes.
4. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
5. In the Sections directory, click footer.liquid. If your theme doesn't include this file, then click theme.liquid in the Layout directory.
6. Find the following code in the file:

{% for type in shop.enabled_payment_types %}

1. Replace that code with the following:

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

1. In the code that you just pasted, there is a list of payment providers separated by commas: visa,master,american_express,paypal. The payment providers that you include in this list will determine which payment icons display on your online store. You can edit the list of payment providers to suit your needs. Review the list of available values and copy the name of each icon that you need from that list, without the .svg extension. Common values are listed below: - afterpay - american_express - apple_pay - bitcoin - dankort - diners_club - discover - dogecoin - dwolla - facebook_pay - forbrugsforeningen - google_pay - ideal - jcb - klarna - klarna-pay-later - litecoin - maestro - master - paypal - shopify_pay - sofort - unionpay - visa
2. Click Save.