Sélecteurs de langue sur les thèmes Shopify : comment les personnaliser et résoudre les problèmes.

Le sélecteur de langue de Shopify est un excellent déclencheur visuel qui offre davantage de contrôle à vos utilisateurs. S'il est manquant, s'il se trouve au mauvais endroit ou s'il refuse de s'afficher depuis que vous avez changé ou mis à jour votre thème, vous serez heureux d'avoir trouvé cet article !

Tout d'abord, ne paniquez pas. Le sélecteur de langue ne contient aucune donnée de traduction, il suffit donc de rendre l'appareil à nouveau visible sur votre site. Poursuivez votre lecture et, en moins de 10 minutes, vous serez en mesure d'identifier avec précision lequel des trois suspects habituels (mises à jour de thème, langues non publiées ou anomalies de chargement différé) est en cause, et de mettre en œuvre la solution nécessaire.

En synthèse

• Les commutateurs de langue de Shopify ne sont que des déclencheurs visuels qui n'affectent pas les données de traduction ou le référencement de votre site.
• La plupart des problèmes de disparition du sélecteur sont liés à des mises à jour de thèmes, à des langues non publiées ou à des en-têtes mal chargés.
• Ce qui semble parfait sur un ordinateur de bureau est souvent caché sur un téléphone portable, c'est pourquoi il faut toujours tester les points d'arrêt courants.
• Si les astuces visuelles ne suffisent pas, l 'approche deWeglot vous offre une réelle flexibilité en matière de placement et de style, sans sacrifier la qualité de la traduction.

Configuration des langues et des méthodes de traduction

Tout d'abord, avant même que le sélecteur de langue n'apparaisse, votre boutique Shopify doit proposer plusieurs langues. Si vous avez déjà configuré vos traductions, passez directement à la section suivante. Sinon, voici comment commencer...

Allez dans Paramètres > Langues > Ajouter une langue. Choisissez parmi plus de 20 options prises en charge, de l'espagnol au japonais. N'oubliez pas qu'il faut cliquer sur Publier à côté de chaque langue pour que les traductions soient disponibles pour les clients. Si vous omettez cette étape, votre nouvel utilisateur n'aura rien à changer.

L'application intégrée Translate & Adapt de Shopify est une option pour une boutique multilingue. Elle traduit automatiquement et gratuitement votre contenu principal en deux langues, directement à partir de la section Paramètres > Applications, une fois que vous avez ajouté vos langues.

Pour un contrôle global, exportez les données linguistiques de votre site au format CSV à partir de Paramètres > Langues > Exporter. Modifiez les traductions en masse, puis réimportez-les - la clé est de ne jamais toucher au code Liquid à l'intérieur de ces crochets {{ }} ou {% %}. C'est le moteur de thème de Shopify, pas du texte brut.

Si vous préférez un contrôle manuel total, Shopify permet aux magasins de gérer jusqu'à 20 langues. Consultez la rubrique Paramètres > Langues > Actions > Commander des traductions pour commander des services de traduction professionnels directement depuis votre tableau de bord Shopify.

Une fois que vos langues sont publiées et que les traductions sont appliquées, vous êtes prêt à vous attaquer au commutateur.

Trouver et configurer le sélecteur intégré de votre thème

Le sélecteur de langue des thèmes Shopify est caché à la vue de tous, mais seulement si vous savez où chercher !

Pour les thèmes Dawn, Craft et Refresh, le sélecteur est caché dans la boutique en ligne > Thèmes > Personnaliser > Pied de page.

Activez le sélecteur de langue et il apparaîtra au bas de votre site. Ces thèmes verrouillent le sélecteur dans le pied de page, si bien que le placer dans l'en-tête nécessite du code supplémentaire - il n'y a pas de bascule intégrée pour le placer en haut de la page.(Indice : nous vous montrerons comment faire dans la section Comment ajouter un sélecteur de langue à l'en-tête de mon site Shopify ).

Sense et Studio sont tout aussi simples. Leur Customizer de thème ne propose le sélecteur que dans les paramètres du pied de page. Cherchez "Language selector" ou "Localization" - c'est là que le basculement s'effectue. Encore une fois, il n'est pas possible de placer l'en-tête, à moins que vous n'ayez confiance dans l'ajout d'extraits de code personnalisés.

Les thèmes haut de gamme tels que Prestige, Impulse et Motion prévoient souvent le placement de l'en-tête dans les paramètres du thème > En-tête, ou dans les sections "Langue et devise". Il est utile d'examiner les panneaux de l'en-tête et du pied de page pour vérifier les possibilités d'édition - certains thèmes offrent plus d'options créatives que d'autres.

Si vous utilisez toujours un thème hérité, ceux-ci sont antérieurs aux mises à niveau de la boutique en ligne 2.0 de Shopify. Pour ajouter ou déplacer le sélecteur, il faut intervenir dans le code, généralement dans footer.liquid. Le sélecteur de langue est souvent codé en dur, donc pour le personnaliser, il faut modifier directement le balisage HTML et Liquid.

Les modifications visuelles dépendent de votre thème. La plupart des sélecteurs affichent soit des drapeaux, soit des noms de langues, soit les deux. Les polices et les couleurs suivent le style de votre site, à moins qu'elles ne soient modifiées manuellement.

Les acheteurs mobiles bénéficient d'une expérience légèrement différente. La plupart des thèmes masquent le sélecteur de langue en dessous de 768px afin de garder le panier et la navigation clairs, le laissant parfois visible dans les pieds de page ou les menus déroulants.

Quand Weglot devient votre meilleure option

Quand les options intégrées de Shopify commencent à se sentir à l'étroit, Weglot vous offre toute la liberté dont vous avez besoin !

"Si vous visez plus de deux langues supplémentaires, si vous voulez styliser votre sélecteur pour correspondre à votre marque, que vous souhaitez un changement automatique de géolocalisation ou que vous avez besoin de déclencheurs de langue dans l'en-tête et le pied de page, Weglot vous donne la liberté de le faire, et bien plus encore."

- Eugène Ernoult, CMO chez Weglot

La configuration est rapide. Installez l'application, choisissez vos langues, et le sélecteur Weglotapparaît instantanément. Si vous souhaitez le rendre ultra accessible, utilisez simplement l'astuce du menuWeglot. Insérez Weglot dans n'importe quel lien de navigation pour créer un sélecteur de langue cliquable où vous le souhaitez, en moins de temps qu'il n'en faut pour dire «et voilà ».

La personnalisation visuelle est facile une fois que vous avez Weglot dans votre équipe. Notre tableau de bord vous permet de prévisualiser les changements apportés à votre sélecteur en temps réel, sans aucune complexité. Modifiez l'emplacement, le style ou les icônes, et ce que vous voyez est ce que les clients obtiennent.

De plus, Weglot se charge à l'aide d'un script asynchrone de moins de 100 Ko, ce qui n'entamera pas vos données vitales. N'hésitez pas à passer votre site au crible de PageSpeed Insights pour vous en convaincre.

{{ai-banner}}

Comment ajouter un sélecteur de langue à mon en-tête Shopify ?

Allez dans le Customizer du thème > En-tête > Ajouter un bloc > Custom Liquid.

Si vous souhaitez utiliser le sélecteur de langue de Shopify dans votre en-tête, copiez le code du formulaire de localisation dans le fichier footer.liquid de votre thème. Ce formulaire commence généralement par une balise de localisation et modifie le paramètre local de votre URL lorsque les clients choisissent une nouvelle langue.

Enveloppez ce code dans un conteneur avec des noms de classe uniques pour le styliser. Pour vous assurer que votre sélecteur se trouve au-dessus des menus collants ou des fenêtres contextuelles, ajoutez des feuilles de style CSS telles que z-index : 10000. Cette petite étape lui permet de rester visible et de ne pas poser de problème.

Pour les utilisateurs deWeglot , l'installation est encore plus facile. Déposez ce code :

<div id="weglot_here"></div>

dans votre bloc Custom Liquid. Weglot détecte instantanément ce conteneur et l'insère proprement dans votre commutateur.

Après l'installation, testez toujours votre flux de paiement. Les thèmes utilisent parfois des fichiers d'en-tête ou des mises en page distincts lors du paiement, de sorte que votre sélecteur peut ne pas apparaître si ces fichiers ne reçoivent pas la même mise à jour.

Problèmes courants et solutions rapides

Les sélecteurs de langue disparaissent parfois après une mise à jour de thème, l'installation d'une application ou une modification de la présentation. Ne vous inquiétez pas : il ne s'agit généralement que d'un problème visuel, et non d'une défaillance majeure. Voyons comment résoudre les quatre problèmes les plus courants.

1. Pourquoi ai-je deux sélecteurs de langue ?

Le fait de voir deux sélecteurs signifie généralement que le sélecteur natif de Shopify et la version de votre application (comme Weglot) sont actifs en même temps. Pour mettre de l'ordre dans tout cela, rendez-vous dans la section Footer du Theme Customizer et désactivez le sélecteur de langue native.

Si votre thème utilise un en-tête chargé paresseusement, le sélecteur de Weglotpeut apparaître ou disparaître au fur et à mesure du chargement des éléments. Pour les thèmes où les éléments comme les en-têtes sont chargés dynamiquement, Weglot recommande d'initialiser manuellement le sélecteur une fois que l'en-tête est présent. Ceci peut être fait en ajoutant votre script Weglot et en appelant ensuite :

javascript
Weglot.initialize({
	api_key: 'YOUR_API_KEY',  
    // other options
});

Cette opération est effectuée une fois que l'en-tête a été entièrement chargé (par exemple, via un événement DOM ready ou après un court délai). Cela permet de s'assurer que le sélecteur s'affiche à chaque fois au bon endroit.

Pour plus d'informations sur le placement et l'initialisation du sélecteur personnalisé, consultez la documentation officielle Weglot sur le sélecteur de langue.

{{quote-image-banner}}

2. Pourquoi mon sélecteur de langue a-t-il disparu après une mise à jour du thème ?

Les commutateurs disparaissent parfois lors d'une mise à jour du thème, mais les traductions sont rarement en cause.

Tout d'abord, vérifiez que vos langues supplémentaires sont toujours publiées dans Paramètres > Langues. Si elles ne sont pas marquées comme publiées, elles n'apparaîtront nulle part.

Ensuite, ouvrez la boutique en ligne > Thèmes > Personnaliser > Pied de page pour vous assurer que l'option Activer le sélecteur de langue est activée. Certains thèmes, comme Dawn, réinitialisent ce paramètre sur OFF après les mises à jour.

Troisièmement, ajoutez /fr/ ou /es/ à l'URL de votre boutique. Les pages traduites signifient que vos données linguistiques sont en sécurité et que vous ne faites que résoudre un problème d'affichage.

Enfin, regardez toujours votre site sur plusieurs appareils - un sélecteur manquant sur mobile est généralement dû à un conflit d'affichage CSS, et non à un problème de traduction.

3. Pourquoi le sélecteur de langue n'apparaît-il pas sur les appareils mobiles ?

Si votre sélecteur de langue n'apparaît pas sur mobile, cela est probablement dû à la conception. La plupart des thèmes Shopify utilisent CSS pour masquer les widgets supplémentaires sous 768px afin de laisser de la place pour les icônes du panier et du menu. Les directives d'interface humaine d'Apple exigent des cibles tactiles de 44x44 pixels pour que les éléments restent cliquables sur les petits écrans.

Pour remédier à ce problème, ajoutez une requête média dans votre CSS qui place le sélecteur dans le coin inférieur droit pour les appareils mobiles, avec une valeur z-index élevée pour qu'il reste en haut. Si vous manquez d'espace dans l'en-tête, placez le sélecteur dans votre menu hamburger mobile.

4. Le sélecteur fonctionne après actualisation mais pas au premier chargement de la page ?

Le sélecteur de Weglotn'apparaît parfois qu'après un rafraîchissement manuel lorsque les thèmes utilisent des en-têtes chargés paresseusement. Dans Dawn 15+ et les thèmes similaires, l'en-tête est dessiné par JavaScript après le chargement de la page principale. Weglot injecte son sélecteur dès que possible, de sorte que si l'en-tête n'est pas prêt, le sélecteur atterrit à son emplacement de repli - souvent en bas à droite - ou disparaît au bout d'une seconde.

Résolvez ce problème en définissant le drapeau WGNOTINITIALIZED avant que votre script Weglot ne soit chargé (dans theme.liquid). Ensuite, appelez Weglot.initialize()manuellement, après le rendu de l'en-tête (en utilisant setTimeout ou un événement DOM ready).

Alternativement, vous pouvez définir une position de repli dans le tableau de bord de Weglot , comme l'en-tête d'abord, puis le pied de page. De cette façon, votre sélecteur apparaît toujours quelque part, même si l'en-tête est en retard !

Votre Checklist complète pour la mise en œuvre

Tout d'abord, avant de vous lancer dans des modifications, dupliquez votre thème en utilisant Boutique en ligne > Thèmes > Actions > Dupliquer. Vous disposerez ainsi d'un bac à sable sûr pour les tests et les corrections.

Ensuite, vérifiez que toutes les langues cibles apparaissent comme Publiées dans Paramètres > Langues. Assurez-vous que votre sélecteur de langue est visible : certains thèmes utilisent des boutons dans l'en-tête, d'autres dans le pied de page, vérifiez donc les deux emplacements.

Essayez d'accéder directement à l'URL en ajoutant /es/ ou /fr/ à l'adresse de votre boutique. Si ces pages se chargent, vos traductions sont prêtes et seul l'emplacement du sélecteur doit être modifié. Prévisualisez votre boutique à des tailles différentes - 375 px, 768 px et 1 920 px - en utilisant des appareils réels afin de repérer toute bizarrerie liée à la réactivité.

Ouvrez Chrome DevTools pour mesurer les temps de chargement des scripts. Un sélecteur qui traîne en longueur est synonyme de problèmes pour les acheteurs. Effectuez toujours un test d'achat dans chaque langue, car les modèles de caisse aiment vous surprendre. Enfin, documentez tous vos paramètres avant de mettre à jour votre thème. Vous pourrez ainsi vous remettre rapidement d'une réinitialisation surprise.

Si vous êtes prêt pour un changement de langue instantané et sans frustration, avec Weglot, les changements de langue se font en un clic. Essayez notre version d'essai gratuite de 14 jours et découvrez à quel point la vente multilingue peut être facile.