Flaggen Emoji in Hauptmenü anzeigen lassen (Desktop)

[EliasP]

Hey, ich habe eine Verlinkung im Shop in der ich zur vereinfachten Darstellung ein Flaggen Emoji anzeigen lassen möchte. Das Einfügen an sich stellt kein Problem da, aber es existieren keine Flaggen Emojis unter Windows weshalb in unserem Fall nur "us" auf Windows Desktops angezeigt wird. Wie kriege ich es über html, css etc hin, dass ich ein Flaggen Emoji im Hauptmenü mit einbauen kann?

[Gabe]

Hey @EliasP 

Um eine Flagge im Hauptmenü deines Shopify-Shops auf Windows wie im Microsoft Edge, anzuzeigen, gibt es ein paar mögliche Lösungen die ich jetzt für dich gegoogelt habe. Z. B. steht in diesem Thread, dass man auf Windows und Microsoft Edge die emojis.directory verwenden kann. Diese Plattform bietet eine breite Palette von Emojis, die du kopieren und in dein Shopify-Theme einfügen kannst​​.

Eine weitere Möglichkeit wäre, die Flaggen als Images zu integrieren, anstatt als Emojis, indem du die Flagge zum Dateienbereich hochlädst. Der Bereich Dateien in Shopify ist ein Tool, mit dem du Dateien wie Bilder, Videos und Downloads verwalten und hochladen kannst. Du kannst darauf zugreifen, indem du zu Inhalt > Dateien gehst. Weitere Informationen findest du unter Dateien verwalten in Shopify.

Das CSS im Theme Editor verwenden:

Füge den HTML-Code für die Bilder an der Stelle in deinem Menü ein, an der du die Flaggen anzeigen möchtest. Dies könnte so aussehen: <img src="URL_DEINES_FLAGGENBILDES" alt="Landesname">. Ersetze URL_DEINES_FLAGGENBILDES mit dem URL-Link, den du beim Hochladen der Bilder erhalten hast. Du musst möglicherweise auch CSS verwenden, um die Größe und Position der Flaggenbilder anzupassen. Dies könnte so aussehen:

.deine-flaggenklasse {
    width: 20px; /* oder eine andere passende Größe */
    height: auto;
    /* weitere Stilisierungen nach Bedarf */
}

Ersetze .deine-flaggenklasse mit einer Klasse, die du deinen Bildern gibst. Eine rote Farbe kann man im Menüpunkt entweder mit <span style="color: #DE2A2A;">SALE</span> in den Shopify bezahlbaren Themes, oder mit dem folgenden CSS in den Shopify Free Themes anwenden:

.list-menu li:last-child a {
  color: red !important;
}

Du könntest kleine Flaggenbilder verwenden und diese in deinem Shopify-Theme einbinden, ähnlich wie du andere Bilder einbindest. Du kannst auch Unicode Regional Indicator Symbols nutzen. Dabei handelt es sich um spezielle Codes, die aus zwei Buchstaben bestehen (zum Beispiel "BR" für Brasilien), die auf vielen Plattformen automatisch in die entsprechende Flagge umgewandelt werden. 

Es ist auch möglich, dass eine Aktualisierung der Emoji-Unterstützung auf dem neuesten Stand von Windows 10 oder Windows 11 hilfreich sein könnte, da Microsoft regelmäßig Updates für Emojis veröffentlicht, einschließlich der Unterstützung neuerer Emoji-Standards​​.

Du solltest beachten, dass die Darstellung von Emojis je nach Browser und Betriebssystem variieren kann. Daher ist es wichtig, deine Lösung auf verschiedenen Geräten und Browsern zu testen, um sicherzustellen, dass sie wie gewünscht funktioniert. ODer eben Flaggenbilder anstatt Emojis verwenden.

---
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 👀!

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.