Hoe je een link naar Favorieten (pictogram, tekst of knop) toevoegt aan je Shopify header

Het toevoegen van een specifiek "Favorieten" pictogram aan de navigatiebalk van uw site ("header") zorgt voor meer betrokkenheid door het verminderen van wrijving voor uw klanten om hun favorieten te vinden binnen Klaviyo Customer Hub. Door shoppers een speciaal startpunt te geven voor hun opgeslagen items, moedig je ze aan om grotere manden samen te stellen en vaker terug te komen naar je winkel.

Je kunt dit implementeren als een pictogram (bijvoorbeeld een hart), een eenvoudige tekstlink (bijvoorbeeld "Favorieten") of een knop. In deze handleiding wordt uitgelegd hoe je de benodigde code in de header van je site kunt invoegen met behulp van Shopify's Liquid code.

Deze handleiding laat zien hoe je een harticoon kunt uploaden naar je thema assets en de link met de code kunt invoegen in de header van je site met behulp van Shopify's Liquid code.

Dit proces houdt in dat je de code van je Shopify-thema moet bewerken. Als je het niet prettig vindt om code te schrijven of als je geen ontwikkelaar in je team hebt, raden we je aan om contact op te nemen met een Klaviyo partner voor hulp. De Klaviyo support kan geen problemen oplossen met aangepaste code-implementaties.

Voordat je van start gaat

We raden sterk aan om je live-thema te dupliceren voordat je wijzigingen aanbrengt. Zo kun je het nieuwe pictogram in een veilige omgeving testen zonder dat dit invloed heeft op je live winkel.

1. Ga in Shopify naar Online Store > Thema's.

2. Klik op het menu met de drie puntjes (...) naast je livethema.

3. Selecteer Dupliceren.

Stap 1: Bereid je bedrijfsmiddelen voor (als je een pictogram wilt gebruiken)

Upload eerst het pictogrambestand dat als knop zal dienen. Het gebruik van een SVG-bestand is het beste omdat het schaalt naar elk schermformaat zonder kwaliteitsverlies en de kleuren van je thema kan overnemen.

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

2. Navigeer in je Shopify Beheerder naar Online Store > Thema's.

3. Zoek je thema en klik op het menu met de drie puntjes (...) > Code bewerken.

4. Scroll in de linker zijbalk naar beneden naar de map Assets en klik op Een nieuw onderdeel toevoegen.

5. Upload je pictogrammenbestand.

Stap 2: Voeg de header (bovenste navigatiebalk) link in

Voeg vervolgens het codefragment toe dat het pictogram weergeeft en koppelt aan de Klaviyo Customer Hub.

1. Zoek in de themacode-editor het bestand dat je header regelt.

   • Online Store 2.0-thema's (bijvoorbeeld Dawn): Zoeken naar secties/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 de Mac) en zoek naar het woord winkelwagen of account. Je wilt je nieuwe code in dezelfde container plakken (meestal een <div> of <ul>) die deze bestaande pictogrammen bevat.

3. Plak een van de codeopties hieronder op de plek waar je de link wilt laten verschijnen (bijvoorbeeld vlak voor het pictogram van de winkelwagen).

<a href="#k-hub/favorites"
 id="favorites-icon-bubble"
 aria-label="Open favorieten"
 title="Favorieten"
 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/favorieten" class="header__menu-item header__menu-item--list" style="text-decoration: none;"> 
 Favorieten
</a>

<a href="#k-hub/favorieten" class="button--primary"> 
 Favorieten
</a>

Tip: Stem af op de stijl van je thema Als je thema een specifieke CSS-klasse gebruikt voor headerpictogrammen (bijvoorbeeld header__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__pictogram"). Hierdoor passen de spatiëring en hover-effecten perfect bij je andere knoppen.

Resultaat

Zodra je de winkel hebt opgeslagen, open je deze in een nieuw Incognito/Privé-venster om caching door de browser te omzeilen. Je zou het hartpictogram in je navigatiebalk moeten zien. Als je nu op dit pictogram klikt, opent het tabblad Favorieten binnen de Klaviyo Customer Hub.

Probleemoplossing

Als het pictogram niet verschijnt of er niet goed uitziet:

• Het pictogram is een kapotte afbeelding: Zorg ervoor dat je het bestand hebt geüpload naar de map Assets en het precies icon-heart.svg hebt genoemd. De bestandsnamen zijn hoofdlettergevoelig.

• Pictogram is verkeerd uitgelijnd: Mogelijk moet je de hoogte- en breedtewaarden in het stijlattribuut van het codefragment aanpassen aan de hoogte van de navigatiebalk in je thema.

• Wijzigingen worden niet weergegeven: Shopify thema's cache agressief. Probeer een voorbeeld van het thema te bekijken in een Incognitovenster of voeg ?preview_theme_id= toe aan je URL als je werkt aan een ontwerpthema.