Thunder Page Speed Optimizer contribue à l'aspect performances des éléments de confiance : les images d'icônes, les intégrations d'applications de pied de page et les scripts de badge de confiance ne devraient jamais ralentir la page. Utiliser Thunder pour garder les scripts et les actifs sous contrôle pendant que vous corrigez le code du thème ci-dessous.
Solution rapide avec Thunder
Les icônes de paiement sont petites, mais les applications que les commerçants installent autour de la confiance peuvent être lourdes : badges d'examen, sceaux de sécurité, outils contextuels et scripts de pied de page. Si ces éléments retardent le rendu, le pied de page peut paraître cassé ou sauter en retard sur mobile.
Fonctionnalités de Thunder améliore automatiquement le chargement des scripts et la vitesse des pages. Associez cela aux vérifications manuelles des icônes de paiement ici pour que votre pied de page soit à la fois fiable et rapide.
Optimiser les scripts de pied de pageVérifiez d'abord les paramètres du pied de page du thème
Accédez à la boutique en ligne, personnaliser, pied de page et recherchez un paramètre nommé Afficher les icônes de paiement, Modes de paiement ou Icônes de paiement. Activez-le, enregistrez et prévisualisez dans une fenêtre de navigation privée. Certains thèmes ont des préréglages de pied de page distincts pour ordinateur et mobile, alors testez les deux.
Si le paramètre est activé et que seul PayPal apparaît, le code de pied de page peut afficher uniquement les types de paiement que Shopify reconnaît pour votre passerelle. Les passerelles tierces telles que les banques locales, les processeurs régionaux ou les méthodes de paiement manuelles ne correspondent pas toujours aux icônes SVG par défaut de Shopify.
La confiance de pied de page fait partie d'un système de conversion plus large. Associez-le avec le mais pas de liste de contrôle de vente, Guide d'audit de boutique Shopify, et .
Correction du liquide de pied de page pour les icônes de paiement Shopify
La plupart des thèmes affichent les icônes de paiement en parcourant shop.enabled_payment_types. Si cette boucle est supprimée, commentée ou enveloppée dans un balisage masqué, les icônes disparaîtront même lorsque les paramètres de paiement sont corrects.
{% 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 %}Si vous devez coder en dur les types de paiement acceptés, gardez la liste courte et valide. Mauvaises citations, commentaires brisés et non fermés li Les balises sont des causes courantes d'erreurs d'enregistrement de pied de page.
{% 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>Les passerelles tierces peuvent nécessiter des icônes personnalisées
L'assistant d'icône de paiement par défaut de Shopify couvre les types de paiement connus. Il ne créera pas automatiquement d'icônes pour chaque méthode bancaire locale, méthode de transfert manuel ou processeur tiers. Si votre fournisseur ne figure pas dans la liste des types pris en charge, ajoutez manuellement une petite icône SVG ou WebP optimisée et étiquetez-la de manière accessible.
Ne téléchargez pas de sprite PNG géant pour une rangée de petites icônes de pied de page. Gardez les icônes personnalisées petites, définissez une largeur et une hauteur explicites et évitez de charger une police d'icône uniquement pour les marques de paiement. Le Guide d'optimisation des images Shopify et guide explicite des dimensions de l'image couvrent les bases des performances.
Pour le comportement de base de Shopify, utilisez le Documentation des paiements Shopify et les propres directives des icônes de votre passerelle.
Vérifiez les conflits d'application CSS et de pied de page
Inspectez le pied de page dans DevTools. Si le balisage de l'icône existe mais est invisible, recherchez : aucun, : masquée, icônes blanches sur fond blanc, largeur nulle, découpage de débordement et habillage flexible qui pousse les icônes hors de l'écran sur mobile.
Les applications de badges de confiance peuvent également remplacer ou dupliquer les icônes de paiement. Désactivez les applications de badge de pied de page dans un thème en double et testez à nouveau. Si les icônes reviennent, décidez si l'application vaut la vitesse et le coût de maintenance. Le Guide des restes de l'application est utile si une application de confiance désinstallée a laissé des extraits de code.
Pour un nettoyage complet des performances, suivez les guide complet d'optimisation de la vitesse Shopify et guide de nettoyage CSS et JavaScript inutilisés.
Correction manuelle vs Thunder Fix
| Correction manuelle | Correction du tonnerre | |
|---|---|---|
| Paramètre de pied de page désactivé | Activez les icônes de paiement dans l'éditeur de thème. | Sans objet. |
| Boucle liquide cassée | Restaurez la boucle des icônes de paiement en toute sécurité. | Pas un remplacement de code liquide. |
| Scripts de badge de confiance lourde | Supprimez ou différez les scripts manuellement. | Automatise les améliorations du chargement des scripts. |
| Icônes personnalisées surdimensionnées | Compressez les images et définissez les dimensions. | Prend en charge un nettoyage plus large des performances. |
Lorsque le nettoyage de la confiance fait partie d'un projet de performance plus vaste, comparez Tarification Thunder avec optimisation de la vitesse Shopify professionnelle.
FAQ
Pourquoi les icônes de paiement Shopify ne s'affichent-elles pas dans mon pied de page ?
Le paramètre de pied de page peut être désactivé, le thème peut afficher uniquement les types de paiement activés par Shopify, le liquide de pied de page personnalisé peut être défectueux, CSS peut masquer les icônes ou une passerelle tierce peut ne pas correspondre au jeu d'icônes par défaut de Shopify.
Pourquoi seul PayPal apparaît-il dans mon pied de page Shopify ?
PayPal peut apparaître lorsque les autres types de paiement activés ne sont pas exposés via la boucle d'icônes de paiement du thème. Ceci est courant avec les passerelles tierces, les thèmes personnalisés ou le code de pied de page qui code en dur une courte liste d'icônes.
Puis-je ajouter manuellement des icônes de paiement dans Shopify Liquid ?
Oui, mais utilisez les noms de types de paiement pris en charge et testez le pied de page après avoir enregistré. Une mauvaise syntaxe Liquid ou des balises non fermées peuvent casser le pied de page ou empêcher l'enregistrement du thème.
Les icônes de paiement en pied de page affectent-elles la conversion ?
Ils peuvent améliorer la confiance vers la fin de la page, en particulier pour les marques inconnues. Ils ne répareront pas une configuration de paiement défaillante, mais ils aideront les acheteurs à reconnaître les méthodes acceptées avant de passer à la caisse.
Les icônes de paiement peuvent-elles ralentir une boutique Shopify ?
Simple SVG payment icons are usually cheap. Problems come from oversized custom icon images, icon fonts, footer app embeds, and scripts loaded around trust badges.
Gardez les éléments de confiance visibles et rapides.
Thunder helps keep footer scripts, trust badges, and storefront assets from slowing shoppers down.