Vous avez déployé Shopify Markets pour étendre votre activité à l'international, ou vous envisagez de le faire. L'implémentation de sites multilingues, bien que puissante, est souvent source de complexité. Des problèmes inattendus peuvent survenir, affectant l'expérience utilisateur et les performances SEO. Cet article détaille les erreurs courantes et propose des solutions concrètes pour les éviter, en se basant sur des scénarios réels rencontrés lors de l'intégration de Shopify Markets.
Symptômes d'une mauvaise implémentation multilingue
Reconnaître les problèmes tôt est crucial. Voici les signes courants que votre configuration multilingue ou Shopify Markets présente des failles :
- Contenu non traduit ou partiel : Des sections entières de votre site (en-têtes, pieds de page, blocs de texte personnalisés) restent dans la langue par défaut, malgré la sélection d'une autre langue par l'utilisateur.
- URL incorrectes ou non localisées : Les URLs ne reflètent pas la langue ou le marché sélectionné (par exemple, mon-site.com/produit-1 au lieu de mon-site.com/fr-ca/produit-1 ou mon-site.com/en-us/product-1).
- Erreurs de devise : Affichage de la mauvaise devise, problèmes lors du passage en caisse avec une devise inattendue, ou impossibilité de changer la devise manuellement.
- Problèmes de redirection : Les utilisateurs sont redirigés vers un marché ou une langue incorrecte après avoir cliqué sur un lien ou navigué sur le site.
- Mauvaise performance SEO multilingue : Les pages dans des langues secondaires ne sont pas indexées correctement, ou le référencement local est absent. Absence de balises hreflang appropriées.
- Erreurs JavaScript ou Liquid : Le contenu dynamique ou les scripts ne fonctionnent pas correctement dans certaines langues ou sur certains marchés, souvent lié à des sélecteurs de langue ou des données mal interprétées.
- Localisation de thème incomplète : Des traductions manquantes pour des éléments de thème personnalisés, des champs méta, ou des applications tierces.
- Sélecteurs de langue et de pays inopérants : Les menus déroulants ou les boutons de changement de langue/marché ne fonctionnent pas ou ne mettent pas à jour le contenu correctement.
Causes probables des dysfonctionnements
Les origines de ces problèmes sont variées et souvent interconnectées. Elles proviennent généralement d'une compréhension incomplète des mécanismes de Shopify Markets ou d'une négligence des détails techniques :
- Configuration incomplète de Shopify Markets : Ne pas avoir configuré correctement les domaines ou sous-domaines pour chaque marché, ou les langues associées.
- Thème non optimisé pour la mondialisation : Utilisation d'un thème ancien ou personnalisé qui n'a pas été mis à jour pour supporter les fonctionnalités de traduction natives de Shopify ou Shopify Markets.
- Traduction manuelle insuffisante : Ne pas avoir traduit toutes les chaînes de caractères du thème, des champs méta, des produits, des collections, ou des pages statiques via l'éditeur de langue de Shopify ou des applications tierces.
- Dépendances JavaScript codées en dur : Des scripts JavaScript qui ne prennent pas en compte la langue ou la devise active, souvent en supposant une langue par défaut ou en utilisant des sélecteurs CSS génériques.
- Utilisation incorrecte des objets Liquid de globalisation : Mauvaise utilisation de {{ request.locale.iso_code }}, {{ request.market.id }}, {{ localization.country.iso_code }}, {{ localization.currency.iso_code }}, ou d'autres objets liés à la localisation.
- Absence de balises hreflang ou implémentation incorrecte : Oubli d'implémenter ces balises dans le <head> de chaque page pour indiquer aux moteurs de recherche les versions linguistiques et régionales des pages.
- Problèmes d'intégration d'applications tierces : Certaines applications ne sont pas nativement compatibles avec Shopify Markets et peuvent nécessiter des configurations spécifiques ou des correctifs.
- Cache serveur ou CDN mal configuré : Un cache agressif peut servir des versions de page obsolètes ou dans une mauvaise langue aux utilisateurs.
- Redirections automatiques mal gérées : Shopify propose des redirections automatiques basées sur la localisation IP. Si celles-ci ne sont pas correctement configurées ou si le thème ne gère pas les exceptions, des boucles de redirection peuvent apparaître.
Diagnostic étape par étape
Pour identifier la cause exacte, une approche méthodique est nécessaire :
- Vérifiez la configuration Shopify Markets :
- Allez dans "Paramètres" > "Marchés".
- Assurez-vous que chaque marché est activé et configuré avec les bonnes langues, devises et domaines/sous-domaines.
- Vérifiez que les prix sont bien localisés pour chaque marché.
- Examinez les traductions du thème :
- Allez dans "Boutique en ligne" > "Thèmes" > "Actions" > "Modifier les langues".
- Parcourez les différentes sections du thème pour la langue problématique.
- Utilisez l'option "Rechercher" pour trouver des chaînes spécifiques qui ne sont pas traduites.
- N'oubliez pas les métachamps de produits, collections et pages qui doivent être traduits séparément via l'éditeur de contenu.
- Inspectez le code du thème (éditeur de code) :
- Allez dans "Boutique en ligne" > "Thèmes" > "Actions" > "Modifier le code".
- Fichier theme.liquid :
- Recherchez la présence de balises <html lang="{{ request.locale.iso_code }}"> et des balises hreflang (<link rel="alternate" hreflang="xx" href="URL">). Si elles sont absentes, votre SEO multilingue sera impacté.
- Vérifiez comment les objets localization et request sont utilisés pour initialiser les scripts ou définir les variables globales.
- Fichiers JavaScript (par exemple, assets/global.js, assets/theme.js, ou dans des <script> tags dans les sections/snippets) :
- Recherchez les variables ou fonctions qui interagissent avec les langues ou devises.
- Vérifiez si des sélecteurs de devise sont codés en dur ou s'ils utilisent les valeurs dynamiques de Shopify (Shopify.currency.active, Shopify.locale).
- Sections et snippets Liquid (par exemple, sections/*.liquid, snippets/*.liquid) :
- Identifiez les blocs de texte ou les éléments d'interface qui ne sont pas traduits.
- Vérifiez si le filtre | t est utilisé pour toutes les chaînes de caractères affichées (par exemple, <h2>{{ 'general.newsletter.title' | t }}</h2>).
- Examinez l'utilisation de {% if request.locale.iso_code == 'fr' %} pour le contenu spécifique à une langue, bien que l'éditeur de langue soit généralement préférable.
- Fichier cart.liquid ou cart-drawer.liquid :
- Assurez-vous que les prix et les libellés sont correctement affichés selon la devise et la langue du marché.
- Les applications de personnalisation du panier peuvent être une source d'erreurs ici.
- Testez le sélecteur de langue et de devise :
- Changez manuellement la langue et la devise sur votre site pour voir si toutes les parties de la page se mettent à jour correctement.
- Observez l'URL. Elle doit changer pour refléter la nouvelle langue/marché (par exemple, /fr-ca/, /en-us/).
- Vérifiez les erreurs console du navigateur :
- Ouvrez les outils de développement de votre navigateur (F12) et consultez l'onglet "Console" pour détecter les erreurs JavaScript qui pourraient empêcher les mises à jour linguistiques ou de devise.
- Utilisez l'éditeur de thème en mode aperçu :
- Naviguez dans l'éditeur de thème et basculez entre les langues pour voir les traductions en direct et identifier les sections non traduites.
Correction des erreurs courantes
Voici des stratégies pour rectifier les problèmes les plus fréquents :
- Contenu non traduit :
- Solution : Utilisez l'éditeur de langue de Shopify ("Boutique en ligne" > "Thèmes" > "Actions" > "Modifier les langues") pour traduire toutes les chaînes manquantes. Pour les blocs de contenu personnalisés dans les sections, utilisez les blocs de texte dans l'éditeur de thème, qui sont généralement traduisibles. Pour les métachamps, utilisez l'éditeur de contenu Shopify pour chaque langue.
- Code (exemple pour Liquid) : Assurez-vous que toutes les chaînes statiques de votre thème utilisent le filtre | t : <p>{{ 'sections.footer.copyright' | t }}</p>.
- URL non localisées ou redirections erronées :
- Solution : Vérifiez la configuration des domaines dans Shopify Markets. Chaque marché doit avoir un domaine ou sous-domaine associé avec la ou les langues correspondantes. Assurez-vous que vos liens internes sont relatifs ou utilisent l'objet routes de Liquid (par exemple, {{ routes.product_url(product) }}) pour générer des URLs localisées.
- Code (exemple pour Liquid) :
<a href="{{ routes.product_url(product) }}">{{ product.title }}</a>
- Problèmes de devise :
- Solution : Activez toutes les devises nécessaires dans "Paramètres" > "Marchés". Assurez-vous que les applications tierces liées aux paiements sont compatibles avec Shopify Markets. Dans le code, utilisez les objets localization.currency et cart.total_price | money pour afficher les prix dynamiquement.
- Code (exemple pour Liquid) :
<span>{{ product.price | money }}</span>
- Absence ou erreur des balises hreflang :
- Solution : Ces balises sont généralement générées automatiquement par Shopify. Si elles sont manquantes, cela peut indiquer un problème majeur dans votre thème ou une configuration de base incorrecte. Vérifiez que votre thème n'a pas écrasé cette fonctionnalité. Assurez-vous que tous vos marchés ont des langues configurées.
- Code (exemple dans theme.liquid) :
{% if request.page_type == 'product' %}{% for locale in localization.available_locales %}<link rel="alternate" hreflang="{{ locale.iso_code }}" href="{{ routes.product_url(product, locale: locale.iso_code) }}" />{% endfor %}{% endif %}
<link rel="alternate" hreflang="x-default" href="{{ routes.root_url }}" />
Note : Shopify génère souvent ces balises automatiquement, mais des thèmes personnalisés peuvent les supprimer ou les altérer.
- JavaScript ne s'adapte pas à la langue/devise :
- Solution : Au lieu de coder en dur les valeurs, passez les variables de langue et de devise de Liquid au JavaScript.
- Code (exemple dans theme.liquid ou un fichier JS via une balise script) :
<script>
window.Shopify.locale = "{{ request.locale.iso_code }}";
window.Shopify.currency = {
active: "{{ localization.currency.iso_code }}",
rate: "{{ localization.currency.rate }}"
};
</script>
Ensuite, utilisez window.Shopify.locale et window.Shopify.currency.active dans vos scripts.
Prévention des problèmes multilingues
Anticiper et adopter de bonnes pratiques dès le départ permet d'éviter la majorité des problèmes :
- Choisissez un thème moderne et compatible : Optez pour un thème développé par Shopify ou un partenaire reconnu qui est nativement compatible avec Shopify Markets et l'internationalisation.
- Planifiez votre structure de marché : Avant de vous lancer, définissez clairement vos marchés, les langues associées, les devises, et la stratégie de domaine (sous-dossiers, sous-domaines, ou domaines séparés).
- Utilisez l'éditeur de langue de Shopify systématiquement : N'intégrez jamais de texte en dur dans votre code Liquid si ce texte doit être traduit. Utilisez toujours les clés de traduction (| t).
- Traduisez les métachamps et le contenu des pages : N'oubliez pas que les champs méta des produits, collections, et pages ainsi que les contenus riches doivent être traduits pour chaque langue via l'éditeur de contenu Shopify.
- Testez rigoureusement : Après chaque modification, testez votre site dans toutes les langues et sur tous les marchés configurés. Naviguez en tant qu'utilisateur, vérifiez le panier et le processus de commande.
- Sensibilisez votre équipe : Assurez-vous que toutes les personnes qui travaillent sur le site (création de contenu, développement) comprennent les implications de la gestion multilingue.
- Évitez les solutions de traduction tierces si possible : Shopify Markets offre une solution native robuste. Les applications tierces peuvent ajouter de la complexité et des problèmes de performance si elles ne sont pas parfaitement intégrées.
- Minimisez les modifications directes du thème : Si vous devez modifier le code du thème, documentez vos changements et assurez-vous qu'ils ne contredisent pas les mécanismes de localisation de Shopify. Utilisez les blocs d'applications ou les snippets pour vos modifications.
La mise en place d'un site multilingue avec Shopify Markets est une opportunité formidable pour développer votre commerce. Cependant, elle requiert une attention particulière aux détails techniques et une compréhension approfondie des outils de Shopify. En évitant ces erreurs courantes, vous assurez une expérience utilisateur fluide et optimisez votre visibilité à l'international.
Si vous rencontrez des difficultés persistantes ou souhaitez une vérification de votre configuration, notre agence propose un diagnostic gratuit pour évaluer votre implémentation Shopify Markets et vous fournir des recommandations personnalisées.