How to Edit <title> on Payment Icons

dannanelli
Visitor
2 0 1

Hello, I am trying to replace <title> with <span> on the payment icons that are in the footer. See attached screenshot.2019-12-06_15-36-57.jpg

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! 🙂

Replies 8 (8)

oscprofessional
Shopify Partner
15830 2369 3072

Hello @dannanelli ,

Please refer below link

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
dannanelli
Visitor
2 0 1

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 <title> can be changed to <span> on each payment icon.

MatthewB
Tourist
3 0 1

Hello

I have a similar question regarding changing <title> to <span> 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 <title> 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 <title> tag.

See the warning message below:

 

Bing.png

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 %}
<div class="grid">
<div class="grid__item text-center">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% 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 <title>. Is there something special about the <title> that requires me to use it (it should only be used for the page title in the <head> as I understand it?

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

I am using the Minimise theme.

Many thanks!

Matthew

NikoCreatives
Visitor
1 0 0

Hey Matthew,

 

did you ever find a solution to this issue?

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

sledro
Visitor
1 0 0

did anyone find a solution to this? 

StefanBoettjer
Shopify Partner
13 1 4

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

 

<script>
document.addEventListener("DOMContentLoaded", function() {
var paymentIcons = document.querySelectorAll(".list-payment__item svg");
paymentIcons.forEach(function(icon) {
var titleElement = icon.querySelector("title");
if (titleElement) {
var spanElement = document.createElement("span");
spanElement.innerHTML = titleElement.textContent;
icon.replaceChild(spanElement, titleElement);
}
});
});
</script>

<div class="footer__column footer__column--info">
{%- 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 -%}
</div>

PyroProducts
Tourist
11 2 1

Is there any solution for DAWN?