Shopify - Comment changer la position du sélecteur de langue

Dans cet article, vous apprendrez comment changer la position de votre commutateur de langue et l'ajouter à votre menu

Afin d'ajouter le Language Switcher à votre menu, vous pouvez suivre l'une des 2 méthodes ci-dessous, cependant, nous recommandons la première option. 

1. Ajoutez l'option "Switchers" à votre code Weglot.initialize

Allez dans votre Shopify admin > Boutique en ligne > Thèmes > Action > Modifier le code > Snippets > weglot_switchers.liquid .

Vous devriez voir le code suivant (avec votre propre clé API en remplacement de VOTRE_API_KEY).  

<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” });</script>
<!--End Weglot Script-->

Ajoutez le code suivant après "YOUR_API_KEY" ( supprimez simplement l'ancien code après votre clé API) : 

,
	switchers: [
       {
           // Same as button_style at root
           button_style: {
               full_name: true,
               with_name: true,
               is_dropdown: true,
               with_flags: true,
               flag_type: "circle",
               invert_flags: false
           },
           // Move switcher somewhere in the page
           location: {
               target: ".header-nav",
               sibling: null
           }
       }
   ]
   });
</script>

Important : n'oubliez pas la virgule qui suit votre clé API. 

La partie du code qui est importante ici est le ".header-nav" car il détermine l'emplacement de votre commutateur de langue. Il doit être remplacé par le sélecteur CSS de l'élément parent où vous voulez placer le sélecteur de langue. 

Pour trouver le sélecteur CSS :

  • Cliquez avec le bouton droit de la souris sur l'élément dans lequel vous voulez placer le commutateur de langue.
  • Allez à "Inspecter".
  • Utilisez la flèche en haut à gauche de la console
  • Cliquez sur l'élément dans lequel vous voulez placer le commutateur de langue.
  • Copiez la classe ou l'identifiant de cet élément.
  • Collez la classe (ajoutez un point avant la classe) ou l'identifiant (ajoutez un # avant l'identifiant) dans la case, puis cliquez sur "Ajouter".

Ainsi, par exemple, si vous voulez l'ajouter à votre menu :

<nav class="menu"><br>

Votre cible sera :

target: ".menu",

Vous pouvez trouver plus d'informations à propos de cette méthode dans notre Documentation pour développeurs

2. Ajouter le sélecteur comme un élément de menu

Allez à Shopify Admin > Boutique en ligne > Navigation. Cliquez sur le menu où vous voulez ajouter votre commutateur de langue. 

Ensuite, cliquez sur "Ajouter un élément de menu" et ajoutez les langues que vous avez déjà ajoutées à votre magasin avec Weglot.

Dans la case "Nom", ajoutez la langue et dans le lien, ajoutez le code de langue #Weglot. Par exemple, pour le bouton anglais, ajoutez #Weglot-en, pour un bouton français, vous devrez ajouter #Weglot-fr. Notez que la lettre majuscule du "W" est importante. Exemple ci-dessous :

Cliquez sur "Appliquer les modifications" et ensuite sur "Enregistrer le menu". 

Vous avez également la possibilité de faire de votre commutateur de langue un menu déroulant. Cliquez à nouveau sur " Ajouter un élément de menu". Dans la case "Nom", vous pouvez ajouter "Langues" par exemple, ou bien appeler votre commutateur de langue dans votre menu, puis ajouter # comme lien et cliquer sur "Ajouter". 

Ensuite, glissez et déposez les éléments linguistiques sous "Langues" pour qu'ils deviennent des sous-éléments. 

Vous pouvez trouver plus d'informations sur cette méthode dans notre Documentation développeurs

Enfin, n'hésitez pas à nous contacter à l'adresse support@weglot.com si vous avez des difficultés à changer la position du commutateur linguistique.

Vous avez encore besoin d’aide? Contactez-nous Contactez-nous