Why aren't my enabled payment type icons displaying correctly?

Payments + Shipping & Fulfilment
, ,

Topic summary

Payment icons for enabled methods aren’t showing when attempting to render them via Liquid. The initial code loop is incorrect. Recommended approach is to rely on the theme’s built‑in footer setting and proper Liquid:

  • Check a footer toggle (section.settings.payment_enable) and render: for type in shop.enabled_payment_types → type | payment_type_svg_tag (renders SVG icons for enabled payment types).

Configuration checks:

  • If using Shopify Payments, verify major credit cards are enabled in settings.
  • Note that some third‑party gateways don’t integrate with Shopify’s dynamic payment icons.

Latest updates:

  • OP can’t find the footer toggle; they are using a custom, older theme without Shopify 2.0 sections/blocks.
  • Advisor suggests switching to an up‑to‑date (Online Store 2.0) theme for the setting and flexibility, or fallback to a static image of payment icons added via HTML. Recoding the custom theme to 2.0 is non‑trivial and not guided here.

Status: Unresolved. Next steps are to either adopt a 2.0 theme and enable the footer payment icons, or manually add a static icons image. Screenshots were shared to illustrate settings.

Summarized with AI on January 10. AI used: gpt-5.
1

Hello, I wanted to add an svg icon of the enabled payment types, and for some reasons, theyre not appearing, here is the part of code i used:


{% for payment_type in enabled_payment_types %}
console.log({{ payment_typ_img_url }})
{% endfor %}

I thought that there is a problem with my payment gateway, so I contacted shopify support and they said there is nothing wrong with it, so please can anyone just tell me if there is a problem with the code or no, and if you guys have any suggestions for me.

2

Your theme should have an option to include payment methods/types within the footer settings. If that’s already enabled, but nothing is showing up, then your third-party payment gateway might not be integrated with the payment options icons.

If you’re using Shopify Payments (and you’ve completed the setup for it already), then you’d want to double-check that you have the different payment methods (ie. credit cards) enabled:

https://help.shopify.com/en/manual/payments/shopify-payments/configuring-shopify-payments#adjust-the-major-credit-cards-that-your-store-accepts

Also, that coding you’re using doesn’t look right. It should be something closer to this:

{%- if section.settings.payment_enable -%}
          
            {{ 'sections.footer.payment' | t }}
            

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

          

        {%- endif -%}

However, if your third-party payment gateway doesn’t integrate with the payment icons, then it’s probably easier to just create an image with the icons you want to show.

Something like this:

payment icons (2).png

… and then add a bit of HTML to show the image (instead of trying to code dynamic icons).

Hope the above helps! :slightly_smiling_face:

Cheers,

Stephen

1 Like
3

Hello, the settings.payment_enable is not enabled, how can i enable it? and I dont really want to use cusotmicons just incase there is a problem in gateway that actually caused the icon thing

4

Admin > Online Store > Theme > Customize > Go into the “Footer” settings from the left-hand menu > look for something named “payment icons” or “payment methods”.

It should just be a check-mark box that you check and then the payment icons show.

It should look something like this (will be a bit different depending on which theme you’re using):

enable payment icons.png
enable payment icons.png286Ă—811 31.4 KB

5

there is nothing in the left side

MohammadAL_0-1702439904591.png
MohammadAL_0-1702439904591.png1600Ă—900 219 KB

and btw this is a custom theme that i coded if that matters

6

If you coded the theme yourself, then you’d know if it was built in or not. Based on your screenshot, the theme you’re using isn’t using Shopify 2.0 theme blocks/sections.

I’d recommend switching to a new (up-to-date) theme, or else you can just add the icons in via an image (using HTML) as I previously mentioned.

7

can I update my theme to shopify 2.0? would that be any different in the coding process?

8

I can’t help you with how to completely recode a theme to be compatible with Shopify 2.0 … I can only suggest that you add a new theme from the Shopify theme store, and then re-setup the site using the new theme. It’ll really help with giving you more flexibility in terms of how the site can work/look. Using an old (out-dated) theme isn’t doing you any favours.