Shopify - Come cambiare la posizione del selettore di lingua?

In questo articolo, imparerete i diversi metodi per cambiare la posizione del selettore di lingua di Weglot a seconda del vostro sito Shopify.

1. Utilizzare la funzione Switcher Editor

L'switcher editor consente di spostare il commutatore di lingua nel contesto del sito web trascinando e rilasciando il pulsante su un'anteprima del sito.

Per utilizzarlo, potete seguire questo articolo: Come usare l'Switcher Editor?

⚠️ Si noti che il sito web deve essere attivo e accessibile per poter utilizzare l'Switcher Editor.

2. Aggiungere il commutatore di lingua a un menu

È possibile creare un proprio commutatore di lingua nel menu principale, ad esempio, e collegarlo alle traduzioni di Weglot.

Per farlo, andate in Shopify Admin > Online Store > Navigation. Fare clic sul menu in cui si desidera aggiungere il commutatore di lingua:

Quindi, cliccate su " Aggiungi voce di menu" e aggiungete le lingue che avete già aggiunto al vostro negozio con Weglot:

Nel campo " Nome", aggiungere la lingua e nel"link" aggiungere il codice #Weglot-lingua. Ad esempio, per il pulsante inglese, aggiungete #Weglot-en , per un pulsante francese, dovrete aggiungere #Weglot-fr.

Si noti che la lettera maiuscola della "W" è importante. Esempio seguente:

Fare clic su " Applica modifiche" e poi su"Salva menu" e il gioco è fatto.

È possibile visualizzarlo anche come menu a discesa.

Per farlo, cliccate su"Aggiungi voce di menu", poi, nel campo "Nome", potete aggiungere ad esempio"Lingue", quindi aggiungete # come collegamento e cliccate su "Aggiungi":

Quindi trascinare e rilasciare le voci delle lingue sotto " Lingue" in modo che diventino sottovoci:

Per ulteriori informazioni su questo metodo, consultare la nostra Documentazione per sviluppatori.

3. L'opzione Weglot_qui

È possibile incollare il codice sottostante nel file Theme.liquid (o in un altro file liquid) nel punto in cui si desidera visualizzare il selettore di lingua:

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

4. L'opzione commutatore

È anche possibile integrare manualmente lo switcher a qualsiasi elemento presente nel negozio aggiungendo l'opzione "Switchers" al codice di 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>

Importante: non dimenticate la virgola dopo la chiave API.

Il pezzo di codice importante è ".header-nav", che determina la posizione del selettore di lingua. È necessario sostituirlo con il selettore CSS dell'elemento genitore in cui si desidera posizionare il selettore di lingua.

⚠️ Per trovare il selettore CSS (il "target"):

• Fare clic con il pulsante destro del mouse sull'elemento in cui si desidera inserire il commutatore di lingua.
• Andare a "Ispezionare"
• Utilizzare la freccia in alto a sinistra della console.
• Fare clic con il tasto destro del mouse sull'elemento nella console.
• Copia > Selettore di copia
• Incollare il campo di destinazione del codice tra le doppie virgolette

Quindi, ad esempio, se volete aggiungerlo al vostro menu:

<nav class="menu">

La linea di destinazione sarà:

target: ".menu",

Per ulteriori informazioni su questo metodo, consultare la nostra Documentazione per sviluppatori.