Zo voeg je een Favorieten-link (pictogram, tekst of knop) toe aan je Shopify-header

Lees hoe je een Favorieten-link toevoegt aan de Shopify-navigatiebalk (header), zodat shoppers hun opgeslagen producten rechtstreeks kunnen openen in Klaviyo Customer Hub.

Je kunt dit implementeren als een icoon (bijv. een hartje), een eenvoudige tekstlink (bijv. "Favorieten"), of een knop. Deze handleiding behandelt hoe je de benodigde code in de header van je site kunt invoegen met behulp van Shopify's Liquid-code.

Deze headerlink opent opgeslagen favorieten. Als je shoppers producten wilt laten opslaan vanaf productdetail- of collectiepagina's, volg je Favorietenknoppen op je site en in Klaviyo Customer Hub tonen.

Let op Dit proces omvat het bewerken van je Shopify-themacode. Als je je niet prettig voelt bij het schrijven van code of geen ontwikkelaar in je team hebt, raden we aan contact op te nemen met een Klaviyo-partner voor hulp. Klaviyo support kan geen problemen oplossen bij aangepaste code-implementaties.

Voordat je van start gaat

Voordat je deze link toevoegt, stel je Klaviyo Customer Hub in op je Shopify-winkel en schakel je Favorieten in Klaviyo in. Zorg ervoor dat de Klaviyo-app-insluiting is ingeschakeld in het Shopify-thema dat je gaat bewerken.

We raden je sterk aan om je live thema te dupliceren voordat je wijzigingen aanbrengt. Zo kun je de nieuwe link testen zonder dat dit invloed heeft op je live winkel.

1. Ga in Shopify naar Webshop > Thema's.
2. Klik op het menu met drie puntjes (...) naast je live thema.
3. Selecteer Dupliceren.

Stap 1: bereid je assets voor (als je een pictogram wilt gebruiken)

Gebruik voor de onderstaande pictogramoptie een SVG-bestand kleiner dan 15 KB. SVG's schalen naar elk schermformaat zonder kwaliteitsverlies en kunnen de kleuren van je thema overnemen. Als je liever een tekstlink of knop gebruikt, ga dan verder met stap 2.

1. Je moet een pictogram vinden dat je wilt gebruiken. Dit kan elk pictogram zijn, maar we raden aan een SVG te gebruiken om pixelvorming te voorkomen. Je kunt hier een standaardversie (met MIT-licentie) downloaden: Heroicons heart.svg. Sla het bestand op als icon-heart.svg zodat het overeenkomt met de pictogramcode hieronder.
2. Ga in je Shopify-beheerder naar Webshop > Thema's.
3. Zoek het duplicatethema en klik op het menu met drie puntjes (...) > Code bewerken.
4. Klik in de linkernavigatiebalk met de rechtermuisknop op de map assets en selecteer Uploaden... om de bestandskiezer te openen.
5. Selecteer je SVG-bestand en klik op Openen.

Stap 2: de headerlink (bovenste navigatiebalk) invoegen

Voeg vervolgens het codefragment toe voor je pictogram, tekstlink of knop. Elke optie opent Favorieten in Klaviyo Customer Hub.

1. Als je stap 1 hebt overgeslagen, open je de code-editor in Shopify: ga naar Online winkel > Thema’s. Klik naast het gedupliceerde thema op het menu met drie puntjes (...) > Code bewerken. Zoek in de code-editor van het gedupliceerde thema het bestand dat je header aanstuurt.
   • Online Store 2.0-thema's (bijv. Dawn): Zoek naar sections/header.liquid.
   • Vintage-thema's: Zoek naar snippets/header-icons.liquid of header-bar.liquid.
2. Zoek het invoegpunt: Druk op Ctrl+F (of Cmd+F op Mac) en zoek naar het woord cart of account. Plak je nieuwe code in dezelfde container (meestal een <div> of <ul>) waarin deze bestaande pictogrammen staan.
3. Plak 1 van de onderstaande codeopties op de plek waar je de link wilt laten verschijnen (bijv. vlak voor het winkelwagenpictogram).

Optie A: Icoonlink

Gebruik deze code als je stap 1 hebt voltooid en een hartpictogram wilt weergeven, ervan uitgaande dat het in ons voorbeeld icon-heart.svg heet:

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

Optie B: Tekstlink of knop

Gebruik deze code als je liever een tekstlink of een knop gebruikt. Je hoeft hiervoor geen assets te uploaden.

Voor een eenvoudige tekstlink:

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

Voor een knop:

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

1. Klik op Opslaan.

Tip: de stijl van je thema laten overeenkomen Als je thema een specifieke CSS-klasse gebruikt voor headerpictogrammen (bijv. header__icon of icon-link), kun je het inline style= -attribuut in de bovenstaande code vervangen door die klasse (bijv. class="header__icon"). Bekijk een voorbeeld van het resultaat om te controleren of de witruimte en hovereffecten overeenkomen met je andere headerlinks.

Stap 3: je wijzigingen testen en publiceren

Nadat je je code hebt opgeslagen, bekijk je een voorbeeld van het bewerkte thema en test je de link voordat je het publiceert.

1. Ga in Shopify naar Webshop > Thema's. Klik naast het duplicaat-thema dat je hebt bewerkt op het menu met drie puntjes (...) > Voorbeeld.
2. Controleer de header op desktop en mobiel. Je zou het pictogram, de tekstlink of de knop moeten zien die je hebt toegevoegd. Klik erop en bevestig dat je daarmee je opgeslagen favorieten in Klaviyo Customer Hub opent.
3. Wanneer je klaar bent om alle wijzigingen in het gedupliceerde thema zichtbaar te maken voor klanten, ga je terug naar Online winkel > Thema's. Zoek in Conceptthema's het bewerkte duplicaat en klik op Publiceren.
4. Open je live webshop en test de Favorieten-link opnieuw.

Probleemoplossing

Als de link niet wordt weergegeven, er onjuist uitziet of Klaviyo Customer Hub niet opent:

• Pictogram wordt niet weergegeven: Controleer of het bestand in de map assets staat, een SVG is van minder dan 15 KB en precies icon-heart.svg heet, zodat het overeenkomt met het codefragment. De bestandsnaam is hoofdlettergevoelig.
• Pictogram is niet goed uitgelijnd: Mogelijk moet je de waarden height en width in het style -attribuut van het codefragment aanpassen zodat ze overeenkomen met de hoogte van de navigatiebalk van je thema.
• Wijzigingen worden niet weergegeven: controleer of je een voorbeeld bekijkt van het thema dat je hebt bewerkt. Open het Voorbeeld opnieuw vanuit Shopify. Als je een duplicaat thema opslaat, wordt je live winkel niet bijgewerkt; publiceer het na het testen.
• Link opent Klaviyo Customer Hub niet: Controleer of Klaviyo Customer Hub is ingesteld en of de Klaviyo-app-embed is ingeschakeld in het thema dat je bekijkt. Controleer of de link nog steeds #k-hub/favorites gebruikt.