Footer: How to replace payment icons with custom icons

This customization allows you to replace the payment icons in Pipeline with a set of custom payment icons from the source: Shopify UI Elements Generator. 

Here's an example of payment icons currently supported:

From that list, you can choose which icons to display - Example:

Keep in mind that list of icons may be updated. At the time of this article, those are the options. See the actual list by using the link in Step 1.

How to:

1

Choose payment icons to use from generator

Open this link:
Shopify UI Elements Generator for Payments

(1) Choose the payment icons you'd like to use.

(2) There will be a preview on the top right side.

(3) This is the code you'll use in the next step. 

2

Modify footer.liquid

Make a duplicate before any code changes:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. 

Example if working out of a draft theme:

OR

Example if working from your main live/published theme:

From the Sections folder, open footer.liquid:

We are about to modify the code so make sure at this point you've made a duplicate of your theme. 

On the right code side, use Command-F (Mac) or Control-F (Windows) to find:

social

(1) Find "social" without quotes

(2) Locate the start of that section

Once you've found the social section, we will add a few extra blank lines above that section:

The payment icons will be placed above the social section. 

Next, paste the code from the Shopify UI Elements Generator. Return to that tab in your browser to copy the code. Be sure to highlight the code in their box. The copy to clipboard button doesn't always work so be aware of that. 

Example after pasting the code:

Save the file.

3

Turn off show payment types in the Theme Editor

Open the Theme Editor. For a draft theme, use the Customize link for that theme:

OR

If you're using a live/published theme:

At the bottom of your Sections, choose Footer:

Uncheck "Show payment types":

Save your Theme Editor changes:

Example Result:

Notes

To change the sort order of icons, you can modify the generator code manually. Cut an entire line and paste with below/above another line: