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

Dans cet article, vous apprendrez les différentes méthodes pour changer la position du sélecteur de langue Weglot en fonction de votre site Shopify.

1. Utilisez la fonction Switcher Editor

L'switcher editor vous permet de déplacer le sélecteur de langue dans le contexte de votre site web en faisant glisser le bouton dans un aperçu en direct.

-> Suivez ce guide pour plus de détails : Comment utiliser l'Switcher Editor?

2. Ajouter le sélecteur de langue à un menu

Vous pouvez également créer votre propre sélecteur de langue dans votre menu Shopify et le lier aux traductions Weglot.

Pour ce faire :

1. Allez dans Shopify Admin > Online Store > Content > Menus :

2. Sélectionnez le menu dans lequel vous souhaitez ajouter votre sélecteur de langue.
3. Cliquez sur " Add menu item" et ajoutez les langues que vous avez déjà ajoutées à votre boutique avec Weglot :

4. Dans le champ " Label", ajoutez la langue,
5. Dans le "lien" ajouter #Weglot-languageCode.

Exemple ci-dessous :

Cliquez sur la coche pour valider, puis"Enregistrer " et c'est fait.

Notez que vous pouvez également l'afficher sous forme de menu déroulant.

Pour ce faire, cliquez sur"Ajouter un élément de menu" puis, dans le champ"Libellé", vous pouvez ajouter"Langues" par exemple, puis ajoutez # comme lien et cliquez sur la coche.

Ensuite, faites glisser et déposez les éléments de langue 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

3. L'option Weglot_here

Vous pouvez placer le sélecteur n'importe où en ajoutant le code suivant dans votre fichier Theme.liquid (ou dans un autre fichier Liquid) :

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

Le sélecteur de langue sera inséré exactement à l'endroit où vous avez collé le code.

4. L'option des aiguilleurs

Une autre option consiste à ajouter manuellement le sélecteur à n'importe quel élément en incluant l'option switchers dans votre Weglot.initialize code.

Pour ce faire :

1. Allez dans votre administration Shopify > Online Store > Themes > Action > Edit Code > Snippets > weglot_switchers.liquid.

Vous devriez voir le code suivant (avec votre propre clé API au lieu de YOUR_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-->

2. Insérez le code suivant après "YOUR_API_KEY" (supprimez simplement tout code précédent après votre clé API) :

,   
    switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});
</script>

Important : n'oubliez pas la virgule après votre clé API.

La partie du code qui est importante ici est le ".header-nav" car il détermine l'emplacement de votre sélecteur 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 (la "cible") :

• Cliquez avec le bouton droit de la souris sur l'élément sur lequel vous voulez placer le sélecteur de langue.
• Cliquez sur "Inspecter".
• Utilisez la flèche en haut à gauche de la console.
• Cliquez avec le bouton droit de la souris sur l'élément dans la console.
• Copier > copier le sélecteur
• Collez le code du champ target entre les guillemets.

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

<nav class="menu">

Votre target sera :

cible : ".menu",

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