Sélecteur de langue Shopify : améliorez l'expérience utilisateur

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.

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 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 natif de Shopify prend en charge plusieurs langues, mais ne dispose pas de fonctionnalités de géolocalisation automatique et de personnalisation comparables à celles des 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 : aperçu général

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.

N'oubliez pas que le sélecteur de langue Shopify ne détecte et n'affiche pas automatiquement la langue en fonction des préférences de l'utilisateur sans personnalisation supplémentaire ou applications. 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 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 emplacement approprié dans le fichier header.liquid (généralement près du menu de navigation) et collez snippet de code Liquid suivant :

<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 désormais apparaître dans votre boutique selon vos préférences.

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

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 de leur boutique pour 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 à votre marque grâce au modèle linguistique IA de Weglot. Il apprend à partir de vos instructions, de votre glossaire et de l'historique de vos traductions manuelles pour vous fournir immédiatement des traductions contextuelles qui vous ressemblent.

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 !

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 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 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 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="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 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 SEO multilingue efficace SEO multilingue vous ouvrir de nouvelles opportunités commerciales ! Après avoir mis en place Weglot optimiser son site en plusieurs langues, Ron Dorff, une boutique Shopify, a découvert une demande importante sur le marché allemand, jusqu'alors inexploité. En traduisant son contenu et en optimisant son référencement, la boutique a vu ses ventes internationales augmenter de 400 %, un résultat incroyable.

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 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 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 votre essai gratuit de 10 jours avec Weglot aujourd'hui et profitez d'un site multilingue en quelques minutes !