adding Afterpay icon into footer (or other icons)

Store Design

Topic summary

Adding Custom Payment Icons to Shopify Footer

The discussion focuses on adding payment method icons (primarily Afterpay) to Shopify store footers when they’re not included in default payment settings.

Core Method:

  • Edit footer.liquid in theme code
  • Add payment method name (e.g., ‘afterpay’) to the payment_icons_available string
  • Upload icon image to Assets or Files
  • Insert image code after the {% endfor %} tag using: <li class="payment-icon"><img src="yourURL"/></li>

Common Challenges:

  • Icon sizing issues: Many users report icons appearing too large, too small, or blurry compared to default icons
  • Alignment problems: Icons often don’t align properly with existing payment icons
  • Theme variations: Different themes (Brooklyn, Debut, etc.) have different code structures, making universal instructions difficult

Solutions Offered:

  • Adjust sizing via CSS in theme.scss.liquid using specific selectors
  • Use percentage-based sizing (10-20%) for better scaling
  • Upload PNG files at reduced sizes before adding to theme
  • For newer themes: Use SVG format and reference Afterpay from Shopify’s payment method library
  • Alternative: Contact Shopify support for assistance

Status: Discussion remains active with users sharing theme-specific workarounds. No single solution works universally across all Shopify themes.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
25

Hi,

Wondering if you could please help me? I have followed your instructions - below is a snippet of my code. I have also uploaded the Afterpay.png file into assets but the icon is still not showing on my page. What am I doing wrong?

{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}

{{ 'general.payment.method' | t }}
    {%- for type in shop.enabled_payment_types -%}
  • {{ type | payment_type_svg_tag: class: 'icon' }}
    • {%- endfor -%}
{%- endunless -%} {%- endif -%}