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

switcher editor vous switcher editor de déplacer le sélecteur de langue en temps réel sur votre site web en faisant glisser et en déposant le bouton dans un aperçu en direct.

—> Consultez ce guide pour plus de détails : Comment utiliser Switcher Editor?

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

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

Pour ce faire :

1. Accédez à l'interface d'administration Shopify > Boutique en ligne > Contenu > Menus :

2. Sélectionnez le menu dans lequel vous souhaitez ajouter votre sélecteur de langue.
3. Cliquez sur « Ajouter un élément de menu » et ajoutez les langues que vous avez déjà ajoutées à votre boutique avec Weglot :

4. Dans le champ « Étiquette », ajoutez la langue,
5. Dans la section «lien« ajouter » #Weglot-languageCode.

Exemple ci-dessous :

Cliquez sur la coche pour valider, puis sur «Enregistrer » , et le tour est joué.

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 saisir «Langues » par exemple, ajouter ensuite # comme lien et cliquer 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 où vous le souhaitez en ajoutant le code suivant dans votre fichier Theme.liquid (ou dans un autre fichier Liquid) :

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

Cela permettra d'insérer le sélecteur de langue exactement à l'endroit où vous collez le code.

4. L'option « Switchers »

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

Pour ce faire :

1. Accédez à votre interface d'administration Shopify > Boutique en ligne > Thèmes > Actions > Modifier le code > Extraits de code > weglot_switchers.liquid.

Vous devriez voir le code suivant (en remplaçant « YOUR_API_KEY » par votre propre clé API) :

<!--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 » (il vous suffit de supprimer tout code précédent situé 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