Shopify Sprachwechsler: Verbesserte User Experience

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.

Die native Funktion hat jedoch auch ihre Nachteile, z. B. die fehlende automatische Umschaltung der Geolocation und die eingeschränkten Anpassungsmöglichkeiten im Vergleich zu Drittanbieterlösungen.

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

• Der systemeigene Sprachwechsler von Shopify unterstützt mehrere Sprachen, aber im Vergleich zu den Apps von Drittanbietern fehlt es an automatischer Geolokalisierung und Anpassung.
• 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: Ein Überblick

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.

Vergiss nicht, dass der Shopify-Sprachwechsler die Sprache nicht automatisch erkennt und anzeigt, wenn der Nutzer sie nicht zusätzlich anpasst oder anwendet. Die nativen Funktionen unterstützen in erster Linie die manuelle Sprachauswahl durch den Nutzer.

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

1. Navigiere auf deiner Shopify-Admin-Seite zu Einstellungen >Sprachen und füge die Sprachen hinzu, die du unterstützen möchtest.
2. Gehe zu Online Store >Themes, wähle dein Theme aus und klicke auf Code bearbeiten. Finde die Datei header.liquid im Verzeichnis Sections.
3. 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:

<form action="{{ routes.root_url }}" method="get">  
 <select name="locale" onchange="this.form.submit()">    
  {% for locale in localization.available_locales %}      
   <option value="{{ locale | escape }}" {% if locale == localization.current_locale %}selected{% endif %}>        
    {{ locale.name }}      
   </option>    
  {% endfor %}  
 </select>
</form>

4. Jetzt ist dein Switcher an Ort und Stelle. Um das Design deines Shops anzupassen, kannst du im Stylesheet deines Themes eigene CSS-Regeln hinzufügen. Falls erforderlich, kannst du mit speziellen Selektoren wie select [name=„locale“] die unbeabsichtigte Gestaltung anderer Select-Elemente einer Seite verhindern.

Hier ist ein Beispiel, um die Hintergrundfarbe zu ändern:

select {    
background-color: #fff;    
 border: 1px solid #ccc;    
 padding: 5px;
}

Und hier erfährst du, wie du die Schriftart und Textfarbe des Schalters anpassen kannst:

select {    
font-family: 'Arial', sans-serif; /* Change font type */    
 font-size: 16px; /* Set font size */    
 color: #333; /* Text color */
}

select option {    
background-color: #f9f9f9; /* Background color for options */    
 color: #555; /* Text color for options */
}

Du kannst auch Hover-Effekte hinzufügen und die Größe des Rahmens ändern:

select {    
border-radius: 5px; /* Rounded corners */    
 border: 2px solid #007bff; /* Blue border */}

select:hover {    
border-color: #0056b3; /* Darker blue on hover */    
background-color: #e9ecef; /* Light gray background on hover */
}

5. Nachdem du deine Änderungen vorgenommen hast, klicke auf Speichern, um sie zu übernehmen. Der Sprachwechsler sollte jetzt in deinem Laden entsprechend deinen Einstellungen erscheinen.

Shopify-Shops mit dem Sprachwechsler von Weglot aufwerten

Der native Shopify Sprachwechsler zwar funktionsfähig, aber spezielle Shopify-Übersetzungs-Apps wie Weglot bieten jedoch umfangreichere Anpassungsmöglichkeiten sowie zusätzliche Shopify-Übersetzungsfunktionen für diejenigen, die das Einkaufserlebnis 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.

Außerdem können Sie mit dem KI-Sprachmodell von Weglot sofort markengerechte Übersetzungen erstellen. Es lernt aus Ihren Anweisungen, Ihrem Glossar und Ihrer manuellen Übersetzungshistorie, um Ihnen sofort kontextbewusste Übersetzungen zu liefern, die wie Sie klingen.

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!

Dann wird deine Webseite sofort mit führender maschineller Übersetzung übersetzt und in Unterverzeichnissen oder Subdomains angezeigt, je nachdem, welche Struktur du im Weglot Dashboard gewählt hast.

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ähle aus verschiedenen Formaten wie Dropdowns, Schaltflächen oder Flaggen, um Sprachoptionen anzuzeigen. Zum Beispiel: etwas Text
   • 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="locale"]');    
 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.

Denke daran, dass effektive mehrsprachige SEO zu größeren Marktchancen führen kann! Nach der Implementierung von Weglot für die mehrsprachige Optimierung entdeckte Ron Dorff, ein Shopify-Shop, eine beträchtliche Nachfrage auf dem deutschen Markt, die zuvor unerschlossen war. Durch die Übersetzung der Inhalte und die SEO-Optimierung konnte das Unternehmen einen unglaublichen 400%igen Anstieg der internationalen Verkäufe verzeichnen.

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 Shopify-spezifischer Elemente: Weglot kümmert sich um die Übersetzung deines gesamten Shops, einschließlich der Checkout-Seiten, E-Mail-Benachrichtigungen und Meta-Felder, und überwindet damit die Beschränkungen, die in der Shopify-Dokumentation beschrieben sind. Während zum Beispiel die Sprache der Kasse in der Regel festgelegt ist, kann Weglot die vom Nutzer gewählte Sprache in der Kasse wiedergeben.

• 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.

Starte noch heute deinen 10-tägigen kostenlosen Test mit Weglot und genieße eine mehrsprachige Webseite in wenigen Minuten!