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

Der switcher editor ermöglicht es Ihnen, den Sprachumschalter im Kontext Ihrer Website zu verschieben, indem Sie die Schaltfläche in einer Live-Vorschau per Drag-and-Drop verschieben.

-> Folgen Sie diesem Leitfaden für weitere Einzelheiten: Wie wird der Switcher Editor verwendet?

2. Hinzufügen des Sprachumschalters zu einem Menü

Sie können auch Ihren eigenen Sprachumschalter in Ihrem Shopify-Menü erstellen und ihn mit Weglot-Übersetzungen verknüpfen.

Um dies zu tun:

1. gehen Sie zu Shopify Admin > Online Store > Inhalt > Menüs:

2. Wählen Sie das Menü aus, zu dem Sie den Sprachumschalter hinzufügen möchten.
3. Klicken Sie auf " Menüpunkt hinzufügen" und fügen Sie die Sprachen hinzu, die Sie bereits mit Weglot zu Ihrem Shop hinzugefügt haben:

4. Fügen Sie im Feld " Bezeichnung" die Sprache hinzu,
5. In der "Link" hinzufügen #Weglot-languageCode.

Beispiel unten:

Klicken Sie auf das Häkchen, um zu bestätigen, und dannauf "Speichern " - 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"Bezeichnung" z. B."Sprachen" ein, fügen Sie # als Link hinzu und klicken Sie auf das Häkchen.

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 Switcher überall platzieren, indem Sie den folgenden Code in Ihre Theme.liquid-Datei (oder eine andere Liquid-Datei) einfügen:

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

Dadurch wird die Sprachumschaltung genau dort eingefügt, wo Sie den Code einfügen.

4. Die Option Umschalter

Eine andere Möglichkeit besteht darin, den Switcher manuell zu einem beliebigen Element hinzuzufügen, indem man die switchers Option in Ihrem Weglot.initialize Code.

Um dies zu tun:

1. Gehen Sie zu Ihrem Shopify-Admin > Online-Shop > Themes > Aktion > Code bearbeiten > Snippets > weglot_switchers.liquid.

Sie sollten den folgenden Code sehen (mit Ihrem eigenen API-Schlüssel anstelle von 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. Fügen Sie den folgenden Code nach "YOUR_API_KEY" ein (löschen Sie einfach jeden vorherigen Code nach Ihrem API-Schlüssel):

,   
    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