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

[MohammadAL]

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.

[StephensWorld]

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... 

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

        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list 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>
          </div>
        {%- 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:

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

<img src="https://www.link-to-image-goes-here.com/image.png" alt="Accepted Payment Options" height="32">

Hope the above helps! 🙂

Cheers,

Stephen

[MohammadAL]

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

[StephensWorld]

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):

[MohammadAL]

there is nothing in the left side

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

[StephensWorld]

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. 

[MohammadAL]

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

[StephensWorld]

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.