Payment Icons

IMPORTANT

The payment icons displayed accross your theme are automatically determined by:

• Your store’s payment settings.
• The customer’s region and currency.

Customize payment icons

If you want to:

• Add more payment icons without altering your store’s payment settings.
• Add a custom payment service icon not officially supported by Shopify.

You can achieve this by editing your theme code.

Follow these steps to customize payment icons:

1. From your Shopify admin, go to Online Store → Themes.

2. Find the theme you want to edit, and then click ••• and Edit code

3. In the snippets directory, open inc-payment-icons.liquid file.

4. Find the following code in the file:

   {%- liquid
       for type in shop.enabled_payment_types
           echo type | payment_type_svg_tag: class: 'payment-icon'
       endfor 
   -%}

5. Replace it with:

   {%- liquid
       assign custom_payment_types = "afterpay,klarna,affirm" | split: ","
       assign shop_payment_types = shop.enabled_payment_types | concat: custom_payment_types
       for type in shop_payment_types
           echo type | payment_type_svg_tag: class: 'payment-icon'
       endfor 
   -%}

6. In the code you pasted, on line 2, you'll see a list of payment providers: "afterpay,klarna,affirm"

   TIP

   This list specifies the additional payment icons that will appear on your online store. You can modify this list to include the payment providers you want to display.

7. For popular providers:

   Refer to the "Common Providers" tab for a curated list of the most widely used payment providers.

   For all providers:

   Use the "All Available Providers" tab to explore a complete list of payment providers you can include.

   Both tabs can help you choose the providers you need to display on your store.

8. Replace the current providers (afterpay,klarna,affirm) with the ones you want, separating each with a comma. For example: "paypal,applepay,googlepay"

9. Save your changes to display the selected icons on your store.