Sélecteur de langue Shopify : comment l'ajouter et le personnaliser

Le sélecteur de langue Shopify est une fonctionnalité native très utile pour les boutiques multilingues. Il permet aux clients de consulter votre site dans leur langue préférée, ce qui permet à votre marque de conquérir de nouveaux marchés internationaux. Vous pouvez également personnaliser cette fonctionnalité à l'aide d'un code afin qu'elle corresponde mieux à l'esthétique de votre marque.

Toutefois, cette fonctionnalité native présente certains inconvénients, notamment des possibilités de personnalisation limitées par rapport aux solutions tierces.

En intégrant une application de traduction Shopify dédiée, les propriétaires de boutiques peuvent bénéficier de fonctionnalités supplémentaires qui améliorent les performances, stimulent l'engagement des utilisateurs et prennent en charge la partie traduction proprement dite. Par exemple, notre propre application de traduction Shopify, Weglot, offre des options de conception et de placement uniques pour son sélecteur de langue, ce qui la rend adaptable à n'importe quelle mise en page de boutique. De plus, elle fait bien plus que simplement permettre aux utilisateurs de changer de langue. Mais nous y reviendrons plus tard.

Dans cet article, nous vous montrerons comment tirer le meilleur parti du sélecteur de langue natif de Shopify avant d'explorer Weglot Shopify, en détaillant bonnes pratiques traduire votre boutique et offrir une expérience utilisateur optimale.

Points clés

• Le sélecteur de langue intégré à Shopify prend en charge plusieurs langues, mais offre des possibilités de personnalisation limitées par rapport aux applications tierces.
• Weglot une traduction automatique de sites web et des options de personnalisation étendues pour son sélecteur de langue. Il permet également une édition entièrement manuelle et améliore SEO multilingue créant des URL spécifiques à chaque langue et en implémentant des balises hreflang.

Sélecteur de langue Shopify : présentation et configuration

Tout d'abord, examinons le sélecteur de langue intégré à Shopify. Comme nous l'avons mentionné, cette fonctionnalité permet aux propriétaires de boutiques en ligne de prendre en charge plusieurs langues, ce qui améliore naturellement l'expérience utilisateur (UX) pour les clients internationaux.

La sélection manuelle de la langue et la redirection automatique en fonction des préférences du navigateur des visiteurs sont toutes deux prises en charge. Vous pouvez activer la redirection automatique en fonction des préférences du navigateur des visiteurs dans la section Boutique en ligne > Préférences > Redirection automatique > Langue, à condition d'avoir publié les langues concernées et de les avoir rendues disponibles sur vos marchés cibles.

Si le commutateur natif répond à vos besoins, voici comment le configurer.

Configuration des langues et des méthodes de traduction

Avant même qu’un sélecteur de langue n’apparaisse, votre boutique Shopify doit proposer plusieurs langues. Si vous avez déjà configuré vos traductions, n’hésitez pas à passer directement à la section suivante. Sinon, voici comment vous y prendre…

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 constitue une solution pour créer une boutique multilingue. Elle traduit automatiquement et gratuitement votre contenu principal dans deux langues (huit si votre boutique est basée au Royaume-Uni, en Suisse ou dans l'un des dix pays de l'UE), directement depuis la section « Paramètres > Applications » une fois que vous avez ajouté vos langues.

Pour effectuer des modifications en masse, exportez les données linguistiques de votre site au format CSV depuis Paramètres > Langues > Exporter. Modifiez les traductions en masse, puis réimportez-les. L'essentiel est de ne jamais toucher au code Liquid contenu entre ces accolades {{ }} ou ces balises {% %}. Il s'agit du moteur de thème de Shopify, et non de texte brut.

Si vous préférez un contrôle entièrement manuel, Shopify permet aux boutiques de gérer jusqu’à 20 langues (30 sur Shopify Plus). Rendez-vous dans 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

La fonction de changement de langue intégrée à Shopify se trouve généralement dans l'éditeur de thème, dans la section « En-tête » ou « Pied de page ». Son emplacement exact et ses options de personnalisation dépendent de votre thème et de sa version.

Suivez les étapes suivantes :

1. Dans l'interface d'administration de Shopify, accédez à Boutique en ligne > Thèmes > Modifier le thème.
2. Ouvrez la section « En-tête » ou « Pied de page », selon l'endroit où vous souhaitez que le sélecteur apparaisse.
3. Recherchez un paramètre intitulé « Activer le sélecteur de langue », « Afficher le sélecteur de langue » ou « Localisation ».
4. Activez le sélecteur, puis cliquez sur « Enregistrer ».

Dès que votre boutique proposera plusieurs langues publiées sur le marché de vos clients, le sélecteur de langue devrait afficher les options linguistiques disponibles.

Les thèmes gratuits de Shopify, notamment Dawn, Craft, Refresh, Sense et Studio, prennent en charge les sélecteurs de langue aussi bien dans l'en-tête que dans le pied de page dans leurs versions actuelles. Les thèmes gratuits de la boutique en ligne 2.0 à partir de la version 9.0.0, ainsi que les thèmes de la famille Horizon, permettent de placer le sélecteur de langue dans l'en-tête sans code supplémentaire.

Pour les thèmes premium, les options de placement varient. Par exemple, le thème Impulse permet de sélectionner la langue dans la barre d'outils de l'en-tête et dans le pied de page, tandis que d'autres thèmes peuvent proposer des paramètres ou des emplacements différents. Consultez la documentation du développeur de votre thème si vous ne trouvez pas cette option.

Les thèmes plus anciens peuvent offrir moins d'options de personnalisation. Si votre thème ne prend pas en charge l'emplacement de votre choix, vous devrez peut-être modifier ses modèles Liquid, passer à un thème plus récent ou utiliser une application de traduction disposant de ses propres commandes de placement.

L'apparence du sélecteur dépend également de votre thème. Les sélecteurs intégrés affichent généralement les noms des langues et reprennent les polices, les couleurs et le style de votre boutique. Certains thèmes proposent des paramètres de mise en forme supplémentaires, tandis qu'une personnalisation plus poussée peut nécessiter l'utilisation de CSS.

Vérifiez également la mise en page mobile à l'aide de l'aperçu du thème proposé par Shopify. Selon votre thème, le sélecteur peut apparaître dans le pied de page, l'en-tête ou le menu de navigation mobile. Assurez-vous que les clients puissent facilement le trouver et l'utiliser sur les petits écrans, et placez le sélecteur de pays/région à proximité si vous affichez les deux.

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

Vous pouvez ajouter un sélecteur de langue à l'en-tête de votre boutique Shopify via les paramètres intégrés à votre thème, ou utiliser l'éditeur Switcher Editor de Weglot pour placer un sélecteur personnalisable sans avoir à modifier le code de votre thème.

Pour ajouter le sélecteur de langue natif de Shopify, comme expliqué précédemment, rendez-vous dans l'interface d'administration de Shopify > Boutique en ligne > Thèmes > Modifier le thème, ouvrez la section « En-tête », recherchez l'option « Activer le sélecteur de langue » ou un paramètre similaire, activez le sélecteur, puis cliquez sur « Enregistrer ».

Si vous utilisez Weglot, accédez àWeglot , puis sélectionnez Tableau de bord > Paramètres > Sélecteur de langue > Éditeur du sélecteur. Faites glisser le sélecteur à l'emplacement de votre choix dans l'en-tête, puis cliquez sur Enregistrer. Choisissez un emplacement qui apparaît systématiquement sur toutes les pages de votre boutique afin que le sélecteur reste en place lorsque les clients naviguent sur le site.

Pour un positionnement plus précis, Weglot prend également en charge cet élément de remplacement HTML :

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

Vous pouvez l'ajouter à une section ou à un bloc « Custom Liquid » dans la zone d'en-tête de votre thème, si celle-ci le prend en charge, ou l'insérer dans le fichier de thème approprié. Weglot affiche alors le sélecteur à l'endroit où apparaît l'espace réservé. L'emplacement exact dépend de la mise en page de votre thème.

Une fois la configuration terminée, testez toujours le sélecteur sur ordinateur et sur mobile, notamment sur les pages de produits et de collections. Testez également votre processus de paiement, car Shopify gère le paiement séparément de l’en-tête de votre boutique ; ainsi, l’ajout d’un sélecteur à cet endroit n’entraîne pas automatiquement son ajout au processus de paiement. Si vous utilisez l’intégration Shopify Markets deWeglot, Shopify gère la langue du paiement en fonction de la sélection précédente du client, et le sélecteur « Weglot » n’apparaît pas pendant le processus de paiement.

Intégration du Switcher avec Liquid Code

Si votre thème Shopify ne propose pas l'emplacement ou les options de mise en page dont vous avez besoin pour le sélecteur de langue, vous pouvez créer un sélecteur personnalisé à l'aide de Liquid. Cela nécessite de modifier le code de votre thème ; veillez donc à effectuer une sauvegarde avant de continuer.

Pour configurer et personnaliser le sélecteur de langue Shopify, vous devez suivre les étapes suivantes :

1. Depuis votre interface d'administration Shopify, accédez à Paramètres > Langues et ajoutez les langues que vous souhaitez prendre en charge. Assurez-vous qu'elles sont disponibles sur vos marchés cibles et que vous avez ajouté les traductions nécessaires.
2. Accédez à « Boutique en ligne > Thèmes », puis cliquez sur « Modifier le code » dans le menu à trois points de votre thème.
3. Recherchez le fichier header.liquid dans le répertoire Sections. Le nom exact du fichier et l'emplacement d'insertion approprié dépendent de votre thème ; vérifiez donc sa structure avant d'apporter des modifications.
4. Trouvez un emplacement approprié dans le fichier header.liquid (généralement près du menu de navigation) et collez snippet de code Liquid suivant :

{% if localization.available_languages.size > 1 %}
  <div class="page-width custom-language-topbar">
    {% form 'localization', id: 'header-language-form' %}
      <div class="shopify-language-switcher">
        <label for="header-language-selector">Language</label>

        <select
          id="header-language-selector"
          name="language_code"
        >
          {% for language in localization.available_languages %}
            <option
              value="{{ language.iso_code }}"
              {% if language.iso_code == localization.language.iso_code %}selected{% endif %}
            >
              {{ language.endonym_name | escape }}
            </option>
          {% endfor %}
        </select>

        <button type="submit">Apply</button>
      </div>
    {% endform %}
  </div>
{% endif %}

L'emplacement de votre code Liquid détermine l'endroit où le sélecteur de langue s'affiche sur la page d'accueil de votre boutique. Par exemple, si vous le placez dans la zone de navigation de votre en-tête, il s'affichera aux côtés de votre menu, tandis que si vous le placez dans un conteneur distinct au-dessus de la navigation, vous obtiendrez une barre dédiée à la sélection de la langue.

Ce code utilise le formulaire de localisation de Shopify pour récupérer les langues disponibles pour les clients. Il affiche chaque langue sous son nom d'origine, par exemple « Français » pour le français, et signale la langue actuelle comme étant sélectionnée. Les clients choisissent une langue dans le menu déroulant et cliquent sur « Appliquer » pour changer de langue.

Si votre thème affiche déjà un sélecteur de langue au même endroit, désactivez-le via l'éditeur de thème afin d'éviter toute duplication.

5. Vous pouvez utiliser le CSS pour contrôler l'alignement, les couleurs, l'espacement et les bordures du sélecteur. Dans l'éditeur de thème, ouvrez « Paramètres du thème > CSS personnalisé » et ajoutez l'exemple suivant :

.custom-language-topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}

.custom-language-topbar .shopify-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.shopify-language-switcher select {
  font: inherit;
  font-size: 16px;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
}

.shopify-language-switcher select:hover {
  border-color: #555;
}

.shopify-language-switcher select:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

6. Une fois vos modifications effectuées, cliquez sur « Enregistrer » pour les appliquer. Le sélecteur de langue devrait désormais s'afficher dans votre boutique conformément à vos préférences. Prévisualisez votre boutique sur ordinateur et sur mobile.

Améliorer les boutiques Shopify grâce au sélecteur de langue Weglot

Weglot est un outil de traduction de sites web basé sur l'IA qui ajoute un sélecteur de langue à votre boutique Shopify sans que vous ayez à modifier votre thème. Bien que le sélecteur de langue natif de Shopify soit fonctionnel, des applications de traduction dédiées à Shopify telles que Weglot offrent davantage de possibilités de personnalisation, ainsi que des fonctionnalités de traduction Shopify supplémentaires pour ceux qui souhaitent véritablement localiser l'expérience d'achat de leurs clients internationaux.

Contrairement au sélecteur de langue Shopify, Weglot traduit Weglot 100 % du contenu du site à partir d'un choix de plus de 110 langues, y compris les pages de paiement, les notifications par e-mail et les métadonnées SEO, en l'optimisant pour les moteurs de recherche.

Avec Weglot, l'ensemble de votre boutique Shopify bénéficie d'une traduction automatique, ce qui accélère les projets d'expansion. Par rapport à l'embauche de traducteurs individuels pour chaque langue, l'automatisation de Weglotréduit considérablement le temps de mise sur le marché des nouvelles versions linguistiques.

Cependant, les capacités de Weglotne s'arrêtent pas à la traduction automatique. Avec Weglot, vous disposez d'un contrôle total sur le contenu traduit de votre site. Vous pouvez également engager des traducteurs professionnels directement via la plateforme.

Vous pouvez également générer instantanément des traductions fidèles à l'esprit de votre marque grâce au modèle de traduction par IA d'Weglot. Celui-ci apprend à partir de vos instructions, de votre glossaire et de l'historique de vos traductions manuelles pour vous fournir immédiatement des traductions adaptées au contexte et qui reflètent votre style.

Weglot s'intègre également aux fonctionnalités existantes de Shopify et aux applications tierces les plus populaires, y compris la personnalisation de thèmes tels que Dawn et Prestige. Il n'est donc plus nécessaire de gérer plusieurs boutiques ou d'effectuer des traductions manuelles, car vous pouvez ajouter, publier, dépublier ou supprimer des langues en fonction de vos besoins.

Weglot ne se contente pas de traduire, il propose Weglot des services de SEO multilingue au cœur de l'application. La plateforme crée automatiquement des sous-domaines ou des sous-répertoires pour chaque version linguistique et implémente des balises hreflang, optimisant ainsi votre site pour les moteurs de recherche locaux. De plus, notre Visual Editor permet de personnaliser facilement les traductions, ce qui permet de les affiner pour qu'elles correspondent à l'image de votre marque.

Mieux encore, la configuration de Weglot la personnalisation de votre sélecteur de langue ne prennent que quelques instants ! Voyons cela de plus près.

Configurer Weglot sur votre boutique Shopify

L'installation de Weglot sur votre boutique Shopify est très simple. Voici un guide pour vous aider à démarrer :

1. Commencez par visiter le Shopify App Store:

• Dans la barre de recherche, tapez Weglot et localisez l'application Weglot .
• Cliquez sur Installer et suivez les prompts pour l'ajouter à votre boutique.

2. Après avoir installé l'application, vous devez créer un compte :

• Ouvrez l'application Weglot depuis votre tableau de bord Shopify.
• Saisissez votre adresse électronique et choisissez un mot de passe.

3. Configurez vos paramètres linguistiques :

• Ensuite, sélectionnez votre langue d'origine (la langue de votre boutique Shopify).
• Choisissez ensuite les langues cibles dans lesquelles vous souhaitez traduire votre contenu.

Après avoir sélectionné vos langues, Weglot analysera automatiquement tout le contenu de votre boutique, y compris les métadonnées et le contenu des applications tierces. La détection automatique signifie que vous n'aurez pas à rassembler manuellement le contenu à traduire, car Weglot s'en charge pour vous !

Votre site est alors traduit instantanément à l'aide d'une technologie de traduction par IA de pointe, puis affiché dans des sous-répertoires ou des sous-domaines dédiés à chaque langue, selon la structure que vous avez choisie dans le tableau de bord d'Weglot .

Personnalisation du sélecteur de langue Weglot: options de conception et d'emplacement

Le sélecteur de langue Weglotoffre de nombreuses options de personnalisation, vous permettant de l'adapter à l'image de marque de votre boutique pour un résultat final ultra-professionnel. Voici comment le personnaliser :

1. Accédez à l'éditeur du sélecteur de langue visuel : rendez-vous sur votre Weglot , puis naviguez vers Paramètres > Sélecteur de langue.
2. Modifier l'apparence : Choisissez parmi différents formats, tels que des menus déroulants, des boutons ou des drapeaux, pour afficher les options de langue. Par exemple :
   • Utiliser des drapeaux pour une reconnaissance rapide.
   • Optez pour des boutons pour un affichage plus visible.

3. Ajustez la position : Vous pouvez placer le sélecteur dans des zones clés telles que l'en-tête, le pied de page ou la barre latérale, en fonction de ce qui convient le mieux à votre mise en page.
4. Modifier les couleurs et les styles : Personnalisez les couleurs et les styles dans les paramètres de Weglot pour qu'ils correspondent à l'image de marque de votre magasin.

Il est important de noter que le sélecteur de langue peut être facilement repositionné sans aucune modification du thème, ce qui garantit qu'il reste accessible et convivial sur les différentes pages de votre boutique. Pour un placement avancé, consultez notre section ci-dessous sur la résolution des problèmes courants liés à la localisation des boutiques Shopify.

Personnalisation avancée : Conseils de codage pour les développeurs

Pour les développeurs qui cherchent à améliorer leurs boutiques Shopify avec Weglot, la personnalisation peut être la clé pour créer une expérience multilingue sur mesure. La flexibilité de Weglotpermet aux développeurs de créer des expériences multilingues personnalisées tout en restant conviviales pour les utilisateurs non techniques.

Voici quelques conseils de codage à prendre en compte :

Utilisation du CSS pour affiner l'apparence du sélecteur de langue

Les développeurs peuvent modifier les styles tels que la couleur d'arrière-plan, la taille de la police et le remplissage pour qu'ils correspondent à l'image de marque du magasin. Par exemple :

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

Mise en œuvre de JavaScript pour des fonctionnalités personnalisées

Les développeurs peuvent utiliser JavaScript pour déclencher des actions spécifiques lorsqu'une langue est sélectionnée, comme la mise à jour d'autres éléments de la page ou le suivi des changements de langue à des fins d'analyse. Vous pouvez, par exemple, mettre en place un récepteur d'événements :

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="language_code"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

Mise en œuvre de Weglot pour des transitions de page transparentes entre les langues

L'une des fonctionnalités clés Weglotest la création automatique d'URL spécifiques à chaque langue, telles que example.com/fr pour les versions françaises de votre site. Une structure d'URL solide garantit que les moteurs de recherche peuvent indexer chaque version linguistique, améliorant ainsi vos SEO multilingue .

Weglot aide les clients à passer facilement d'une langue à l'autre au cours de leur expérience d'achat, qu'il s'agisse de parcourir des produits ou de passer à la caisse. Lorsqu'un client passe d'une page de produit en anglais à son équivalent en espagnol, par exemple, il bénéficie d'une transition fluide sans perdre sa place dans le parcours d'achat. De telles fonctionnalités peuvent avoir un impact sur des indicateurs clés tels que le temps passé sur le site et les taux de conversion, améliorant ainsi la satisfaction des clients et stimulant en fin de compte la croissance globale.

Pour donner un exemple, Everyone.org - qui a utilisé Weglot pour créer un site web multilingue en 12 langues - a connu une augmentation de 40 % du nombre total de visiteurs, les utilisateurs francophones convertissant à près du double du taux de conversion moyen sur l'ensemble du site.

Optimisation SEO multilingue maintien de la cohérence des pages

SEO multilingue que vos produits sont visibles par les utilisateurs effectuant des recherches dans différentes langues, ce qui génère du trafic en ligne. Un aspect fondamental du SEO multilingue disposer d'une structure d'URL appropriée. L'utilisation de sous-répertoires aide les moteurs de recherche à identifier et à classer les pages dans différentes langues.

Les balises Hreflang jouent un rôle important dans ce processus en informant les moteurs de recherche de la langue et du ciblage régional de vos pages. Cela permet de diriger les utilisateurs vers la version la plus pertinente de votre site.

Les métadonnées traduites, y compris les balises de titre et les descriptions, contribuent également à une meilleure visibilité dans les moteurs de recherche. Weglot automatise une grande partie du travail technique de référencement, en créant automatiquement des URL spécifiques à chaque langue et en implémentant des balises hreflang sans intervention manuelle.

De plus, Visual Editor le glossaire linguistique Weglotpermettent aux propriétaires de boutiques en ligne de garantir la cohérence des traductions.

Pour aller plus loin avec SEO multilingue, les propriétaires de boutiques Shopify peuvent procéder comme suit :

• Effectuer une recherche de mots-clés localisés pour chaque marché cible.
• Veiller à ce que tout le contenu, y compris les métadonnées, soit traduit avec précision.
• Réviser régulièrement les traductions pour tenir compte de l'évolution des tendances linguistiques.

N'oubliez pas qu'une stratégie « SEO multilingue » efficace peut vous ouvrir de nouvelles opportunités commerciales ! Après avoir mis en place Weglot pour optimiser son site en plusieurs langues, Ron Dorff, propriétaire d'une boutique Shopify, a constaté une augmentation spectaculaire de 400 % du nombre de visites sur son site.

Surmonter les défis courants de la localisation des boutiques Shopify

La localisation des boutiques Shopify s'accompagne de défis particuliers, mais Weglot propose des solutions efficaces pour vous faciliter la tâche.

Pour modifier la position du sélecteur Weglot sur un site Shopify, vous pouvez utiliser l'une des quatre méthodes suivantes :

1. Fonctionnalité de l'éditeur de commutateur

Utilisez l'éditeur Switcher pour glisser-déposer le sélecteur de langue directement sur un aperçu en direct de votre site web. Cette méthode nécessite que votre site soit en ligne.

2. Ajouter à un menu

Créez un sélecteur de langue personnalisé dans votre menu principal en le reliant aux Weglot . Accédez à Shopify Admin > Boutique en ligne > Navigation, ajoutez des éléments de menu pour chaque langue en utilisant le formatWeglot(par exempleWeglot pour l'anglais). Vous pouvez également créer un menu déroulant pour les langues.

3. Option Weglot

Insérez snippet de code suivant snippet votre fichier Theme.liquid à l'emplacement souhaité :

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

Ce code placera le sélecteur de langue à l'endroit où vous insérez le code, ce qui résoudra les problèmes courants de placement évoqués dans les forums communautaires.

4. Option de commutation

Intégrez manuellement le sélecteur en modifiant votre code d'initialisation Weglot dans weglot.liquid. Incluez l'option Switchers et spécifiez le sélecteur CSS cible pour l'endroit où vous voulez que le sélecteur apparaisse :

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

Veillez à remplacer .header-nav par le sélecteur CSS de l'élément souhaité.

L'utilisation de Weglot vous permettra également de bénéficier des avantages suivants en matière de localisation :

• Traduction de contenu dynamique : Weglot traduit efficacement le contenu généré par JavaScript et les éléments chargés par AJAX, garantissant que tout le contenu dynamique est capturé et traduit.
• SEO multilingue Shopify : Weglot la mise en place des balises hreflang et crée des plans de site spécifiques à chaque langue. Cela complète les fonctionnalités SEO intégrées à Shopify, permettant aux moteurs de recherche de proposer la bonne version linguistique aux utilisateurs.

• Traduction des éléments spécifiques à Shopify : Weglot prend en charge la traduction de l'ensemble de votre boutique, y compris les pages de paiement, les notifications par e-mail et les champs méta, ce qui permet de contourner les limitations décrites dans la documentation de Shopify.

• Optimiser les flux de traduction : Les mémoires de traduction et les glossaires de Weglotvous aident à maintenir la cohérence d'un large catalogue de produits. Les termes sont ainsi traduits de manière uniforme, ce qui garantit la cohérence du message de votre marque dans les différentes langues.

Comparaison entre Weglot le sélecteur de langue natif de Shopify

Shopify fournit aux utilisateurs les outils de base nécessaires pour traduire leurs boutiques en plusieurs langues, mais il existe des limites.

En revanche, Weglot offre une solution de traduction complète et répond aux limites de Shopify. Par conséquent, la plateforme est une option plus appropriée pour les utilisateurs qui souhaitent une approche non interventionniste de la gestion de contenu multilingue.

Surmonter les barrières linguistiques : Implémentez Weglot sur votre boutique Shopify

Comme nous l'avons vu, Weglot des avantages uniques aux boutiques Shopify, ce qui en fait la solution idéale pour surmonter les barrières linguistiques en ligne. Grâce au sélecteur de langue Weglot, vous bénéficiez de personnalisations supplémentaires pour améliorer l'expérience utilisateur, tandis que Visual Editor des traductions en contexte, vous permettant d'affiner le contenu là où cela est nécessaire. Vous pouvez même commander des traductions professionnelles directement depuis le tableau de bord pour une plus grande précision.

Weglot s'intègre aux applications populaires de Shopify, y compris les outils de recherche intelligents et les galeries d'images, garantissant que votre boutique reste entièrement fonctionnelle dans plusieurs langues. En outre, notre plateforme crée des sous-domaines ou des sous-répertoires spécifiques à chaque langue, ce qui stimule considérablement vos efforts en matière de référencement.

De plus, Weglot est compatible avec tous les systèmes de gestion de contenu, ce qui signifie que si vous abandonnez Shopify, vous n'aurez pas à perdre les avantages de Weglot.

Commencez dès aujourd'hui votre essai gratuit de 14 jours avec Weglot et profitez d'un site multilingue en quelques minutes !

Problèmes courants et solutions rapides

Les boutons de changement de langue disparaissent parfois après une mise à jour du thème, l'installation d'une application ou une modification de la mise en page. Ces problèmes sont généralement liés aux paramètres de votre thème ou à l'emplacement du bouton de changement de langue. Voyons comment résoudre les quatre problèmes les plus courants.

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

La présence de deux boutons de basculement signifie généralement que le bouton natif de Shopify et celui de votre application (tel que Weglot) sont tous deux actifs en même temps. Il se peut également que vous ayez configuré plusieurs boutons de basculement « Weglot ».

Commencez par ouvrir l'interface d'administration Shopify > Boutique en ligne > Thèmes > Modifier le thème. Vérifiez si le sélecteur de langue natif de Shopify figure dans l'en-tête et le pied de page ; désactivez-le si vous utilisez Weglot, puis enregistrez vos modifications. Le paramétrage exact dépend de votre thème. Par ailleurs, laissez le sélecteur de pays/région activé si vos clients en ont besoin pour choisir leur marché.

Si les deux sélecteurs appartiennent à Weglot, rendez-vous sur Weglot , puis dans Tableau de bord > Paramètres > Sélecteur de langue > Éditeur de sélecteur. Vérifiez quels sélecteurs sont configurés et s’ils sont paramétrés pour s’afficher aux mêmes tailles d’écran. Weglot prend en charge des sélecteurs distincts pour ordinateur de bureau et mobile ; assurez-vous donc qu’ils ne s’affichent pas ensemble par inadvertance.

Si vous avez ajouté des liens vers les différentes langues dans votre menu de navigation Shopify, vérifiez s'ils s'affichent à côté du sélecteur habituel de Weglot. Supprimez les éléments de menu superflus si vous n'avez pas besoin des deux.

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.

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

Si votre sélecteur de langue disparaît après la mise à jour de votre thème Shopify, cela ne signifie pas nécessairement que vos traductions ont disparu. Le problème peut provenir des paramètres du sélecteur ou de son emplacement dans le thème mis à jour.

Testez l'une des URL traduites de votre boutique, par exemple yourstore.com/fr/, si votre configuration utilise des sous-répertoires par langue. Si la page affiche bien le contenu traduit mais que le sélecteur de langue est absent, le problème provient peut-être de l'affichage du sélecteur plutôt que des traductions elles-mêmes.

Si vous utilisez le sélecteur de langue intégré à Shopify, vérifiez bien 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.

Si vous utilisez Weglot:

1. Vérifiez que l'option « Weglot » est activée : ouvrez Boutique en ligne > Thèmes > Modifier le thème > Intégrations d'applications, recherchez « Weglot » et activez-la si elle est désactivée. Cliquez sur « Enregistrer » puis vérifiez votre boutique.
2. Réinitialiser la position du sélecteur : s'il est toujours introuvable, accédez à Weglot Tableau de bord > Paramètres > Sélecteur de langue > Éditeur du sélecteur. Dans la section « Position », sélectionnez « Réinitialiser à la position par défaut ». Le sélecteur revient alors dans le coin inférieur droit.

3. Choisissez un nouvel emplacement si nécessaire : si le sélecteur réapparaît, son emplacement précédent ne fonctionne peut-être plus avec votre thème mis à jour. Utilisez l'éditeur de sélecteur pour le faire glisser vers un nouvel emplacement à l'intérieur d'un élément présent de manière cohérente dans toute votre boutique, puis cliquez sur « Enregistrer ».

Si vous avez ajouté manuellement le sélecteur de Weglot au code de votre thème, vérifiez si la mise à jour a conservé votre emplacement personnalisé. Par exemple, si vous utilisiez auparavant <div id="weglot_here"></div>, vérifiez qu'il se trouve toujours à l'emplacement prévu. S'il a été supprimé, restaurez-le à partir de la version précédente de votre thème après vous être assuré que son emplacement est compatible avec la mise en page mise à jour.

Vérifiez également l'affichage de votre boutique en ligne aussi bien sur ordinateur que sur mobile. Si le sélecteur fonctionne sur ordinateur mais pas sur mobile, cela peut être dû aux paramètres de visibilité liés à la taille de l'écran ou à la mise en page mobile de votre thème. C'est ce que nous allons aborder ensuite.

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

Si votre sélecteur de langue Shopify s'affiche sur ordinateur mais disparaît sur mobile, il est peut-être masqué par la mise en page mobile de votre thème ou configuré pour s'afficher uniquement sur les grands écrans.

Si vous utilisez le sélecteur intégré à Shopify, accédez à Boutique en ligne > Thèmes > Modifier le thème, puis sélectionnez l'aperçu mobile. Vérifiez si le sélecteur de langue apparaît dans le pied de page, l'en-tête ou le menu mobile, selon votre thème. S'il n'apparaît pas, assurez-vous que le paramètre correspondant est bien activé. Certains thèmes peuvent nécessiter une personnalisation supplémentaire pour l'afficher à l'emplacement de votre choix sur la version mobile.

Si vous utilisez Weglot:

1. Ouvrez le tableau de bord d'Weglot > Paramètres > Sélecteur de langue > Éditeur du sélecteur.
2. Sélectionnez votre commutateur existant dans le menu déroulant situé dans le coin supérieur gauche. Dans la section Comportement > Affichage sur des tailles d'écran spécifiques, vérifiez qu'il est configuré pour s'afficher sur les appareils mobiles.
3. Si vous souhaitez une mise en page mobile différente, sélectionnez l'aperçu mobile en bas à gauche de l'éditeur, cliquez sur le bouton « + » pour créer un sélecteur distinct, puis faites-le glisser à l'emplacement de votre choix.
4. Cliquez sur « Enregistrer », puis vérifiez que vos pages d'adaptation pour ordinateur et mobile s'affichent correctement sur les tailles d'écran prévues.

Si l'en-tête de votre site mobile ne dispose pas de suffisamment d'espace, vous pouvez également ajouter des liens vers les différentes langues dans le menu de navigation de votre site mobile. Rendez-vous sur Panneau d'administration Shopify > Contenu > Menus, sélectionnez le menu utilisé par votre navigation mobile, puis ajoutez un élément de menu pour chaque langue en utilisant le format de lien proposé par Weglot, par exemple : #Weglot-en pour l'anglais ou #Weglot-fr pour le français. Vous pouvez également regrouper ces liens dans un menu déroulant « Langues » si votre thème le permet.

Si le bouton de sélection est toujours introuvable, vérifiez si un CSS personnalisé ne le masque pas sur les petits écrans ou s'il n'est pas placé à l'intérieur d'un élément de navigation réservé aux ordinateurs de bureau. Le déplacer vers un emplacement visible et cohérent pourrait résoudre le problème.

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

Si votre sélecteur de langue Weglot n'apparaît qu'après avoir actualisé la page, le problème peut être lié à la manière dont votre thème Shopify charge le contenu ou à l'emplacement du sélecteur.

Essayez ces solutions :

1. Réinitialisez la position du commutateur comme nous l'avons fait dans le deuxième problème ci-dessus. Si le commutateur s'affiche désormais de manière cohérente, son emplacement précédent est peut-être à l'origine du problème. Weglot recommande de le placer à l'intérieur d'un élément présent sur toutes les pages de votre boutique.
2. Vérifiez les transitions entre les pages de votre thème. Certains thèmes Shopify utilisent des animations ou la navigation AJAX pour passer d’une page à l’autre sans les recharger entièrement, ce qui peut nuire aux performances du site ( Weglot). Si votre thème propose ces paramètres, rendez-vous dans Boutique en ligne > Thèmes > Modifier le thème > Paramètres du thème, puis recherchez les sections « Performances » ou « Animations ». Weglot recommande de sélectionner « Sport » plutôt que « Ludicrous » et de désactiver l’option « Animer entre les pages », lorsque ces options sont disponibles.
3. Vérifiez tout code personnalisé du sélecteur. Si vous avez modifié manuellement l'emplacement de Weglot, assurez-vous que l'emplacement choisi existe bien au moment du chargement du sélecteur. Un élément d'en-tête ou de navigation apparaissant ultérieurement pourrait nécessiter un travail d'intégration supplémentaire.

Enfin, testez votre boutique dans une fenêtre de navigateur privée, en commençant par la page d'accueil, puis en accédant à différentes pages de produits et de collections. Si le problème persiste, contactez l'assistance d'Weglot en indiquant l'URL de votre boutique, le nom du thème et les étapes nécessaires pour reproduire le problème.