Icons im Menü

[deemon86]

Moin zusammen. 🙂

Ich habe zwei Fragen:

1. Kann man Icons im Menü/dropdown-menü einfügen?

2. Wenn ja, wo? 

Habe es nicht gefunden. 😕

Mein Vorlage: Dawn

[Gabe]

Hey @deemon86 

Es kommt drauf an was für welche Icons du im Menü einbetten möchtest. Diese gehen beispielsweise:

Die Anpassungen für die Einbindung von Icons in dein Menü hängt von deinem Theme ab, bzw. ob die ein Free Theme oder einer Premium Theme verwendest denn die Premium Themes haben hier mehr Möglichkeiten.

Anpassungen erfolgen auch meist in den Dateien header.liquid oder navigation.liquid innerhalb des Themes-Codes. Du findest diese im Bereich "Online-Store" > "Themes" > "Actions" > "Edit code". Dort suchst du nach den genannten Liquid-Dateien oder nach anderen Dateien, die für die Darstellung deines Menüs verantwortlich sind. Die genauen Schritte können je nach Struktur und Aufbau deines spezifischen Themes variieren.

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! 😉

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

[deemon86]

Hi Gabe,

danke für deine Antwort. 

1. Dürfen die Smilies, die du vorgeschlagen hast, kommerziell verwendet werden?

2. Habs nach einem Link von dir nachgemacht und es hat teilweise geklappt. Die Bilder konnten nicht gefunden werden. 

Ich habe es diesem Beitrag nachgemacht. https://community.shopify.com/c/shopify-design/adding-icons-to-drop-down-menu/m-p/1928366

Es sah dann so aus. 

Menü-Kategorien doppelt und die Bilder nicht geladen/gefunden. Habe vieles ausprobiert, aber noch nicht geschafft. Seit 3 Stunden habe ich es versucht. 😄

Kannst du mir eventuell weiterhelfen?

[deemon86]

Kurzes Update. 

Zur  Info: Ich möchte die Icons im Dropdown-menü auf der mobilen Version haben.

Ich habe jetzt herausgefunden, dass es im header-drawer.liquid gemacht wird.

Habe bis jetzt nur so weit geschafft, dass die icons nur vor den Kollektionen stehen und aber alle gleiches icon.

Ich weiß bis jetzt nicht, wie ich für die einzelnen Kategorien es ändern kann. Die sind ja da nicht aufgelistet. 🙂

[Gabe]

Hey @deemon86 

Danke dafür und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. 

Ich 👁️ gerade wie der eine im anderen Thread das mit Metafelder gemacht hat -> ecstyletheme.myshopify.com (pass: 1234).

EDIT: Versuche mal folgendes:

Du machst das folgende in einer Testumgebung nehme ich an? Da ich dein Theme Code nicht kenne, werde ich mein eigenes Test-Dawn Theme dafür verwenden und du musst den Code deinen eigenen Dawn Theme anpassen.

Zuerst für jede Kollektion (oder Menüpunkt, je nach Bedarf) ein Metafeld einrichten -> es kann dazu verwendet werden, den Pfad oder die URL des Icons zu speichern, das du neben dem Menüpunkt anzeigen möchtest. Gehe zu "Einstellungen" > "Metafelder" > "Produkte" und erstelle ein neues Metafeld, z.B. mit dem Namen menu_icon. Anschließend deinen Theme-Code anpassen, um dieses Metafeld auszulesen und das entsprechende Icon anzuzeigen. Da du erwähnt hast, dass du bereits Icons vor den Menüpunkten angezeigt bekommst, aber alle das gleiche Icon haben, benötigst du eine Anpassung, um das spezifische Icon für jeden Menüpunkt basierend auf dem Metafeld anzuzeigen.

Hier ein Beispiel aus meinem Dawn Theme entnommen, wie du den Code anpassen könntest, um individuelle Icons anzuzeigen. Dieses Beispiel nimmt an, dass du die URL oder den Pfad des Icons im Metafeld menu_icon für jede Kollektion speicherst:

<ul class="mega-menu__list page-width mega-menu__list--condensed" role="list">
  <li>
    <a id="HeaderMenu-home-neuer-retail-kit" href="/de/blogs/news/neuer-retail-kit" class="mega-menu__link mega-menu__link--level-2 link">
      <!-- Beispiel, wie das Metafeld für ein Icon genutzt werden kann -->
      {% assign collection_handle = 'neuer-retail-kit' %} <!-- Dies sollte der Handle der Kollektion sein -->
      {% assign collection = collections[collection_handle] %}
      {% if collection.metafields.custom.menu_icon %}
        <img src="{{ collection.metafields.custom.menu_icon }}" alt="" style="height: 20px;"> <!-- Stil und Größe des Icons anpassen -->
      {% endif %}
      Neuer Retail-Kit
    </a>
  </li>
</ul>

In diesem Beispiel wird {% assign collection_handle = 'neuer-retail-kit' %} verwendet, um eine spezifische Kollektion basierend auf ihrem Handle zu referenzieren. Du müsstest dies für jeden Menüpunkt entsprechend anpassen, indem du den richtigen Handle der Kollektion oder des Menüpunktes einsetzt.

Weiteres zu beachten:

• Stelle sicher, dass du für jede Kollektion oder jeden Menüpunkt, für den du ein individuelles Icon anzeigen möchtest, ein Metafeld menu_icon mit dem Icon-Pfad oder der URL als Wert hinzufügst.
• Passe den Code entsprechend deinen spezifischen Anforderungen und der Struktur deines Menüs an.

[deemon86]

Hallo Gabe!

Zuerst vielen Dank für deine Antworten, deine Mühe und deine Zeit!

Ich habe versucht es so zu machen, wie du geschrieben hast, jedoch habe ich ein paar Fragen dazu.

Zu Metafeld:

Was kommt als Typ da rein? URL,  Datei oder etwas anderes? Bzw. wo gebe ich die URL des Icons ein?

Zu deinem Code:

1. Füge ich den ganzen Code ein oder nur von

<!-- Beispiel, wie das Metafeld für ein Icon genutzt werden kann -->

bis 

<!-- Stil und Größe des Icons anpassen -->

2. Was muss ich noch im Code ändern, außer custom.menu_icon?

3. Wo kommt die URL zu einzelnen Menüpunkten bzw. Kollektionen?

Bei mir sieht das jetzt so aus. 🙂

Mein Test-Icon:

https://cdn.shopify.com/s/files/1/0823/7308/3476/files/menu_icon_6c9787b8-1063-4da8-9930-4e82bd957bb...

Schöne Grüße 

Dieter

[deemon86]

So sieht im Moment mein Code aus:

<ul class="mega-menu__list page-width mega-menu__list--condensed" role="list">
  <li>
    <a id="HeaderMenu-home-neuer-retail-kit" href="/de/blogs/news/neuer-retail-kit" class="mega-menu__link mega-menu__link--level-2 link">

      <!-- Beispiel, wie das Metafeld für ein Icon genutzt werden kann -->
      {% assign collection_handle = 'damen' %} <!-- Dies sollte der Handle der Kollektion sein -->
      {% assign collection = collections[collection_damen] %}
      {% if collection.metafields.custom.menu_icon %}
        <img src="{{ collection.metafields.custom.menu_icon }}" alt="" style="height: 20px;"> <!-- Stil und Größe des Icons anpassen -->
      {% endif %}
   </a>
  </li>
</ul>

[Gabe]

Hey Dieter! @deemon86 

Wow, du leistest hier eine Arbeit und bist ein paar Schritte weitergekommen. Leider kann ich aber nicht genau sagen, ob du ggf. an einen Limit des Systems gestoßen bist. Aber lass uns das hier etwas weiter 👀!

Nur muss ich dazu betonen, dass es wichtig zu beachten ist wie viel Zeit du jetzt in diese Sache investiert hast, die du vielleicht in wichtigere Dinge hättest investieren können, wie den Aufbau einer effektive Marketing Strategie für deine Produkte und dein Zielpublikum. Bist du dir sicher, dass diese kleine Icons im Menü wirklich eine effektive Nutzung deiner Zeit als Unternehmer sind?

Wie dem auch sei, Für das Metafeld, das du für die Icons verwenden möchtest, gibt es unterschiedliche Möglichkeiten, je nachdem, wie du deine Icons verwalten möchtest:

• Typ "URL": Wenn du die Icons extern hostest (z.B. auf einem CDN wie Shopify Files) und einfach die URL im Metafeld speichern möchtest. Das macht es einfach, URLs zu den Icon-Dateien direkt zu speichern und dann in deinem Theme zu verwenden.
• Typ "Datei": Wenn du die Icons direkt in Shopify hochladen und verwalten möchtest. Shopify speichert dann eine Referenz auf die Datei im Metafeld. Das ist praktisch, weil es die Verwaltung der Dateien innerhalb von Shopify ermöglicht.

In deinem Fall, da du bereits eine URL hast, könntest du den Typ "URL" verwenden und einfach die URL zu jedem Icon in das entsprechende Metafeld der Kollektion eintragen.

Zum Code selber:

1. Wo und was einzufügen ist: Du fügst also den gesamten Block ein, beginnend mit dem Kommentar <!-- Beispiel, wie das Metafeld für ein Icon genutzt werden kann --> bis zum Ende des if-Blocks, also bis einschließlich <!-- Stil und Größe des Icons anpassen -->. Dieser Block ersetzt oder ergänzt den bestehenden Code an der Stelle, an der du die Icons in deinem Menü anzeigen möchtest.

2. Weitere Anpassungen im Code: Abgesehen von custom.menu_icon solltest du sicherstellen, dass der collection_handle korrekt auf den Handle der Kollektion gesetzt ist, für die du das Icon anzeigen möchtest. Im Beispielcode hast du collection_handle = 'damen' gesetzt, aber dann versuchst du, collections[collection_damen] aufzurufen. Das sollte collections[collection_handle] sein, um den vorher gesetzten Handle zu verwenden.

3. URL zu einzelnen Menüpunkten/Kollektionen: Die URL deines Menüpunkts oder deiner Kollektion ist bereits im href-Attribut des a-Tags definiert. Wenn du spezifische Icons für verschiedene Kollektionen anzeigen möchtest, musst du sicherstellen, dass für jede Kollektion ein Metafeld mit der URL zum entsprechenden Icon existiert und der collection_handle im Code entsprechend angepasst wird.

Beispiel Liquid Code:

<ul class="mega-menu__list page-width mega-menu__list--condensed" role="list">
  <li>
    <a id="HeaderMenu-home-neuer-retail-kit" href="/de/blogs/news/neuer-retail-kit" class="mega-menu__link mega-menu__link--level-2 link">
      <!-- Beispiel, wie das Metafeld für ein Icon genutzt werden kann -->
      {% assign collection_handle = 'damen' %} <!-- Dies sollte der Handle der Kollektion sein -->
      {% assign collection = collections[collection_handle] %}
      {% if collection.metafields.custom.menu_icon %}
        <img src="{{ collection.metafields.custom.menu_icon }}" alt="" style="height: 20px;"> <!-- Stil und Größe des Icons anpassen -->
      {% endif %}
    </a>
  </li>
</ul>

Vergewissere dich, dass du für jede Kollektion, die ein individuelles Icon haben soll, ein Metafeld menu_icon im Bereich "Metafelder" unter "Produkte" in deinem Shopify-Adminbereich hinzufügst und die entsprechende URL oder den Dateipfad zu deinem Icon dort speicherst.

Community Beitrage als Referenz:

Einige Beiträge empfehlen die Verwendung von Metafeldern, um individuelle Icons neben den Menüpunkten anzuzeigen. Du müsstest Metafelder für jede Kollektion oder Produktseite erstellen, in denen du die URLs deiner Icons speicherst. Anschließend passt du den Theme-Code an, um diese Metafelder auszulesen und die Icons entsprechend anzuzeigen. Dieser Ansatz erfordert Zugang zum "Custom Data"-Bereich deines Shopify-Admins und möglicherweise die Erstellung von Metafeldern, die spezifisch für Navigationselemente sind​​.

Eine weitere Methode ist die Verwendung von CSS, um Icons direkt im Menü hinzuzufügen. Dieser Ansatz beinhaltet das Hinzufügen von CSS-Regeln, die das ::before Pseudoelement nutzen, um Icons basierend auf dem URL-Pfad jedes Menüpunktes einzufügen. Du müsstest für jeden Menüpunkt, dem du ein Icon hinzufügen möchtest, einen individuellen CSS-Code schreiben. Dieser Code definiert das Icon als Hintergrundbild für das ::before Pseudoelement des jeweiligen Menülinks. Hier kannst du die URL des Icons und die spezifischen CSS-Eigenschaften wie Größe und Position anpassen​​​​.

Hoffe das hilft dir weiter - bei weiteren Fragen dazu kann ich gerne einen Experten empfehlen! 😉

[deemon86]

Hallo Gabe,

danke für deine ausführliche Antwort.

Habe es bis jetzt mit den Metafeldern nicht hinbekommen. Irgendwas mache ich falsch. Ich könnte jetzt auch einen Programmierer engagieren, aber ich möchte es selbst machen/lernen, damit ich auch in Zukunft es auch selber ändern kann. Ich möchte nämlich mein Shop langfristig betreiben und deswegen auch bevor es online geht zu 100% perfekt machen.

Habe es jetzt mit css probiert und auch einigermaßen hinbekommen. Icon steht vor dem Menüpunkt, ABER dropdown-menü ist zu weit links, sodass Icon zu wenig platz vor dem Menüpunkt hat. 

Hier ein Beispiel (ist Desktopversion im Dropdown-Menü sieht es aber ähnlich aus.)

2. Problem, auf der Produktseite erscheint dieses Icon auch, was nicht sein sollte.

Wenn du auf schnelle ein paar Lösungen hast, dann nehme ich es gerne an. Sonst experimentiere ich noch ein bisschen rum.

Kannst du mir eventuell sagen, was die bessere Lösung wäre? Es mit Metafeldern zu machen oder mit CSS?

Schöne Grüße Dieter 

[Gabe]

Hey Dieter! @deemon86 

Hast du das lösen können? Gerne kann ich einen Experten empfehlen der das 👁️ kann!

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

[deemon86]

Hallo Gabe,

nein, leider habe ich bis jetzt keine Lösung gefunden. Im Moment arbeite ich an meinem Shop weiter. Werde später noch mal versuchen.

Schöne Grüße Dieter