Shopify - Wie kann ich die Position des Sprachumschalters ändern?

In diesem Artikel lernen Sie die verschiedenen Methoden kennen, mit denen Sie die Position des Weglot-Sprachumschalters je nach Ihrer Shopify-Website ändern können.

1. Verwenden Sie die Funktion Switcher Editor

Mit dem Sprachumschalter-Editor können Sie den Sprachumschalter im Kontext Ihrer Website verschieben, indem Sie die Schaltfläche per Drag & Drop auf eine Vorschau Ihrer Website ziehen.

Um ihn zu verwenden, können Sie diesen Artikel lesen: Wie verwende ich den Switcher-Editor?

⚠️ Beachten Sie, dass Ihre Website live und zugänglich sein muss, um den Switcher-Editor verwenden zu können.

2. Hinzufügen des Sprachumschalters zu einem Menü

Sie können z.B. in Ihrem Hauptmenü einen eigenen Sprachumschalter erstellen und diesen mit den Weglot-Übersetzungen verknüpfen.

Gehen Sie dazu zu Shopify Admin > Online Store > Navigation. Klicken Sie auf das Menü, in dem Sie Ihren Sprachumschalter hinzufügen möchten:

Klicken Sie dann auf " Menüpunkt hinzufügen" und fügen Sie die Sprachen hinzu, die Sie bereits mit Weglot zu Ihrem Shop hinzugefügt haben:

Fügen Sie im Feld " Name" die Sprache und im Feld"Link" den Code #Weglot-language ein. Zum Beispiel, für die englische Schaltfläche, fügen Sie #Weglot-en für eine französische Schaltfläche, müssen Sie #Weglot-fr hinzufügen.

Beachten Sie, dass der Großbuchstabe des "W" wichtig ist. Beispiel unten:

Klicken Sie auf " Änderungen übernehmen" und dannauf "Menü speichern" und schon ist es fertig.

Beachten Sie, dass Sie es auch als Dropdown-Menü anzeigen können.

Klicken Sie dazu auf"Menüpunkt hinzufügen", fügen Sie in das Feld "Name" zum Beispiel"Sprachen" ein, fügen Sie # als Link hinzu und klicken Sie auf "Hinzufügen":

Ziehen Sie dann die Sprachelemente unter " Sprachen" und legen Sie sie dort ab, damit sie zu Unterelementen werden:

Weitere Informationen zu dieser Methode finden Sie in unserer Entwicklerdokumentation

3. Die Option Weglot_here

Sie können den folgenden Code in Ihre Theme.liquid-Datei (oder in eine andere Liquid-Datei) an der Stelle einfügen, an der der Sprachumschalter angezeigt werden soll:

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

4. Die Option Wechsler

Sie können den Switcher auch manuell in jedes beliebige Element in Ihrem Shop integrieren, indem Sie die Option "Switchers" zu Ihrem Weglot.initialize Code hinzufügen

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

Wichtig: Vergessen Sie nicht das Komma nach Ihrem API-Schlüssel.

Wichtig ist hier das Codestück ".header-nav", da es die Position des Sprachwechslers bestimmt. Dieser muss durch den CSS-Selektor des übergeordneten Elements ersetzt werden, in dem der Sprachumschalter platziert werden soll.

⚠️ Um den CSS-Selektor (das "Ziel") zu finden:

• Klicken Sie mit der rechten Maustaste auf das Element, in das Sie die Sprachumschaltung einfügen möchten.
• Gehen Sie zu "Inspektion".
• Verwenden Sie den Pfeil oben links auf der Konsole.
• Klicken Sie mit der rechten Maustaste auf das Element in der Konsole.
• Kopieren > Selektor kopieren
• Fügen Sie das Code-Zielfeld zwischen den Anführungszeichen ein

Wenn Sie es also zum Beispiel in Ihr Menü aufnehmen wollen:

<nav class="menu">

Ihre Ziellinie wird sein:

Ziel: ".menu",

Weitere Informationen zu dieser Methode finden Sie in unserer Entwicklerdokumentation