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 switcher 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 im Feld "Name" z. B."Sprachen" ein, fügen Sie # als Link hinzu und klicken Sie auf "Hinzufügen":

Ziehen Sie dann die Sprachelemente unter " Sprachen", 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