Introduction

Adding custom payment icons to your Shopify store’s footer can enhance credibility and provide clarity for customers about available payment options. This guide will show you step-by-step how to add icons, such as Afterpay, to your footer, even if they are not in Shopify’s default settings.

1. Why Add Custom Payment Icons?

Shopify supports a variety of default payment icons like Visa, MasterCard, and PayPal. However, some widely-used payment options, such as Afterpay or specific regional payment solutions, may not be automatically available. Adding these icons can help build trust with customers, especially those who rely on these payment options.

2. Preparation: What You’ll Need

To get started, gather the necessary resources:

• An image file of the payment icon (e.g., Afterpay logo)
• Access to your Shopify theme’s code editor
• Basic knowledge of HTML and CSS

Having the image file in a high-resolution PNG format is recommended to ensure the icon looks crisp and clear on your site.

3. Upload the Icon File to Shopify Assets

To add the custom payment icon to your footer, you’ll first need to upload the icon image file to your Shopify assets:

1. In Shopify admin, go to Online Store > Themes.
2. Select the theme you’re currently using and click Actions > Edit code.
3. Find the Assets folder and click Add a new asset.
4. Upload the icon image file (such as “afterpay-logo.png”). Once uploaded, Shopify will generate a URL for the image in your assets.

4. Editing Your Theme’s Footer

After uploading the image, edit the footer.liquid file where payment icons are displayed. This file is typically found under Sections > footer.liquid or Snippets, depending on your theme.

5. Adding the Icon Code to Footer.liquid

Next, add code to display the icon in the footer. Here’s a step-by-step guide:

1. Open the footer.liquid file from your theme editor.
2. Locate this block of code, which controls existing payment icons:

{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}


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


{%- endif -%}

3. After the {%- endfor -%} line, add the following code to insert the new icon:

Replace afterpay-logo.png with the exact file name of the icon you uploaded.

6. Styling and Resizing Your Icon

After adding the icon, you may need to adjust its size and alignment to match the other payment icons. This can be done in the theme’s CSS file:

1. Locate your theme’s main CSS file, typically called theme.scss.liquid or base.css, under Assets.
2. Scroll to the end of the file and add this CSS rule to adjust the icon’s size:

.payment-icon img[src*="afterpay-logo.png"] {
    width: 40px; /* Adjust size as needed */
    height: auto;
}

3. Save the changes and refresh your site to see the resized icon in action.

You may need to adjust the width value to get the desired size, depending on your theme layout and design preferences.

7. Troubleshooting Common Issues

Here are some common issues and solutions when adding custom payment icons:

• Icon not appearing: Double-check the file name in the code and ensure it matches the uploaded asset file name. Make sure you saved all changes in the code editor.
• Icon size is inconsistent: Adjust the width in the CSS rule until it matches other icons. Alternatively, resize the original image before uploading it.
• Positioning issues: Add margin or padding in the CSS if the icon appears misaligned.

Conclusion

Adding a custom payment icon like Afterpay to your Shopify footer enhances customer experience by clearly showcasing all accepted payment methods. By following this guide, you can easily display any additional payment options your store offers, improving transparency and customer trust. For further customization, contact Shopify support or refer to the official Shopify Help Center.

FAQs

• Can I add more than one custom payment icon?
  Yes, repeat the upload and code insertion process for each icon you want to add.
• Is there a file type that works best?
  PNG files are recommended due to their high-quality display and compatibility with Shopify.
• Why doesn’t the icon align with the others?
  Adjust the CSS width and height settings to ensure the custom icon matches the existing icons’ dimensions.
• Can I remove or change the icon later?
  Yes, simply delete the added code from footer.liquid or update the image URL to switch the icon.