Shopify- Sprachwechsler: So fügen Sie es hinzu und passen es an

Der Shopify Sprachwechsler ist eine nützliche native Funktion für mehrsprachige Shops. Mit dieser Funktion können Kunden deine Webseite in ihrer bevorzugten Sprache anzeigen lassen, sodass deine Marke neue internationale Märkte erschließen kann. Du kannst die Funktion auch mit Hilfe von Code anpassen, damit sie besser zur Ästhetik deiner Marke passt.

Allerdings hat die integrierte Funktion auch ihre Nachteile, darunter eingeschränkte Anpassungsmöglichkeiten im Vergleich zu Lösungen von Drittanbietern.

Durch die Integration einer speziellen Shopify-Übersetzungs-App können Ladenbesitzer von zusätzlichen Funktionen profitieren, die die Funktionalität verbessern, die Nutzerbindung erhöhen und sich um den eigentlichen Übersetzungspart kümmern. Unsere eigene Shopify-Übersetzungs-App Weglot zum Beispiel bietet einzigartige Design- und Platzierungsoptionen für ihren Sprachwechsler, so dass er sich an jedes Ladenlayout anpassen lässt. Außerdem bietet sie viel mehr als nur die Möglichkeit, die Sprache zu wechseln. Aber dazu später mehr.

In diesem Artikel zeigen wir dir, wie du den muttersprachlichen Sprachwechsler von Shopify optimal nutzen kannst, bevor wir uns Weglot auf Shopify ansehen und die besten Praktiken für die Übersetzung deines Shops und eine optimale User Experience erläutern.

Wichtige Punkte

• Die in Shopify integrierte „ Sprachwechsler “ unterstützt mehrere Sprachen, bietet jedoch im Vergleich zu Apps von Drittanbietern nur begrenzte Anpassungsmöglichkeiten.
• Weglot bietet automatische Webseiten-Übersetzung und umfangreiche Anpassungsmöglichkeiten für seinen Sprachwechsler. Er ermöglicht auch eine vollständig manuelle Bearbeitung und verbessert die mehrsprachige SEO durch die Erstellung sprachspezifischer URLs und die Implementierung von hreflang-Tags.

Shopify- Sprachwechsler: Überblick und Einrichtung

Werfen wir zunächst einen Blick auf den integrierten Sprachwechsler von Shopify. Wie wir bereits erwähnt haben, ermöglicht diese Funktion den Ladenbesitzern, mehrere Sprachen zu unterstützen, und verbessert damit natürlich die User Experience (UX) für internationale Kunden.

Es werden sowohl die manuelle Sprachauswahl als auch die automatische Sprachumleitung auf Grundlage der Browsereinstellungen der Besucher unterstützt. Sie können die automatische Sprachumleitung auf Grundlage der Browsereinstellungen der Besucher unter „Online-Shop“ > „Einstellungen“ > „Automatische Umleitung“ > „Sprache“ aktivieren, vorausgesetzt, Sie haben die entsprechenden Sprachen veröffentlicht und in Ihren Zielmärkten verfügbar gemacht.

Wenn der integrierte Umschalter Ihren Anforderungen entspricht, erfahren Sie hier, wie Sie ihn einrichten.

Einrichten von Sprachen und Übersetzungsmethoden

Bevor eine „ Sprachwechsler “ überhaupt angezeigt wird, muss Ihr Shopify-Shop tatsächlich mehr als eine Sprache anbieten. Wenn Sie Ihre Übersetzungen bereits eingerichtet haben, können Sie gerne zum nächsten Abschnitt springen. Andernfalls erfahren Sie hier, wie Sie loslegen können…

Gehen Sie zu „Einstellungen“ > „Sprachen“ > „Sprache hinzufügen“. Wählen Sie aus über 20 unterstützten Optionen aus, darunter alles von Spanisch bis Japanisch. Denken Sie daran, dass Sie neben jeder Sprache auf „Veröffentlichen“ klicken müssen, damit die Übersetzungen für Kunden sichtbar werden. Wenn Sie diesen Schritt überspringen, hat Ihr neuer Sprachumschalter nichts, zwischen dem er umschalten kann.

Die in Shopify integrierte App „Translate & Adapt“ ist eine Möglichkeit, einen mehrsprachigen Shop einzurichten. Sie übersetzt Ihre Kern content en automatisch und kostenlos in zwei Sprachen (acht, wenn Ihr Shop seinen Sitz in Großbritannien, der Schweiz oder einem der zehn EU-Länder hat) – direkt im Bereich „ Einstellungen > Apps“, nachdem Sie Ihre Sprachen hinzugefügt haben.

Um Daten in großen Mengen zu bearbeiten, exportieren Sie die Sprachdaten Ihrer Website als CSV-Datei unter „Einstellungen“ > „Sprachen“ > „Exportieren“. Bearbeiten Sie die Übersetzungen in großen Mengen und importieren Sie sie anschließend wieder – wichtig ist dabei, dass Sie den Liquid- code us innerhalb der geschweiften Klammern {{ }} oder {% %} auf keinen Fall verändern. Dabei handelt es sich um die Theme-Engine von Shopify, nicht um einfachen Text.

Wenn Sie eine vollständig manuelle Steuerung bevorzugen, können Shops mit Shopify bis zu 20 Sprachen verwalten (30 bei Shopify Plus). Unter „Einstellungen“ > „Sprachen“ > „Aktionen“ > „Übersetzungen bestellen“ können Sie professionelle Übersetzungsdienste direkt über Ihre Shopify- dashboard bestellen.

Sobald Ihre Sprachen veröffentlicht und die Übersetzungen übernommen wurden, können Sie sich an die Umsetzung des Sprachumschalters machen.

Den integrierten Umschalter Ihres Themes finden und konfigurieren

Die in Shopify integrierte „ Sprachwechsler “ finden Sie in der Regel in Ihrem Theme-Editor im Abschnitt „Kopfzeile “ oder „Fußzeile “. Die genaue Position und die Anpassungsoptionen hängen von Ihrem Theme und der jeweiligen Version ab.

Versuchen Sie Folgendes:

1. Gehen Sie in der Shopify-Verwaltung zu „Online-Shop“ > „Designs“ > „Design bearbeiten“.
2. Öffnen Sie den Abschnitt „Kopfzeile“ oder „Fußzeile“, je nachdem, wo der Umschalter angezeigt werden soll.
3. Suchen Sie nach einer Einstellung wie „Sprachauswahl aktivieren“, „Sprachauswahl anzeigen“ oder „Lokalisierung“.
4. Aktivieren Sie die Auswahl und klicken Sie auf „Speichern“.

Sobald in Ihrem Shop mehrere Sprachen für den Markt des Kunden veröffentlicht wurden, sollte der Sprachumschalter die verfügbaren Sprachoptionen anzeigen.

Die kostenlosen Themes von Shopify, darunter „Dawn“, „Craft“, „Refresh“, „Sense“ und „Studio“, unterstützen in den aktuellen Versionen Sprachauswahlfelder sowohl in der Kopfzeile als auch in der Fußzeile. Kostenlose „Online Store 2.0“-Themes ab Version 9.0.0 sowie Themes der „Horizon“-Familie unterstützen die Platzierung in der Kopfzeile ohne zusätzliche „ code “.

Bei Premium-Themes variieren die Platzierungsoptionen. So unterstützt beispielsweise „Impulse“ die Sprachauswahl in der Symbolleiste der Kopfzeile und in der Fußzeile, während andere Themes möglicherweise andere Einstellungen oder Positionen bieten. Schauen Sie in der Dokumentation des Theme-Entwicklers nach, falls Sie die Option nicht finden können.

Ältere Vintage-Themes bieten möglicherweise weniger Anpassungsmöglichkeiten. Wenn Ihr Theme die von Ihnen gewünschte Platzierung nicht unterstützt, müssen Sie möglicherweise die Liquid-Vorlagen bearbeiten, zu einem neueren Theme wechseln oder eine Übersetzungs-App verwenden, die über eigene Steuerelemente für die Platzierung verfügt.

Das Erscheinungsbild des Sprachumschalters hängt auch von Ihrem Theme ab. Integrierte Auswahlfelder zeigen in der Regel die Namen der Sprachen an und passen sich den Schriftarten, Farben und dem Stil Ihres Shops an. Einige Themes bieten zusätzliche Designeinstellungen, während für umfangreichere Anpassungen möglicherweise CSS erforderlich ist.

Überprüfen Sie außerdem das Layout für Mobilgeräte mithilfe der Theme-Vorschau von Shopify. Je nach Theme wird der Umschalter möglicherweise in der Fußzeile, in der Kopfzeile oder im Navigationsmenü für Mobilgeräte angezeigt. Stellen Sie sicher, dass Kunden ihn auf kleineren Bildschirmen leicht finden und nutzen können, und platzieren Sie die Länder-/Regionsauswahl in der Nähe, falls Sie beides anzeigen.

Wie füge ich meiner Shopify-Kopfzeile eine Sprachauswahl hinzu?

Sie können über die integrierten Einstellungen Ihres Themes eine Sprachauswahl in Ihre Shopify-Kopfzeile einfügen oder den Switcher-Editor von Weglot nutzen, um einen anpassbaren Sprachumschalter zu platzieren, ohne Ihr Theme bearbeiten zu müssen: code.

Um die native Sprachauswahl von Shopify hinzuzufügen, gehen Sie, wie zuvor beschrieben, zu „Shopify-Admin“ > „Online-Shop“ > „Themes“ > „Theme bearbeiten“, öffnen Sie den Abschnitt „Kopfzeile“, suchen Sie nach „Sprachauswahl aktivieren“ oder einer ähnlichen Einstellung, aktivieren Sie die Sprachauswahl und klicken Sie anschließend auf „Speichern“.

Wenn Sie Weglot verwenden, öffnen Sie Weglot Dashboard > Einstellungen > Sprachwechsler > Switcher-Editor. Ziehen Sie den Switcher an die gewünschte Stelle in der Kopfzeile und klicken Sie auf „Speichern“. Wählen Sie einen Bereich, der auf allen Seiten Ihres Shops einheitlich angezeigt wird, damit der Switcher beim Navigieren der Kunden an derselben Stelle bleibt.

Für eine präzisere Positionierung unterstützt Weglot außerdem diesen HTML-Platzhalter:

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

Sie können ihn in einen „Custom Liquid“-Abschnitt oder -Block im Kopfbereich Ihres Themes einfügen, sofern dies unterstützt wird, oder ihn in die entsprechende Theme-Datei einfügen. „ Weglot “ zeigt dann den Umschalter an der Stelle an, an der der Platzhalter erscheint. Die genaue Platzierung hängt vom Layout Ihres Themes ab.

Testen Sie den Sprachumschalter nach der Einrichtung stets sowohl auf dem Desktop als auch auf Mobilgeräten, einschließlich der Produkt- und Kollektionsseiten. Testen Sie außerdem Ihren Checkout-Ablauf, da Shopify den Checkout getrennt vom Header Ihres Shops verwaltet; das Hinzufügen eines Sprachumschalters dort führt also nicht automatisch dazu, dass auch im Checkout ein solcher angezeigt wird. Wenn Sie die Shopify-Markets-Integration vonWeglot nutzen, passt Shopify die Sprache im Checkout entsprechend der zuvor getroffenen Auswahl des Kunden an, und der Sprachumschalter von „ Weglot “ selbst wird während des Checkouts nicht angezeigt.

Einbau des Schalters mit Liquid Code

Falls Ihr Shopify-Theme nicht die von Ihnen benötigten Optionen für die Platzierung oder Gestaltung der Sprachauswahl bietet, können Sie mithilfe von Liquid eine benutzerdefinierte Sprachauswahl erstellen. Dazu müssen Sie die Datei „ code “ Ihres Themes bearbeiten. Erstellen Sie daher eine Sicherungskopie, bevor Sie fortfahren.

Um den Shopify-Sprachwechsler einzurichten und anzupassen, musst du die folgenden Schritte befolgen:

1. Navigieren Sie in Ihrem Shopify-Adminbereich zu „Einstellungen“ > „Sprachen“ und fügen Sie die Sprachen hinzu, die Sie unterstützen möchten. Stellen Sie sicher, dass diese in Ihren Zielmärkten verfügbar sind und dass Sie die erforderlichen Übersetzungen hinzugefügt haben.
2. Gehen Sie zu „Online-Shop“ > „Designs “ und klicken Sie im Drei-Punkte-Menü Ihres Designs auf „ code bearbeiten “.
3. Suchen Sie die Datei „header.liquid“ im Verzeichnis „Sections “. Die genaue Datei und die geeignete Einfügestelle hängen von Ihrem Theme ab. Überprüfen Sie daher dessen Struktur, bevor Sie Änderungen vornehmen.
4. Suche eine geeignete Stelle in der Datei header.liquid (normalerweise in der Nähe des Navigationsmenüs) und füge das folgende Liquid-Codefragment ein:

{% if localization.available_languages.size > 1 %}
  <div class="page-width custom-language-topbar">
    {% form 'localization', id: 'header-language-form' %}
      <div class="shopify-language-switcher">
        <label for="header-language-selector">Language</label>

        <select
          id="header-language-selector"
          name="language_code"
        >
          {% for language in localization.available_languages %}
            <option
              value="{{ language.iso_code }}"
              {% if language.iso_code == localization.language.iso_code %}selected{% endif %}
            >
              {{ language.endonym_name | escape }}
            </option>
          {% endfor %}
        </select>

        <button type="submit">Apply</button>
      </div>
    {% endform %}
  </div>
{% endif %}

Die Position Ihres Liquid- code s bestimmt, wo der „ Sprachwechsler “ in Ihrem Shop angezeigt wird. Wenn Sie ihn beispielsweise im Navigationsbereich Ihrer Kopfzeile platzieren, wird er möglicherweise neben Ihrem Menü angezeigt, während die Platzierung in einem separaten Container oberhalb der Navigation eine eigene Sprachauswahlleiste erzeugt.

Diese Seite „ code “ nutzt das Lokalisierungsformular von Shopify, um die für Kunden verfügbaren Sprachen abzurufen. Sie zeigt jede Sprache unter ihrem jeweiligen Namen an, beispielsweise „Français“ für Französisch, und markiert die aktuelle Sprache als ausgewählt. Kunden wählen eine Sprache aus der Dropdown-Liste aus und klicken auf „Übernehmen“, um die Sprache zu wechseln.

Falls Ihr Theme an derselben Stelle bereits eine Sprachauswahl anzeigt, deaktivieren Sie die vorhandene über den Theme-Editor, um Doppelungen zu vermeiden.

5. Mit CSS können Sie die Ausrichtung, die Farben, die Abstände und die Rahmen des Umschalters anpassen. Öffnen Sie im Theme-Editor „Theme-Einstellungen > Benutzerdefiniertes CSS“ und fügen Sie das folgende Beispiel hinzu:

.custom-language-topbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 8px;
}

.custom-language-topbar .shopify-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.shopify-language-switcher select {
  font: inherit;
  font-size: 16px;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
}

.shopify-language-switcher select:hover {
  border-color: #555;
}

.shopify-language-switcher select:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

6. Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie auf „Speichern“, um sie zu übernehmen. Die „ Sprachwechsler “ sollte nun entsprechend Ihren Einstellungen in Ihrem Shop angezeigt werden. Sehen Sie sich eine Vorschau Ihres Shops auf dem Desktop und auf Mobilgeräten an.

Shopify-Shops mit dem Sprachwechsler von Weglot aufwerten

Weglot ist ein KI-gestütztes Übersetzungstool für „ Website “, das Ihrer Website Shopify-Shop eine „ Sprachwechsler “ hinzufügt, ohne dass Sie Änderungen an Ihrem Theme vornehmen müssen. Die native Shopify-Funktion „ Sprachwechsler “ ist zwar funktionsfähig, doch spezielle Shopify-Übersetzungs-Apps wie Weglot bieten umfangreichere Anpassungsmöglichkeiten sowie zusätzliche Shopify-Übersetzungsfunktionen für alle, die das Shop-Erlebnis für ihre internationalen Kunden wirklich lokalisieren möchten.

Im Gegensatz zum Shopify-Sprachwechsler übersetzt Weglot automatisch 100% des Inhalts der Webseite aus einer Auswahl von über 110 Sprachen, einschließlich Kassenseiten, E-Mail-Benachrichtigungen und SEO-Metadaten, die für Suchmaschinen optimiert werden.

Mit Weglot profitiert dein gesamter Shopify-Shop von der automatischen Übersetzung und beschleunigt so Erweiterungsprojekte. Im Vergleich zur Einstellung einzelner Übersetzer für jede Sprache verkürzt die Automatisierung von Weglot die Markteinführungszeit für neue Sprachversionen erheblich.

Die Möglichkeiten von Weglot beschränken sich jedoch nicht nur auf die automatische Übersetzung. Mit Weglot hast du die volle Kontrolle über die übersetzten Inhalte auf deiner Webseite. Du kannst auch professionelle Übersetzer/innen direkt über die Plattform anheuern.

Mit dem KI-Übersetzungsmodell von Weglot können Sie außerdem im Handumdrehen markengerechte Übersetzungen erstellen. Es lernt aus Ihren Anweisungen, Ihrem Glossar und Ihrem bisherigen Übersetzungsverlauf und liefert Ihnen sofort kontextbezogene Übersetzungen, die ganz Ihrem Stil entsprechen.

Weglot lässt sich auch mit den bestehenden Funktionen von Shopify und beliebten Apps von Drittanbietern integrieren, einschließlich der Anpassung für Themen wie Dawn und Prestige. So musst du nicht mehr mehrere Shops gemanagt oder Übersetzungen manuell vornehmen, da du Sprachen nach Bedarf hinzufügen, veröffentlichen, entfernen oder löschen kannst.

Weglot kümmert sich nicht nur um die Übersetzung, sondern auch um mehrsprachige SEO. Die Plattform erstellt automatisch Subdomains oder Unterverzeichnisse für jede Sprachversion und implementiert hreflang-Tags, um deine Webseite für lokale Suchmaschinen zu optimieren. Außerdem ermöglicht unser Visual Editor eine einfache Anpassung der Übersetzungen, so dass sie genau auf die Stimme deiner Marke abgestimmt sind.

Das Beste ist, dass die Einrichtung von Weglot und die Anpassung deines Sprachwechslers in wenigen Augenblicken erledigt ist! Schauen wir uns das mal an.

Weglot in deinem Shopify Shop einrichten

Die Einrichtung von Weglot in deinem Shopify-Shop ist ganz einfach. Hier ist eine Anleitung, die dir den Einstieg erleichtert:

1. Beginne mit dem Besuch des Shopify App Store:

• Gib in der Suchleiste Weglot ein und suche die Weglot App.
• Klicke auf Installieren und folge den Anweisungen, um es zu deinem Store hinzuzufügen.

2. Nachdem du die App installiert hast, musst du ein Konto einrichten:

• Öffne die Weglot App von deinem Shopify Dashboard aus.
• Gib deine E-Mail-Adresse ein und wähle ein Passwort.

3. Konfiguriere deine Spracheinstellungen:

• Als Nächstes wählst du deine Ausgangssprache (die Sprache deines Shopify Shops).
• Wähle dann die Zielsprachen aus, in die du deine Inhalte übersetzen möchtest.
  

Nachdem du deine Sprachen ausgewählt hast, scannt Weglot automatisch alle Inhalte in deinem Shop, einschließlich Metadaten und Inhalte von Drittanbieter-Apps. Die automatische Erkennung bedeutet, dass du die zu übersetzenden Inhalte nicht mehr manuell zusammenstellen musst, denn Weglot erledigt das alles für dich!

Anschließend wird Ihre Website mithilfe einer führenden KI-Übersetzungstechnologie sofort übersetzt und je nach der von Ihnen unter Weglot Dashboard gewählten Struktur in Sprachunterverzeichnissen oder Subdomains angezeigt.

Anpassen des Sprachwechslers von Weglot: Design und Platzierungsoptionen

Für den Sprachwechsler von Weglot gibt es umfangreiche Anpassungsmöglichkeiten, mit denen du ihn an das Branding deines Ladens anpassen kannst, um ein professionelles Endergebnis zu erzielen. Hier erfährst du, wie du ihn anpassen kannst:

1. Zugang zum visuellen Sprachwechsler-Editor: Geh zu deinem Weglot Dashboard und navigiere zu Einstellungen >Sprachwechsler.
2. Verändere das Aussehen: Wählen Sie aus verschiedenen Formaten wie Dropdown-Menüs, Schaltflächen oder Fähnchen, um die Sprachoptionen anzuzeigen. Zum Beispiel:
   • Verwende Flaggen zur schnellen Erkennung.
   • Entscheide dich für Buttons für eine auffälligere Anzeige.

3. Position anpassen: Du kannst den Switcher in Schlüsselbereichen wie der Kopfzeile, der Fußzeile oder der Seitenleiste platzieren, je nachdem, was für dein Layout am besten funktioniert.
4. Farben und Stile anpassen: Passe Farben und Stile in den Weglot-Einstellungen an, um sie an das Branding deines Ladens anzupassen.

Wichtig ist, dass der Sprachwechsler ganz einfach und ohne Änderungen am Theme neu positioniert werden kann, damit er auf den verschiedenen Seiten deines Shops zugänglich und benutzerfreundlich bleibt. Für fortgeschrittene Platzierung siehe unseren Abschnitt über die Überwindung häufiger Herausforderungen bei der Shopify-Lokalisierung.

Erweiterte Anpassungen: Coding-Tipps für Entwickler

Für Entwickler, die ihre Shopify-Shops mit Weglot erweitern möchten, kann die Anpassung der Schlüssel zur Schaffung einer maßgeschneiderten mehrsprachigen Experience sein. Die Flexibilität von Weglot gibt Entwicklern die Möglichkeit, maßgeschneiderte mehrsprachige Experiences zu erstellen, die auch für technisch nicht versierte Nutzer/innen benutzerfreundlich sind.

Hier sind einige Tipps zur Codierung, die du beachten solltest:

CSS für die Feinabstimmung des Aussehens von Sprachwechslern verwenden

Entwickler können Stile wie die Hintergrundfarbe, die Schriftgröße und die Polsterung ändern, um sie an das Branding des Ladens anzupassen. Zum Beispiel:

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

Implementierung von JavaScript für benutzerdefinierte Funktionalitäten

Entwickler können JavaScript verwenden, um bestimmte Aktionen auszulösen, wenn eine Sprache ausgewählt wird, z. B. die Aktualisierung anderer Elemente auf der Seite oder die Verfolgung von Sprachänderungen für Analysen. Du könntest zum Beispiel einen Event-Listener implementieren:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="language_code"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

Implementierung von Weglot für nahtlose Seitenübergänge in verschiedenen Sprachen

Eine der wichtigsten Funktionen von Weglot ist die automatische Erstellung von sprachspezifischen URLs, z. B. example.com/fr für die französische Version deiner Webseite. Eine solide URL-Struktur stellt sicher, dass Suchmaschinen jede Sprachversion indizieren können, und verbessert deine mehrsprachigen SEO-Bemühungen.

Weglot hilft Kunden, während ihrer Shopping Experience ganz einfach die Sprache zu wechseln, egal ob sie nach Produkten suchen oder zur Kasse gehen. Wenn ein Kunde z. B. von einer englischen Produktseite auf die entsprechende (z. B. spanische) Seite wechselt, erlebt er einen fließenden Übergang, ohne seinen Platz in der Shopping Journey zu verlieren. Solche Funktionen können sich auf wichtige Kennzahlen wie die Verweildauer auf der Webseite und die Konversionsraten auswirken, die Kundenzufriedenheit verbessern und letztlich das globale Wachstum fördern.Ein Beispiel: Everyone.org, das Weglot für die Erstellung einer mehrsprachigen Webseite in 12 Sprachen nutzte, verzeichnete einen 40%igen Anstieg der Gesamtbesucherzahl, wobei die französischsprachigen Nutzer eine fast doppelt so hohe Konversionsrate erzielten wie der Durchschnitt der gesamten Webseite.

Mehrsprachige SEO optimieren und die Konsistenz der Seiten aufrechterhalten

Mehrsprachige SEO stellt sicher, dass deine Produkte von Nutzern, die in verschiedenen Sprachen suchen, gefunden werden können, und sorgt so für mehr Online-Traffic. Ein grundlegender Aspekt der mehrsprachigen Suchmaschinenoptimierung ist eine korrekte URL-Struktur, und die Verwendung von Unterverzeichnissen hilft den Suchmaschinen, Seiten in verschiedenen Sprachen zu erkennen und zu bewerten.

Hreflang-Tags spielen dabei eine wichtige Rolle, indem sie die Suchmaschinen über die sprachliche und regionale Ausrichtung deiner Seiten informieren. Dies hilft den Nutzern, die relevanteste Version deiner Webseite zu finden.

Übersetzte Metadaten, einschließlich Titel-Tags und Beschreibungen, tragen ebenfalls zu einer besseren Sichtbarkeit bei der Suche bei. Weglot automatisiert einen Großteil der technischen SEO-Arbeit, indem es automatisch sprachspezifische URLs erstellt und hreflang-Tags implementiert, ohne dass manuelle Eingriffe erforderlich sind.

Außerdem ermöglichen der visuelle Editor und das Sprachglossar von Weglot den Ladenbesitzern, die Konsistenz der Übersetzungen zu gewährleisten.

Um mit mehrsprachiger SEO noch mehr zu erreichen, können Shopify-Shopbesitzer Folgendes tun:

• Führe eine lokalisierte Keyword-Recherche für jeden Zielmarkt durch.
• Stelle sicher, dass alle Inhalte, einschließlich der Metadaten, korrekt übersetzt sind.
• Überprüfe regelmäßig die Übersetzungen, um Änderungen der Sprachtrends zu berücksichtigen.

Denken Sie daran: Eine effektive mehrsprachige Suchmaschinenoptimierung (SEO) kann zu neuen Marktchancen führen! Nach der Implementierung von Weglot zur mehrsprachigen Optimierung verzeichnete Ron Dorff, ein Shopify-Shop, einen unglaublichen Anstieg der Besucherzahlen auf Website um 400%.

Häufige Herausforderungen bei der Lokalisierung von Shopify-Shops überwinden

Die Lokalisierung von Shopify-Shops bringt einige besondere Herausforderungen mit sich, aber Weglot bietet effektive Lösungen, um dir den Prozess zu erleichtern.

Um die Position des Weglot-Sprachwechslers auf einer Shopify Webseite zu ändern, kannst du eine der folgenden vier Methoden verwenden:

1. Switcher-Editor-Funktion

Nutze den Switcher-Editor, um den Sprachwechsler per Drag & Drop direkt auf eine Live-Vorschau deiner Webseite zu ziehen. Für diese Methode muss deine Webseite live sein.

2. Zu einem Menü hinzufügen

Erstelle einen benutzerdefinierten Sprachwechsler in deinem Hauptmenü, indem du ihn mit Weglot-Übersetzungen verknüpfst. Navigiere zu Shopify Admin >Online Store > Navigation, füge Menüpunkte für jede Sprache mit dem Format #Weglot-language hinzu (z.B. #Weglot-en für Englisch). Du kannst auch ein Dropdown-Menü für Sprachen erstellen.

3. Weglot_here Option

Füge den folgenden Codeschnipsel in deine Theme.liquid-Datei an der gewünschten Stelle ein:

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

Dieser Code platziert den Sprachwechsler dort, wo du ihn platzierst, und behebt damit übliche Beschränkungen, die in Community-Foren diskutiert werden.

4. Sprachwechsler Option

Integriere den Sprachwechsler manuell, indem du deinen Weglot-Initialisierungscode in weglot_switchers.liquid änderst. Füge die Option Sprachwechsler ein und gib den Ziel-CSS-Selektor an, in dem der Sprachwechsler erscheinen soll:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

Ersetze .header-nav durch den CSS-Selektor deines gewünschten Elements.

Außerdem profitierst du von den folgenden Vorteilen der Lokalisierung, wenn du Weglot nutzt:

• Übersetzung dynamischer Inhalte: Weglot übersetzt JavaScript-generierte Inhalte und AJAX-geladene Elemente effektiv und stellt sicher, dass alle dynamischen Inhalte erfasst und übersetzt werden.
• Mehrsprachige SEO für Shopify: Weglot automatisiert die Implementierung von hreflang-Tags und erstellt sprachspezifische Sitemaps. Dies ergänzt die in Shopify integrierten SEO-Funktionen und ermöglicht es den Suchmaschinen, den Nutzern die richtige Sprachversion anzuzeigen.

• Übersetzung von Shopify-spezifischen Elementen: „ Weglot “ übernimmt die Übersetzung Ihres gesamten Shops, einschließlich der Checkout-Seiten, E-Mail-Benachrichtigungen und Metafelder, und überwindet damit die in der Shopify-Dokumentation beschriebenen Einschränkungen.

• Optimierung von Übersetzungsworkflows: Weglots Translation Memory und Glossar-Funktionen helfen dir, die Konsistenz in einem großen Produktkatalog zu wahren. So wird sichergestellt, dass die Begriffe einheitlich übersetzt werden und deine Markenbotschaft in verschiedenen Sprachen kohärent ist.

Vergleich von Weglot und nativem Shopify Sprachwechsler

Shopify bietet Nutzern die grundlegenden Werkzeuge, die sie benötigen, um ihre Shops in mehrere Sprachen zu übersetzen, aber es gibt auch Beschränkungen.

Im Gegensatz dazu bietet Weglot eine umfassende Übersetzungslösung und begegnet den Beschränkungen von Shopify direkt. Daher ist die Plattform eher für Nutzer/innen geeignet, die ihre mehrsprachigen Inhalte selbst verwalten möchten.

Überwinde Sprachbarrieren: Implementiere Weglot für deinen Shopify Store

Wie wir gesehen haben, bietet Weglot einzigartige Vorteile für Shopify-Shops und ist damit die ideale Lösung, um Sprachbarrieren online zu überwinden. Mit dem Sprachwechsler von Weglot kannst du zusätzliche Anpassungen vornehmen, um die Benutzerfreundlichkeit zu verbessern, während der visuelle Editor In-Context-Übersetzungen ermöglicht, mit denen du Inhalte bei Bedarf verfeinern kannst. Du kannst sogar professionelle Übersetzungen direkt über das Dashboard bestellen, um die Genauigkeit zu erhöhen.

Weglot lässt sich in beliebte Shopify-Apps wie Smart Search Tools und Bildergalerien integrieren und stellt sicher, dass dein Shop in mehreren Sprachen voll funktionsfähig bleibt. Außerdem erstellt unsere Plattform sprachenspezifische Subdomains oder Unterverzeichnisse, was deine SEO-Bemühungen deutlich verbessert.

Das Beste daran ist, dass Weglot mit allen Content-Management-Systemen kompatibel ist. Das heißt, wenn du von Shopify weggehst, musst du nicht auf die Vorteile von Weglot verzichten.

Starten Sie noch heute Ihre 14-tägige kostenlose Testphase bei Weglot und freuen Sie sich schon in wenigen Minuten über eine mehrsprachige Website!

Häufige Probleme und schnelle Lösungen

Die Sprachauswahl verschwindet manchmal nach einem Theme-Update, der Installation einer App oder einer Anpassung des Layouts. Diese Probleme lassen sich in der Regel auf Ihre Theme-Einstellungen oder die Platzierung der Sprachauswahl zurückführen. Lassen Sie uns die vier häufigsten Probleme beheben.

1. Warum habe ich zwei Sprachumschalter?

Wenn zwei Umschaltfunktionen angezeigt werden, bedeutet dies in der Regel, dass sowohl die native Umschaltfunktion von Shopify als auch die Version Ihrer App (z. B. Weglot) gleichzeitig aktiv sind. Möglicherweise haben Sie auch mehr als eine Umschaltfunktion unter Weglot konfiguriert.

Öffnen Sie zunächst „Shopify Admin“ > „Online-Shop“ > „Themes“ > „Theme bearbeiten“. Suchen Sie in der Kopf- und Fußzeile nach der nativen Sprachauswahl von Shopify, deaktivieren Sie diese, falls Sie Weglot verwenden, und speichern Sie Ihre Änderungen. Die genaue Einstellung hängt von Ihrem Theme ab. Lassen Sie außerdem die Länder-/Regionsauswahl aktiviert, falls Kunden diese benötigen, um ihren Markt auszuwählen.

Wenn beide Switcher zu „ Weglot “ gehören, öffnen Sie „Weglot “Dashboard > Einstellungen > „ Sprachwechsler “ > „Switcher-Editor“. Überprüfen Sie, welche Switcher konfiguriert sind und ob sie so eingestellt sind, dass sie bei denselben Bildschirmgrößen angezeigt werden. „ Weglot “ unterstützt separate Switcher für Desktop- und Mobilgeräte. Stellen Sie daher sicher, dass diese nicht versehentlich gemeinsam angezeigt werden.

Wenn Sie Sprachlinks zu Ihrer Shopify-Navigation hinzugefügt haben, überprüfen Sie, ob diese neben dem regulären Sprachumschalter von „ Weglot “ angezeigt werden. Entfernen Sie überflüssige Menüpunkte, falls Sie nicht beide benötigen.

Weitere Hinweise zur Platzierung und Initialisierung benutzerdefinierter Schalter finden Sie in der offiziellen Shopify-Dokumentation unter „ Weglot “ ( Sprachwechsler ).

2. Warum fehlt mein „ Sprachwechsler “ nach einem Theme-Update?

Wenn Ihr „ Sprachwechsler “ nach der Aktualisierung Ihres Shopify-Themes nicht mehr angezeigt wird, bedeutet das nicht zwangsläufig, dass Ihre Übersetzungen verloren gegangen sind. Das Problem liegt möglicherweise an den Einstellungen des „ “ oder dessen Platzierung im aktualisierten Theme.

Testen Sie eine der übersetzten URLs Ihres Shops, beispielsweise yourstore.com/fr/, falls Ihre Konfiguration Sprachunterverzeichnisse verwendet. Wenn die Seite als übersetzte Version unter content angezeigt wird, der Sprachumschalter jedoch fehlt, liegt das Problem möglicherweise eher bei der Darstellung des Sprachumschalters als bei den Übersetzungen selbst.

Wenn Sie den in Shopify integrierten Sprachumschalter verwenden, überprüfen Sie bitte noch einmal, ob Ihre zusätzlichen Sprachen unter „Einstellungen > Sprachen“ weiterhin als veröffentlicht markiert sind. Wenn sie nicht als „Veröffentlicht“ markiert sind, werden sie nirgendwo angezeigt.

Wenn Sie „ Weglot “ verwenden:

1. Überprüfen Sie, ob „ Weglot “ aktiviert ist: Öffnen Sie „Online-Shop“ > „Designs“ > „Design bearbeiten“ > „App-Einbettungen“, suchen Sie nach „ Weglot “ und aktivieren Sie die Funktion, falls sie deaktiviert ist. Klicken Sie auf „Speichern“ und überprüfen Sie Ihre Shop-Seite.
2. Position des Umschalters zurücksetzen: Falls er immer noch fehlt, öffnen Sie Weglot Dashboard > Einstellungen > Sprachwechsler > Umschalter-Editor. Wählen Sie unter „Position“ die Option „Auf Standardposition zurücksetzen“ aus. Dadurch wird der Umschalter wieder in die rechte untere Ecke verschoben.

3. Wählen Sie bei Bedarf eine neue Position aus: Wenn der Umschalter erneut angezeigt wird, funktioniert seine bisherige Position möglicherweise nicht mehr mit Ihrem aktualisierten Theme. Ziehen Sie ihn mithilfe des Umschalter-Editors an eine neue Position innerhalb eines Elements, das in Ihrem gesamten Shop einheitlich angezeigt wird, und klicken Sie anschließend auf „Speichern“.

Falls Sie den Schalter von Weglot manuell zu Ihrem Theme code hinzugefügt haben, überprüfen Sie bitte, ob Ihre benutzerdefinierte Platzierung bei der Aktualisierung beibehalten wurde. Wenn Sie beispielsweise zuvor <div id="weglot_here"></div>, überprüfen Sie, ob es sich noch an der vorgesehenen Stelle befindet. Falls es entfernt wurde, stellen Sie es aus Ihrer vorherigen Theme-Version wieder her, nachdem Sie sich vergewissert haben, dass die Platzierung mit dem aktualisierten Layout kompatibel ist.

Überprüfen Sie außerdem Ihre Shop-Seite sowohl auf dem Desktop als auch auf Mobilgeräten. Wenn der Umschalter auf dem Desktop funktioniert, auf Mobilgeräten jedoch nicht, könnte dies an den Einstellungen für die Sichtbarkeit je nach Bildschirmgröße oder am mobilen Layout Ihres Themes liegen. Genau darauf gehen wir als Nächstes ein.

3. Warum wird die „ Sprachwechsler “ auf Mobilgeräten nicht angezeigt?

Wenn Ihr Shopify- Sprachwechsler -Element auf dem Desktop angezeigt wird, auf Mobilgeräten jedoch nicht, wird es möglicherweise durch das mobile Layout Ihres Themes verdeckt oder ist so konfiguriert, dass es nur auf größeren Bildschirmen angezeigt wird.

Wenn Sie den integrierten Umschalter von Shopify verwenden, öffnen Sie „Online-Shop“ > „Designs“ > „Design bearbeiten“ und wählen Sie die mobile Vorschau aus. Überprüfen Sie, ob die Sprachauswahl – je nach Ihrem Design – in der Fußzeile, der Kopfzeile oder im mobilen Menü angezeigt wird. Falls sie fehlt, vergewissern Sie sich, dass die entsprechende Einstellung für die Sprachauswahl aktiviert ist. Bei einigen Designs sind möglicherweise zusätzliche Anpassungen erforderlich, damit sie an der von Ihnen gewünschten Stelle auf dem Mobilgerät angezeigt wird.

Wenn Sie „ Weglot “ verwenden:

1. Öffnen Sie „Weglot “ unterDashboard > „Einstellungen“ > „ Sprachwechsler “ > „Switcher-Editor“.
2. Wählen Sie Ihren vorhandenen Umschalter aus dem Dropdown-Menü in der oberen linken Ecke aus. Vergewissern Sie sich unter „Verhalten“ > „Auf bestimmten Bildschirmgrößen anzeigen“, dass er so konfiguriert ist, dass er auf Mobilgeräten angezeigt wird.
3. Wenn Sie ein anderes Layout für Mobilgeräte wünschen, wählen Sie unten links im Editor die Mobilansicht aus, klicken Sie auf die Schaltfläche „+“, um einen separaten Umschalter zu erstellen, und ziehen Sie diesen an die gewünschte Position.
4. Klicken Sie auf „Speichern“ und überprüfen Sie anschließend, ob Ihre Desktop- und Mobilgeräte-Umschaltfunktionen auf den vorgesehenen Bildschirmgrößen angezeigt werden.

Falls in Ihrer mobilen Kopfzeile nicht genügend Platz vorhanden ist, können Sie die Sprachlinks auch in Ihr mobiles Navigationsmenü einfügen. Gehen Sie zu Shopify-Admin > „ Content “ > Menüs, wählen Sie das von Ihrer mobilen Navigation verwendete Menü aus und fügen Sie für jede Sprache einen Menüeintrag hinzu, wobei Sie das Linkformat von Weglot verwenden, zum Beispiel #Weglot-en für Englisch oder #Weglot-fr für Französisch. Sie können diese Links auch unter einem Dropdown-Menü „Sprachen“ zusammenfassen, sofern Ihr Theme dies unterstützt.

Falls der Umschalter immer noch fehlt, prüfen Sie, ob er durch benutzerdefiniertes CSS auf kleineren Bildschirmen ausgeblendet wird oder ob er sich in einem Navigationselement befindet, das nur auf dem Desktop angezeigt wird. Das Problem lässt sich möglicherweise beheben, indem Sie ihn an eine sichtbare, einheitliche Position verschieben.

4. Der Switcher funktioniert nach dem Aktualisieren, aber nicht beim ersten Laden der Seite?

Wenn Ihr „ Weglot “ (Sprachwechsler ) erst nach dem Aktualisieren der Seite angezeigt wird, hängt das Problem möglicherweise damit zusammen, wie Ihr Shopify-Theme „ content “ lädt oder wo der Umschalter positioniert ist.

Probieren Sie folgende Lösungen aus:

1. Setzen Sie die Position des Umschalters genauso zurück wie in der zweiten Aufgabe oben. Wenn der Umschalter nun durchgehend angezeigt wird, könnte seine vorherige Position das Problem sein. Weglot empfiehlt, ihn innerhalb eines Elements zu platzieren, das auf allen Seiten Ihres Shops vorhanden ist.
2. Überprüfen Sie die Seitenübergänge Ihres Themes. Einige Shopify-Themes verwenden Animationen oder AJAX-Navigation, um zwischen Seiten zu wechseln, ohne diese vollständig neu zu laden, was die Funktion „ Weglot “ beeinträchtigen kann. Wenn Ihr Theme diese Einstellungen bietet, gehen Sie zu „Online-Shop“ > „Themes“ > „Theme bearbeiten“ > „Theme-Einstellungen“ und suchen Sie nach „Leistung“ oder „Animationen“. Weglot empfiehlt, „Sport“ anstelle von „Ludicrous“ auszuwählen und „Animation zwischen Seiten“ zu deaktivieren, sofern diese Optionen vorhanden sind.
3. Überprüfen Sie alle benutzerdefinierten Umschalter unter code. Wenn Sie die Position von Weglot manuell angepasst haben, vergewissern Sie sich, dass der gewählte Ort beim Laden des Umschalters vorhanden ist. Ein Header- oder Navigationselement, das erst später erscheint, erfordert möglicherweise zusätzlichen Integrationsaufwand.

Testen Sie abschließend Ihre Shop-Oberfläche in einem privaten Browserfenster, indem Sie von der Startseite aus zu verschiedenen Produkt- und Kollektionsseiten navigieren. Sollte das Problem weiterhin bestehen, wenden Sie sich bitte an den Weglot -Support und geben Sie dabei die URL Ihres Shops, den Namen des Themes sowie die Schritte an, mit denen sich das Problem reproduzieren lässt.