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

Erfahre, wie du deiner Shopify-Navigationsleiste (Header) einen Favoriten-Link hinzufügst, damit Shopper*innen ihre gespeicherten Produkte direkt im Klaviyo Customer Hub öffnen können.

Du kannst dies als Symbol (z. B. ein Herz), als einfachen Textlink (z. B. „Favoriten“) oder als Schaltfläche implementieren. In diesem Leitfaden erfährst du, wie du den erforderlichen Code mithilfe von Shopifys Liquid-Code in den Header deiner Website einfügst.

Dieser Header-Link öffnet gespeicherte Favoriten. Damit Shopper*innen Produkte auf Produktdetail- oder Kollektionsseiten speichern können, folge So zeigst du Favoriten-Buttons auf deiner Website und im Klaviyo Customer Hub.

Hinweis Bei diesem Prozess bearbeitest du den Code deines Shopify-Themes. Wenn du dich mit dem Schreiben von Code nicht wohl fühlst oder keine Entwickler*innen in deinem Team hast, empfehlen wir dir, dich für Unterstützung an eine*n Klaviyo Partner zu wenden. Der Klaviyo-Support kann keine Fehlerbehebung für benutzerdefinierte Code-Implementierungen durchführen.

Bevor du anfängst

Bevor du diesen Link hinzufügst, richte Klaviyo Customer Hub in deinem Shopify-Shop ein und aktiviere Favoriten in Klaviyo. Stelle sicher, dass die Klaviyo-App-Einbettung im Shopify-Theme aktiviert ist, das du bearbeiten wirst.

Wir empfehlen dringend, dein Live-Theme zu duplizieren, bevor du Änderungen vornimmst. So kannst du den neuen Link testen, ohne dass dein Live-Shop davon betroffen ist.

1. Gehe in Shopify zu Onlineshop > Themes.
2. Klicke auf das Drei-Punkte-Menü (...) neben deinem Live-Theme.
3. Wähle Duplizieren.

Schritt 1: Bereite deine Assets vor (wenn du ein Symbol verwenden möchtest)

Verwende für die Icon-Option unten eine SVG-Datei, die kleiner als 15 KB ist. SVGs lassen sich auf jede Bildschirmgröße skalieren, ohne an Qualität zu verlieren, und können die Farben deines Themes übernehmen. Wenn du einen Textlink oder Button bevorzugst, springe zu Schritt 2.

1. Du musst ein Symbol finden, das du verwenden möchtest. Das kann jedes Symbol sein, aber wir empfehlen, ein SVG zu verwenden, um Pixelbildung zu vermeiden. Du kannst hier eine Standardversion (MIT-lizenziert) herunterladen: Heroicons heart.svg. Speichere die Datei als icon-heart.svg, damit sie mit dem Symbol-Code unten übereinstimmt.
2. Navigiere in deinem Shopify-Administrator zu Onlineshop > Themes.
3. Suche das doppelte Theme und klicke auf das Drei-Punkte-Menü (...) > Code bearbeiten.
4. Klicke in der linken Seitenleiste mit der rechten Maustaste auf den Ordner assets und wähle Hochladen ... aus, um die Dateiauswahl zu öffnen.
5. Wähle deine SVG-Datei aus und klicke auf Öffnen.

Schritt 2: Füge den Link zur Kopfzeile (obere Navigationsleiste) ein

Als Nächstes fügst du das Code-Fragment für dein Symbol, deinen Textlink oder deinen Button hinzu. Jede Option öffnet Favoriten im Klaviyo Customer Hub.

1. Wenn du Schritt 1 übersprungen hast, öffne den Code-Editor in Shopify: gehe zu Onlineshop > Themes. Klicke neben dem duplizierten Theme auf das Drei-Punkte-Menü (...) > Code bearbeiten. Suche im Code-Editor des duplizierten Themes die Datei, die deinen Header steuert.
   • Online Store 2.0-Themes (z. B. Dawn): Suche nach sections/header.liquid.
   • Vintage-Themes: Suche nach snippets/header-icons.liquid oder header-bar.liquid.
2. Einfügepunkt finden: Drücke Ctrl+F (oder Cmd+F auf dem Mac) und suche nach dem Wort cart oder account. Du solltest deinen neuen Code in denselben Container einfügen (in der Regel ein <div> oder <ul>), der diese vorhandenen Symbole enthält.
3. Füge 1 der folgenden Codeoptionen dort ein, wo der Link erscheinen soll (z. B. direkt vor dem Warenkorb-Symbol).

Option A: Icon-Link

Verwende diesen Code, wenn du Schritt 1 abgeschlossen hast und ein Herzsymbol anzeigen möchtest, vorausgesetzt, es heißt in unserem Beispiel icon-heart.svg:

<a href="#k-hub/favorites"
   id="favorites-icon-bubble"
   aria-label="Open Favorites"
   title="Favorites"
   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>

Option B: Textlink oder Schaltfläche

Verwende diesen Code, wenn du einen Textlink oder eine Schaltfläche bevorzugst. Du musst dafür keine Assets hochladen.

Für einen einfachen Text-Link:

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

Für eine Schaltfläche:

<a href="#k-hub/favorites" class="button button--primary">
  Favorites
</a>

1. Klicke auf Speichern.

Tipp: Stil deines Themes übernehmen Wenn dein Theme eine bestimmte CSS-Klasse für Header-Icons verwendet (z. B. header__icon oder icon-link), kannst du das Inline-Attribut style= im obigen Code durch diese Klasse ersetzen (z. B. class="header__icon"). Sieh dir die Vorschau des Ergebnisses an, um zu prüfen, ob Abstände und Hover-Effekte zu deinen anderen Header-Links passen.

Schritt 3: Teste und veröffentliche deine Änderungen

Nachdem du deinen Code gespeichert hast, sieh dir das bearbeitete Theme in der Vorschau an und teste den Link, bevor du es veröffentlichst.

1. Gehe in Shopify zu Onlineshop > Themes. Klicke neben dem duplizierten Theme, das du bearbeitet hast, auf das Drei-Punkte-Menü (...) > Vorschau.
2. Prüfe die Kopfzeile auf Desktop und Mobilgeräten. Du solltest das Symbol, den Textlink oder die Schaltfläche sehen, die du hinzugefügt hast. Klicke darauf und bestätige, dass sie deine gespeicherten Favoriten in Klaviyo Customer Hub öffnet.
3. Wenn du bereit bist, alle Änderungen im duplizierten Theme für Kund*innen sichtbar zu machen, kehre zu Onlineshop > Themes zurück. Suche unter Entwurfs-Themes das bearbeitete Duplikat und klicke auf Veröffentlichen.
4. Öffne deinen Live-Shop und teste den Link „Favorites“ erneut.

Fehlerbehebung

Wenn der Link nicht angezeigt wird, falsch aussieht oder Klaviyo Customer Hub nicht öffnet:

• Symbol wird nicht angezeigt: Prüfe, ob sich die Datei im Ordner assets befindet, ob es sich um eine SVG-Datei handelt, die kleiner als 15 KB ist, und ob sie genau icon-heart.svg heißt, damit sie mit dem Code-Fragment übereinstimmt. Es wird zwischen Groß- und Kleinschreibung unterschieden.
• Symbol ist falsch ausgerichtet: Du musst möglicherweise die Werte height und width im style -Attribut des Code-Fragments anpassen, damit sie zur Höhe der Navigationsleiste deines Themes passen.
• Änderungen werden nicht angezeigt: Bestätige, dass du die Vorschau des Themes ansiehst, das du bearbeitet hast. Öffne die Vorschau erneut über Shopify. Das Speichern eines duplizierten Themes aktualisiert deinen Live-Shop nicht; veröffentliche es nach dem Testen.
• Link öffnet Klaviyo Customer Hub nicht: Bestätige, dass Klaviyo Customer Hub eingerichtet ist und die Klaviyo App-Einbettung im Design, das du dir ansiehst, aktiviert ist. Prüfe, ob der Link weiterhin #k-hub/favorites verwendet.