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. Utiliser la fonction Switcher Editor

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

3. L'option Weglot here

4. L'option "switcher"

1. Utilisez la fonction Switcher Editor

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

Pour l'utiliser, vous pouvez suivre cet article : Comment utiliser l'éditeur Switcher ?

⚠️ Notez que votre site web doit être en ligne et accessible pour pouvoir utiliser l'éditeur Switcher.

Vous pouvez créer votre propre sélecteur de langue dans votre menu principal, par exemple, et le relier aux traductions de Weglot.

Pour ce faire, allez dans Shopify Admin > Online Store > Navigation. Cliquez sur le menu dans lequel vous souhaitez ajouter votre sélecteur de langue :

Ensuite, cliquez sur " Add menu item" et ajoutez les langues que vous avez déjà ajoutées à votre magasin avec Weglot :

Dans le champ " Nom", ajoutez la langue, et dans le"lien" ajoutez le code #Weglot-language. Par exemple, pour le bouton anglais, ajoutez #Weglot-en ; pour un bouton français, vous devrez ajouter #Weglot-fr.

Notez que la majuscule du "W" est importante. Exemple ci-dessous :

Cliquez sur " Appliquer les modifications" et ensuite sur"Enregistrer le menu" et c'est terminé.

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

Pour cela, cliquez sur"Ajouter un élément de menu" puis, dans le champ "Nom", vous pouvez ajouter"Langues" par exemple, puis ajoutez # comme lien et cliquez sur "Ajouter" :

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 coller le code ci-dessous dans votre fichier Theme.liquid (ou dans un autre fichier liquide) à l'endroit où vous souhaitez que le sélecteur de langue soit affiché :

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

4. L'option "Switcher"

Vous pouvez également intégrer manuellement le switcher à tous les éléments présents dans votre Shop en ajoutant l'option "Switchers" à votre code Weglot.initialize

Pour ce faire, allez dans votre administration Shopify > Boutique en ligne > Thèmes > Action > Editer le 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-->

Ajoutez le morceau de code suivant après " YOUR_API_KEY" (supprimez l'ancien code 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",