Flaggen beim language Switcher (Ride Theme mit translate & adapt)

[Leicke]

Hallo,

ich möchte beim Ride Theme anstelle von "Deutsch" oder "English" in der Sprachauswahl (ich benutze shopify "translate & adapt" ) die Landesflagge angezeigt bekommen. Leider gibt es für shopify translate und adapt keine Einstellungsmöglichkeiten. Auch bei der Theme selbst habe ich das nirgendwo gefunden.

Wie kann ich das einrichten?

Grüße Daniel

[Gabe]

Hey @Leicke 

Danke für die Frage und die Länderflaggen sind nicht etwas die bei den Shopify Free Themes mit dabei ist denn das Land und die Währung wird ja automatisch mit unserer Free Geolocation App determiniert sobald der Kunde dein Shop betritt:

Manche unserer Premium Themes kommen mit Flaggen out-of-the-box aber in unseren Free Themes wie dein Ride Theme geht das nur mit der oben-abgebildeten Geolocation App oder mit einer drittanbieter App wie diese hier -> in diesen Apps einfach in die Demos klicken um die Flaggen in Action zu sehen.

Du kannst auch Kunden mit Deep Links an ihr Land oder ihre Region weiterleiten und Flaggen als Symbole dafür verwenden. Siehe unsere InfoSeite dazu hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Leicke]

Hallo, danke für die Antwort. Bei uns geht es ja aber nicht um eine Geolocation sondern um die Festlegung der Sprache via dropdown. Es müsste doch vermutlich nur ein Code snippet sein, um anstelle "Deutsch", "English" "Italiano" die entsprechende Flagge anzuzeigen. Der Deeplink wäre natürlich auch eine Möglichkeit, aber dazu müsste ich vermutlich im Header bereich auch Code eingeben?
Grüße und Danke, Daniel

[Gabe · Accepted solution]

Hey Daniel! @Leicke 

Das wird nur über eine relativ grössere Code Lösung oder 3P (drittanbieter) App gehen (siehe eine Demo der LangShop App hier) wie man beispielsweise in diesem Thread lesen kann und auch in diesem Thread. Da ist außerdem zu lesen dass aus Barrierefreiheits- und Zugänglichkeitsgründen, wir davor warnen, Flaggen für Sprachen zu verwenden, da Länderfahnen nicht immer für alle Kunden geeignet sind.

Die Sprachauswahl wird in der Regel in einer Datei wie header.liquid oder footer.liquid innerhalb des Themes definiert. Du musst die spezifische Stelle finden, an der die Sprachauswahl implementiert ist. Um anstelle von Text Landesflaggen anzuzeigen, den Code bearbeiten, um Bilder (Flaggen) einzufügen, und CSS für die entsprechende Formatierung. Für jede Sprache könntest du ein <img> Tag mit dem Link zur Flaggenbild-Datei einfügen.

Stelle sicher, dass du auch CSS-Media-Queries verwendest, um die Darstellung der Flaggen auf verschiedenen Geräten anzupassen. Hier im Forum gibt es auch ähnliche Threads, wo spezifische Lösungen oder Code-Snippets angeboten werden.

Beispiel (ohne Gewähr):

Den bestehenden Sprachauswahl-Code finden und angenommen, du möchtest eine Dropdown-Liste für die Sprachauswahl durch Flaggen ersetzen, hier ein Beispiel wie du eine Flaggenauswahl strukturieren könntest:

<select onchange="window.location.href=this.value;">
    <option value="/de"> Deutsch</option>
    <option value="/en"> English</option>
    <option value="/it"> Italiano</option>
</select>

Um das Aussehen deines Dropdown-Menüs anzupassen, CSS verwenden...Beispiel:

select {
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 16px;
}

option {
    padding: 5px;
}

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉