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

Dans cet article, vous verrez 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
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 du sélecteur de langue ?

⚠️ Notez que votre site Web doit être en ligne et accessible pour pouvoir utiliser l'éditeur du sélecteur.

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

Vous avez la possibilité de créer votre propre sélecteur de langue dans votre menu principal, par exemple, puis de le lier 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 ce faire, 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 commutateur

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

<!--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-->
	

,   
    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>
	

<nav class="menu">
	

cible : ".menu",