Shopify Language Switcher : Améliorer l'expérience utilisateur

Le sélecteur de langue de Shopify est une fonctionnalité native utile pour les magasins multilingues. Elle permet aux clients de consulter votre site dans la langue de leur choix, ce qui permet à votre marque de conquérir de nouveaux marchés internationaux. Vous pouvez également personnaliser cette fonctionnalité en utilisant un code, afin qu'elle corresponde mieux à l'esthétique de votre marque.

Cependant, la fonction native présente des inconvénients, notamment l'absence de commutation automatique de la géolocalisation et des possibilités de personnalisation limitées par rapport aux solutions tierces.

En intégrant une application de traduction dédiée à Shopify, les propriétaires de boutiques peuvent bénéficier de fonctions supplémentaires qui améliorent la fonctionnalité, 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 d'emplacement uniques pour son sélecteur de langue, ce qui lui permet de s'adapter à n'importe quel agencement de magasin. De plus, elle ne se contente pas de 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 maternelle de Shopify avant d'explorer Weglot sur Shopify, en détaillant bonnes pratiques pour traduire votre boutique et offrir une expérience utilisateur optimale.

Points clés

• Le sélecteur de langues de Shopify prend en charge plusieurs langues, mais il manque la géolocalisation automatique et la personnalisation par rapport aux applications tierces.
• Weglot offre une traduction automatique des 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 en créant des URL spécifiques à chaque langue et en mettant en œuvre des balises hreflang.

Shopify Language Switcher : Vue d'ensemble

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 de prendre en charge plusieurs langues, ce qui améliore naturellement l'expérience utilisateur (UX) pour les clients internationaux.

N'oubliez pas que le sélecteur de langue de Shopify ne détecte pas et n'affiche pas automatiquement la langue en fonction des préférences de l'utilisateur sans personnalisation ou application supplémentaire. La fonctionnalité native prend principalement en charge la sélection manuelle de la langue par l'utilisateur.

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

1. Depuis la page d'administration de Shopify, accédez à Paramètres > Langues et ajoutez les langues que vous souhaitez prendre en charge.
2. Allez dans la boutique en ligne > Thèmes, sélectionnez votre thème et cliquez sur Modifier le code. Localisez le fichier header.liquid dans le répertoire Sections.
3. Trouvez un endroit approprié dans le fichier header.liquid (généralement près du menu de navigation) et collez le code Liquid suivant snippet:

<form action="{{ routes.root_url }}" method="get">  
 <select name="locale" onchange="this.form.submit()">    
  {% for locale in localization.available_locales %}      
   <option value="{{ locale | escape }}" {% if locale == localization.current_locale %}selected{% endif %}>        
    {{ locale.name }}      
   </option>    
  {% endfor %}  
 </select>
</form>

4. Votre sélecteur est maintenant en place. Pour adapter le design de votre boutique, vous pouvez ajouter des règles CSS personnalisées dans la feuille de style de votre thème. Si nécessaire, l'utilisation de sélecteurs spécifiques tels que select [name="locale"] peut empêcher le stylisme involontaire d'autres éléments de sélection d'une page.

Voici un exemple de modification de la couleur d'arrière-plan :

select {    
background-color: #fff;    
 border: 1px solid #ccc;    
 padding: 5px;
}

Voici comment styliser la police et la couleur du texte du sélecteur :

select {    
font-family: 'Arial', sans-serif; /* Change font type */    
 font-size: 16px; /* Set font size */    
 color: #333; /* Text color */
}

select option {    
background-color: #f9f9f9; /* Background color for options */    
 color: #555; /* Text color for options */
}

Vous pouvez également ajouter des effets de survol et modifier la taille des bordures :

select {    
border-radius: 5px; /* Rounded corners */    
 border: 2px solid #007bff; /* Blue border */}

select:hover {    
border-color: #0056b3; /* Darker blue on hover */    
background-color: #e9ecef; /* Light gray background on hover */
}

5. Après avoir effectué vos modifications, cliquez sur Enregistrer pour les appliquer. Le sélecteur de langue devrait maintenant apparaître dans votre boutique selon vos préférences.

Améliorer les boutiques Shopify avec le sélecteur de langues de Weglot

Bien que le sélecteur de langue de Shopify soit fonctionnel, les applications de traduction dédiées à Shopify, telles que Weglot, offrent des personnalisations plus poussées, ainsi que des fonctionnalités de traduction supplémentaires pour ceux qui souhaitent réellement localiser l'expérience de leur boutique pour leurs clients internationaux.

Contrairement au sélecteur de langues de Shopify, Weglot traduit automatiquement 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 de référencement, en les 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 Weglot réduit considérablement le temps de mise sur le marché des nouvelles versions linguistiques.

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

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 s'occupe pas seulement de la traduction, mais aussi des 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 met en œuvre 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 adapter à la voix de votre marque.

Mieux encore, l'installation de Weglot et la personnalisation de votre sélecteur de langue peuvent être réalisées en quelques instants ! Jetons un coup d'œil.

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

Ensuite, votre site est instantanément traduit à l'aide d'une traduction automatique de premier plan et affiché dans des sous-répertoires ou sous-domaines linguistiques, selon la structure que vous avez choisie dans le tableau de bord Weglot.

Personnalisation du sélecteur de langue de Weglot : Options de conception et de placement

De nombreuses options de personnalisation sont disponibles pour le sélecteur de langue de Weglot, ce qui vous permet de l'adapter à l'image de marque de votre boutique pour un résultat final très professionnel. Voici comment le personnaliser :

1. Accédez à l'éditeur visuel du sélecteur de langue : Allez sur votre tableau de bord Weglot et naviguez vers Paramètres > Sélecteur de langue.
2. Modifier l'apparence : Choisissez parmi différents formats, tels que des listes déroulantes, des boutons ou des drapeaux, pour afficher les options linguistiques. Par exemple : du texte
   • 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 repositionné facilement sans 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 façon de surmonter les défis 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 Weglot permet 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 de 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="locale"]');    
 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 principales fonctionnalités de Weglot est la création automatique d'URL spécifiques à chaque langue, comme par exemple example.com/fr pour les versions françaises de votre site. Une bonne structure d'URL garantit que les moteurs de recherche peuvent indexer chaque version linguistique, améliorant ainsi vos efforts sur le siteSEO 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.

Optimiser SEO multilingue et maintenir la cohérence des pages

SEO multilingue garantit que vos produits peuvent être découverts par des utilisateurs effectuant des recherches dans différentes langues, ce qui stimule le trafic en ligne. Un aspect fondamental de SEO multilingue est d'avoir une structure URL appropriée, et 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.

En outre, le site Visual Editor et le glossaire linguistique de Weglot permettent aux propriétaires de magasins de maintenir 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'un site SEO multilingue efficace peut vous permettre d'accroître vos débouchés commerciaux ! Après avoir mis en œuvre Weglot pour l'optimisation multilingue, Ron Dorff, une boutique Shopify, a découvert une demande importante du marché allemand, qui n'avait pas été exploitée auparavant. En traduisant son contenu et en optimisant le référencement, il a constaté une augmentation incroyable de 400 % de ses ventes internationales.

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 de langue 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 du sélecteur pour glisser et 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 traductions Weglot. Accédez à Shopify Admin > Online Store > Navigation, ajoutez des éléments de menu pour chaque langue en utilisant le format #Weglot-language (par exemple, #Weglot-en pour l'anglais). Vous pouvez également créer un menu déroulant pour les langues.

3. Option Weglot_here

Insérez le code suivant snippet dans votre fichier Theme.liquid à l'endroit souhaité :

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

Ce code placera le sélecteur de langue à l'endroit où vous le placez, ce qui permet de remédier aux limitations de placement courantes évoquées dans les forums de la communauté.

4. Option de commutation

Intégrez manuellement le sélecteur en modifiant votre code d'initialisation Weglot dans weglot_switchers.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 pour Shopify : Weglot automatise la mise en œuvre des balises hreflang et crée des sitemaps spécifiques à chaque langue. Cela complète les fonctions SEO intégrées de Shopify, permettant aux moteurs de recherche de proposer la bonne version linguistique aux utilisateurs.

• Traduction d'éléments spécifiques à Shopify : Weglot gère les traductions pour l'ensemble de votre boutique, y compris les pages de paiement, les notifications par email et les champs méta, surmontant ainsi les limitations décrites dans la documentation de Shopify. Par exemple, alors que la langue de la caisse est généralement fixe, Weglot permet à la caisse de refléter la langue choisie par l'utilisateur.

• Optimiser les flux de traduction : Les mémoires de traduction et les glossaires de Weglot vous 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 de Weglot et de Shopify Language Switcher

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 propose une solution de traduction complète et s'attaque de front 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 offre des avantages uniques pour les boutiques Shopify, ce qui en fait la solution idéale pour surmonter les barrières linguistiques en ligne. Avec le sélecteur de langue de Weglot, vous bénéficiez de personnalisations supplémentaires pour améliorer l'interface utilisateur, tandis que le site Visual Editor permet des traductions en contexte, ce qui vous permet d'affiner le contenu lorsque c'est nécessaire. Vous pouvez même commander des traductions professionnelles directement à partir du 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 votre essai gratuit de 10 jours avec Weglot aujourd'hui et profitez d'un site multilingue en quelques minutes !