All Collections
General
How to Add Custom Payment Icons in the footer of the Debutify Theme?
How to Add Custom Payment Icons in the footer of the Debutify Theme?

A guide on how to add custom payment icons in the footer of the Debutify Shopify theme.

Diane Eunice Narciso avatar
Written by Diane Eunice Narciso
Updated over a week ago

What are Custom Payment Icons?

One of the many features that Debutify offers is the ability to show payment icons in your footer. These payment icons provide a quick and easy way to see the different payment options available to them.

By default, it will automatically display payment icons in your footer based on your store's payment settings. This means that if you have certain payment methods enabled in your Shopify store, those icons will automatically appear in your Debutify theme's footer. This can save you time and effort in manually adding payment icons to your website.

However, if you want to customize the payment icons that are displayed in your footer, you have the option to add custom payment icons. This can be useful if you offer unique or lesser-known payment methods that are not included in the default options.


How to Add Custom Payment Icons?

STEP 1

Go to your Shopify Admin, go to Online Store, and then Themes.

STEP 2

Click the button to open the actions menu, and then click Edit code.

STEP 3

In the Snippets directory, click payment-icons.liquid. If your theme doesn't include this file, then click theme.liquid in the Layout directory.

STEP 4

Find the following code in this file:

{% for type in shop.enabled_payment_types %} Copy

Replace that code with the following:

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

In the code that you just pasted, there is a list of payment providers separated by commas: visa,master,american_express,paypal.

On your online store, the payment icons will depend on the providers you include in this list. Edit the payment providers list as needed. Review that list and copy each icon's name, 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


STEP 5

Click Save to apply the changes.

Did this answer your question?