Shopify - Hoe verander ik de positie van de taalswitcher?

In dit artikel leer je de verschillende methoden om de positie van de Weglot taalswitcher te veranderen, afhankelijk van je Shopify website.

1. Gebruik de functie Switcher Editor

Met de switcher editor kun je de taalswitcher in context op je website zetten door de knop op een voorbeeld van je website te slepen.

Om het te gebruiken, kun je dit artikel volgen: Hoe gebruik je de Switcher Editor?

⚠️ Merk op dat uw website live en toegankelijk moet zijn om de Switcher Editor kunnen gebruiken.

2. De taalswitcher toevoegen aan een menu

Je kunt bijvoorbeeld je eigen taalswitcher maken in je hoofdmenu en deze koppelen aan de Weglot vertalingen.

Ga daarvoor naar Shopify Admin > Online Store > Navigatie. Klik op het menu waar je de taalswitcher wilt toevoegen:

Klik vervolgens op " Menu-item toevoegen" en voeg de talen toe die je al hebt toegevoegd aan je winkel met Weglot:

In het veld " Naam" voegt u de taal toe en in de"link" voegt u de code #Weglot-taal toe. Voor een Engelse knop voeg je bijvoorbeeld #Weglot-en toe. Voor een Franse knop voeg je #Weglot-fr toe.

Merk op dat de hoofdletter op de 'W' belangrijk is. Voorbeeld hieronder:

Klik op " Wijzigingen toepassen" en dan op"Menu opslaan" en het is klaar.

Merk op dat je het ook kunt weergeven als een vervolgkeuzemenu.

Klik daarvoor op"Menu-item toevoegen" en voeg in het veld "Naam" bijvoorbeeld"Talen" toe. Voeg vervolgens # toe als link en klik op "Toevoegen":

Sleep vervolgens de taalitems onder " Talen" zodat ze subitems worden:

Meer informatie over deze methode vindt u in onze documentatie voor ontwikkelaars

3. De optie Weglot_hier

Je kunt de onderstaande code in je Theme.liquid-bestand plakken (of in een ander liquid-bestand) op de plaats waar je de taalswitcher wilt weergeven:

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

4. De schakeloptie

Je kunt de switcher ook handmatig integreren in alle elementen die aanwezig zijn in je winkel door de "Switchers" optie toe te voegen aan je Weglot.initialize code

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

Belangrijk: vergeet de komma na je API-sleutel niet.

Het stuk code dat hier belangrijk is, is de ".header-nav" omdat deze de locatie van je taalswitcher bepaalt. Dit moet worden vervangen door de CSS selector van het parent element waar je de taalswitcher wilt plaatsen.

⚠️ Om de CSS-selector (het "doel") te vinden:

• Klik met de rechtermuisknop op het element waarin je de taalswitcher wilt plaatsen.
• Ga naar "Inspecteren
• Gebruik de pijl linksboven op de console.
• Klik met de rechtermuisknop op het element in de console.
• Kopiëren > Kopieerkiezer
• Plak de code doelveld tussen de dubbele aanhalingstekens

Dus als je het bijvoorbeeld aan je menu wilt toevoegen:

<nav class="menu">

Je doellijn zal zijn:

doel: ".menu",

Meer informatie over deze methode vindt u in onze documentatie voor ontwikkelaars