Shopify Payment Icons Not Showing in Footer: Theme, Gateway, and Liquid Fixes (2026)

Quick Fix with Thunder

Check Theme Footer Settings First

Go to Online Store, Customize, Footer, and look for a setting named Show payment icons, Payment methods, or Payment icons. Enable it, save, and preview in an incognito window. Some themes have separate footer presets for desktop and mobile, so test both.

If the setting is enabled and only PayPal appears, the footer code may be rendering only the payment types Shopify recognizes for your gateway. Third-party gateways such as local bank providers, regional processors, or manual payment methods do not always map to Shopify's default SVG icons.

Footer trust is part of a broader conversion system. Pair this with the traffic but no sales checklist, Shopify store audit guide, and checkout speed guide.

Fix Footer Liquid for Shopify Payment Icons

Most themes render payment icons by looping through shop.enabled_payment_types. If that loop is removed, commented out, or wrapped in hidden markup, icons will disappear even when payment settings are correct.

{% if section.settings.show_payment_icons %}
  <ul class="list-payment" role="list">
    {% for type in shop.enabled_payment_types %}
      <li class="list-payment__item">
        {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
      </li>
    {% endfor %}
  </ul>
{% endif %}

If you need to hardcode accepted payment types, keep the list short and valid. Bad quotes, broken comments, and unclosed li tags are common causes of footer save errors.

{% assign payment_types = 'visa,master,american_express,paypal,apple_pay,google_pay' | split: ',' %}
<ul class="list-payment" role="list">
  {% for type in payment_types %}
    <li class="list-payment__item">
      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    </li>
  {% endfor %}
</ul>

Third-Party Gateways May Need Custom Icons

Shopify's default payment icon helper covers known payment types. It will not automatically create icons for every local bank method, manual transfer method, or third-party processor. If your provider is not in the supported type list, add a small optimized SVG or WebP icon manually and label it accessibly.

Do not upload a giant PNG sprite for a row of tiny footer icons. Keep custom icons small, set explicit width and height, and avoid loading an icon font only for payment marks. The Shopify image optimization guide and explicit image dimensions guide cover the performance basics.

For Shopify's baseline behavior, use the official Shopify payments documentation and your gateway's own icon guidelines.

Check CSS and Footer App Conflicts

Inspect the footer in DevTools. If the icon markup exists but is invisible, search for display:none, visibility:hidden, white icons on a white background, zero width, overflow clipping, and flex wrapping that pushes icons off-screen on mobile.

Trust badge apps can also replace or duplicate payment icons. Disable footer badge apps in a duplicate theme and test again. If icons return, decide whether the app is worth the speed and maintenance cost. The app leftovers guide is useful if an uninstalled trust app left snippets behind.

For full performance cleanup, follow the complete Shopify speed optimization guide and unused CSS and JavaScript cleanup guide.

Manual Fix vs Thunder Fix

When trust cleanup becomes part of a larger performance project, compare Thunder pricing with professional Shopify speed optimization.

FAQ