So fügst du einen Favoriten-Link (Symbol, Text oder Schaltfläche) zu deinem Shopify-Header hinzu

Wenn du ein bestimmtes „Favoriten“-Symbol in die Navigationsleiste deiner Website einfügst („Header“), steigerst du das Kundenengagement, da deine Kund*innen im Customer Hub ihre Favoriten leichter finden. Indem du deinen Kund*innen einen eigenen Startpunkt für ihre gespeicherten Artikel gibst, ermutigst du sie, größere Körbe zu bauen und öfter in deinen Shop zurückzukehren.

Du kannst dies als Symbol (z. B. ein Herz), einen einfachen Textlink (z. B. „Favoriten“) oder eine Schaltfläche implementieren. In dieser Anleitung erfährst du, wie du den erforderlichen Code mit dem Liquid-Code von Shopify in den Header deiner Website einfügst.

In diesem Leitfaden erfährst du, wie du ein Herzsymbol in deine Theme-Assets hochlädst und den Code-Link mit dem Liquid-Code von Shopify in den Header deiner Website einfügst.

Hinweis: Bei diesem Vorgang musst du den Code deines Shopify-Themes bearbeiten. Wenn du dich beim Schreiben von Code nicht wohlfühlst oder kein Entwicklerteam hast, empfehlen wir dir, dich an einen Klaviyo-Partner zu wenden. Klaviyo Support kann keine Probleme bei Implementierungen von benutzerdefiniertem Code beheben.

Bevor du anfängst

Wir empfehlen dir dringend, dein Live-Theme zu duplizieren, bevor du Änderungen vornimmst. So kannst du das neue Symbol in einer sicheren Umgebung testen, ohne dass dein Live-Shop beeinträchtigt wird.

1. Gehe in Shopify zu Online-Shop > Themes.

2. Klicke auf das Menü mit den drei Punkten (...) neben deinem Live-Theme.

3. Wähle Duplizieren.

Schritt 1: Deine Assets vorbereiten (wenn du ein Symbol verwenden möchtest)

Lade zunächst die Symboldatei hoch, die als Schaltfläche dient. Die Verwendung einer SVG-Datei ist am besten, da sie auf jede Bildschirmgröße skaliert werden kann, ohne dass die Qualität darunter leidet, und die Farben deines Themes erben kann.

1. Du musst ein Symbol finden, das du verwenden möchtest. Dies kann jedes Symbol sein, aber wir empfehlen dir, eine SVG-Datei zu verwenden, um Pixelbildung zu vermeiden. Eine Standardversion (mit Lizenz) kannst du hier herunterladen: Heroicons heart.svg.

2. Navigiere in deinem Shopify-Administrator zu Online-Shop > Themes.

3. Suche dein Theme und klicke auf das Menü mit den drei Punkten (...) > Code bearbeiten.

4. Scrolle in der linken Seitenleiste nach unten zum Ordner Assets und klicke auf Add a new asset.

5. Lade deine Symboldatei hoch.

Schritt 2: Füge den Link für die Kopfzeile (obere Navigationsleiste) ein.

Als Nächstes fügst du das Code-Fragment hinzu, das das Symbol anzeigt und es mit dem Customer Hub verknüpft.

1. Suche im Code-Editor für das Theme nach der Datei, die deinen Header steuert.

   • Online-Shop 2.0-Themes (z. B. Morgenröte): Suche nach sections/header.liquid.

   • Vintage Themes: Suche nach snippets/header-icons.liquid oder header-bar.liquid.

2. Suche die Einfügemarke: Drücken Sie Strg+F (oder Cmd+F auf dem Mac) und suchen Sie nach dem Wort Warenkorb oder Konto. Du möchtest deinen neuen Code in denselben Container einfügen (in der Regel einen <div> oder <ul>), der diese vorhandenen Symbole enthält.

3. Füge eine der folgenden Code-Optionen an der Stelle ein, an der der Link erscheinen soll (z. B. direkt vor dem Warenkorb-Symbol).

<a href=„#k-hub/favorites“ id=„favorites-icon-bubble“ aria-label=„Favoriten öffnen“ title=„Favoriten“ style=„display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;“>
  <span style=„height:20px;width:20px“>
    {{ 'icon-heart.svg' | inline_asset_content }}
  </span> </a>

<a href=„#k-hub/favorites“ class=„header__menu-item header__menu-item-list“ style=„text-decoration: none;“> Favoriten </a>

<a href=„#k-hub/favorites“ class=„button-primary“> Favoriten </a>

Tipp: Dem Stil deines Themes entsprechen Wenn dein Theme eine bestimmte CSS-Klasse für Header-Symbole verwendet (z. B. Header__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__Symbol“). Dadurch wird sichergestellt, dass die Abstands- und Hover-Effekte perfekt zu deinen anderen Schaltflächen passen.

Ergebnis

Öffne deinen Shop nach dem Speichern in einem neuen Inkognito-/Privat-Fenster, um das Browser-Caching zu umgehen. Du solltest das Herzsymbol in deiner Navigationsleiste sehen. Wenn du auf dieses Symbol klickst, wird jetzt die Registerkarte Favoriten im Customer Hub geöffnet.

Fehlerbehebung

Wenn das Symbol nicht erscheint oder falsch aussieht:

• Das Symbol ist ein fehlerhaftes Bild: Stelle sicher, dass du die Datei in den Ordner Assets hochgeladen und sie genau icon-heart.svg benannt hast. Bei den Dateinamen wird zwischen Groß- und Kleinschreibung unterschieden.

• Das Symbol ist falsch ausgerichtet: Möglicherweise musst du die Werte für Höhe und Breite im Stilattribut des Code-Fragments anpassen, damit sie mit der Höhe der Navigationsleiste deines Themes übereinstimmen.

• Änderungen werden nicht angezeigt: Shopify-Themes werden aggressiv zwischengespeichert. Versuche, eine Vorschau des Themes in einem Inkognito-Fenster anzuzeigen oder füge ?preview_theme_id= an deine URL an, wenn du an einem Entwurfsthema arbeitest.