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 in un'anteprima dal vivo.

-> Seguire questa guida per i dettagli: Come utilizzare l'Switcher Editor?

2. Aggiungere il commutatore di lingua a un menu

Potete anche creare il vostro commutatore di lingua all'interno del vostro menu Shopify e collegarlo alle traduzioni di Weglot.

Per farlo:

1. andare in Amministrazione Shopify > Negozio online > Contenuto > Menu:

2. Selezionare il menu in cui si desidera aggiungere il commutatore di lingua.
3. Cliccate su " Aggiungi voce di menu" e aggiungete le lingue che avete già aggiunto al vostro negozio con Weglot:

4. Nel campo " Etichetta", aggiungere la lingua,
5. Nella sezione "link" aggiungere #Weglot-languageCode.

Esempio seguente:

Fare clic sul segno di spunta per convalidare e poi su"Salva " e il gioco è fatto.

È possibile visualizzarlo anche come menu a discesa.

Per farlo, cliccate su"Aggiungi voce di menu", poi, nel campo"Etichetta", potete aggiungere ad esempio"Lingue", quindi aggiungete # come collegamento e cliccate sul segno di spunta.

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 posizionare lo switcher ovunque, aggiungendo il seguente codice all'interno del file Theme.liquid (o di un altro file Liquid):

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

Questo inserirà il cambio di lingua esattamente nel punto in cui si incolla il codice.

4. L'opzione commutatori

Un'altra opzione è quella di aggiungere manualmente lo switcher a qualsiasi elemento, includendo l'opzione switchers nel vostro Weglot.initialize codice.

Per farlo:

1. Andate nell'amministrazione di Shopify > Negozio online > Temi > Azione > Modifica codice > Snippet > weglot_switchers.liquid.

Si dovrebbe vedere il seguente codice (con la propria chiave API al posto di 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. Inserire il seguente codice dopo "YOUR_API_KEY" (cancellare il codice precedente alla chiave 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>

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.