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 verplaatsen op je website door de knop te slepen in een live voorbeeld.

-> Volg deze handleiding voor meer informatie: Hoe gebruik ik de Switcher Editor?

2. De taalswitcher toevoegen aan een menu

Je kunt ook je eigen taalswitcher maken in je Shopify menu en deze koppelen aan Weglot vertalingen.

Om dit te doen:

1. ga naar Shopify Admin > Online Store > Inhoud > Menu's:

2. Selecteer het menu waar je je taalswitcher wilt toevoegen.
3. Klik op " Menu-item toevoegen" en voeg de talen toe die je al hebt toegevoegd aan je winkel met Weglot:

4. Voeg de taal toe in het veld " Label",
5. In de "link" toevoegen #Weglot-languageCode.

Voorbeeld hieronder:

Klik op het vinkje om te valideren en vervolgens op"Opslaan ".

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

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

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 switcher overal plaatsen door de volgende code toe te voegen in je Theme.liquid-bestand (of een ander Liquid-bestand):

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

Hierdoor wordt de taalswitcher precies op de plek ingevoegd waar je de code plakt.

4. De schakeloptie

Een andere optie is om de switcher handmatig aan een element toe te voegen door de switchers optie in uw Weglot.initialize code.

Om dit te doen:

1. Ga naar je Shopify admin > Online Store > Thema's > Actie > Code bewerken > Snippets > weglot_switchers.liquid.

Je zou de volgende code moeten zien (met je eigen API-sleutel in plaats van 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. Voeg de volgende code in na "YOUR_API_KEY" (verwijder gewoon alle vorige code na je API-sleutel):

,   
    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