How can I replace title with span on payment icons?

[dannanelli]

Hello, I am trying to replace with on the payment icons that are in the footer. See attached screenshot.

For some reason, I’m unable to locate where these payment icons are stored and can’t seem to edit them. Any help would be appreciated!

[oscprofessional]

Hello @dannanelli ,

Please refer below link

https://help.shopify.com/en/themes/customization/store/add-credit-card-icons#edit-the-code-for-your-payment-icons

[dannanelli]

Hi there, thanks for trying to assist. The link you shared with me does not solve my problem. I am trying to find where the can be changed to on each payment icon.

[MatthewB]

Hello

I have a similar question regarding changing to relating to an issue I have found with the HTML generated by using Shopify Payments and the payment icons that are generated at the bottom of every page.

This is because Bing Webmaster SEO Analyser is telling me that the use of more than once is not SEO friendly (in fact a "high severity SEO issue). I believe it should only be used to denote the page title in the head. So I’m not sure why Shopify Payments is set up to wrap every payment icon with the tag.

See the warning message below:

I have not managed to locate where the payment icons are created, but I can see that they are called in to the footer.liquid via payment_type_svg_tag.

{% if section.settings.show_methods_of_payment %}
{% 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 %}

I have tried to perform a replace on this string, but I don’t really think this is best practice. It also doesn’t work when viewing the website - the icons all just disappear, which I am going down a rabbit hole trying to fix, as the code seems to not like anything other than . Is there something special about the that requires me to use it (it should only be used for the page title in the as I understand it?

So ideally, my question is where is this variable set and can I there replace the with so that I am not marked down by Google for having multiple s in my HTML

I am using the Minimise theme.

Many thanks!

Matthew

[NikoCreatives]

Hey Matthew,

did you ever find a solution to this issue?

[diego_ezfy]

Hello, @dannanelli

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I’ll help you out to the best of my ability.

They’re very likely being injected via Javascript (perhaps with an app that you’re using), therefore you wouldn’t find it inside your theme.

Kind regards,
Diego

[sledro]

did anyone find a solution to this?

[StefanBoettjer]

Hi there. try this, working with the actual dawn:

{%- 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 -%}

[PyroProducts]

Is there any solution for DAWN?

[MichaelLytvyn]

Hi! use this code
just delete title
do not use span it will case error

contact me if you have questions

{%- for type in shop.enabled_payment_types -%}
{%- assign modified_type = type | payment_type_svg_tag: class: 'payment-icon' | replace: 'title', '' -%}
- {{ modified_type | replace: 'title', '' }}

{%- endfor -%}

[Bobarob]

Ja, es gibt eine Lösung für DAWN.

Schalten SIe ihm Theme Editor das "

"Zahlungsmethoden

Zahlungssymbole anzeigen" ab.

[Bobarob]

Hi,

ist Ihre Lösung für das DAWN Theme? Wenn ja, wo soll der neue Code eingepflegt werden? Und soll ein anderer Code Bereich entfernt werden ?

Beste Grüße

Bobarob

[StefanBoettjer]

Hi,

this blog is not about disabling the ‘payment symbols,’ but about replacing the element with a element in the programming.

As mentioned in my post from 2023 – and it seems the same code is still used in the current DAWN – the footer.liquid file needs to be edited for this. The code there is:

        {%- 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 -%}
      

Replace this with:

{%- 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 -%}

After this change, you can see in the browser’s Developer Tools that the element has been replaced with :

Stefan

[StefanBoettjer]

Yes, see the current post below.