Så här lägger du till en länk till Favoriter (ikon, text eller knapp) i sidhuvudet i Shopify

Läs mer om hur du lägger till en Favoriter-länk i Shopifys navigeringsfält (sidhuvud) så att kunder kan öppna sina sparade produkter direkt i Klaviyo Customer Hub.

Du kan implementera detta som en ikon (t.ex. ett hjärta), en enkel textlänk (t.ex. "Favoriter") eller en knapp. Den här guiden beskriver hur du lägger in den nödvändiga koden i webbplatsens huvud med Shopifys Liquid-kod.

Den här rubriklänken öppnar sparade favoriter. Om du vill låta kunder spara produkter från produktsidor eller kategorisidor följer du Så visar du favoritknappar på din webbplats och i Klaviyo Customer Hub.

Observera Den här processen innebär att du redigerar din Shopify-temakod. Om du inte känner dig bekväm med att skriva kod eller inte har en utvecklare i ditt team rekommenderar vi att du kontaktar en Klaviyo-partner för att få hjälp. Klaviyo support kan inte felsöka anpassade kodimplementeringar.

Innan du börjar

Innan du lägger till den här länken ska du konfigurera Klaviyo Customer Hub i din Shopify-butik och aktivera Favoriter i Klaviyo. Kontrollera att Klaviyo-appinbäddning är aktiverat i Shopify-temat som du ska redigera.

Vi rekommenderar starkt att du duplicerar ditt aktiva tema innan du gör ändringar. Det gör att du kan testa den nya länken utan att påverka din aktiva butik.

1. I Shopify går du till Webbutik > Teman.
2. Klicka på menyn med tre punkter (...) bredvid ditt publicerade tema.
3. Välj Duplicera.

Steg 1: Förbered dina resurser (om du vill använda en ikon)

För ikonalternativet nedan använder du en SVG-fil som är mindre än 15 KB. SVG:er skalar till alla skärmstorlekar utan att tappa kvalitet och kan ärva färgerna i ditt tema. Om du föredrar en textlänk eller en knapp går du vidare till steg 2.

1. Du behöver hitta en ikon som du vill använda. Det kan vara vilken ikon som helst, men vi rekommenderar att du använder en SVG för att undvika pixlighet. Du kan ladda ner en standardversion (MIT-licensierad) här: Heroicons heart.svg. Spara filen som icon-heart.svg så att den matchar ikonkoden nedan.
2. I din Shopify-administratör navigerar du till Webbutik > Teman.
3. Hitta det duplicerade temat och klicka på menyn med tre punkter (...) > Redigera kod.
4. I det vänstra sidofältet högerklickar du på mappen assets och väljer Ladda upp... för att öppna filväljaren.
5. Välj din SVG-fil och klicka på Öppna.

Steg 2: infoga länken i sidhuvudet (den övre navigeringsraden)

Lägg sedan till kodsnippet för din ikon, textlänk eller knapp. Varje alternativ öppnar Favoriter i Klaviyo Customer Hub.

1. Om du hoppade över steg 1 öppnar du kodredigeraren i Shopify: gå till Online Store > Themes. Bredvid det duplicerade temat klickar du på menyn med tre punkter (...) > Redigera kod. I kodredigeraren för det duplicerade temat letar du reda på filen som styr din sidhuvud.
   • Online Store 2.0-teman (t.ex. Dawn): Sök efter sections/header.liquid.
   • Vintage-teman: Sök efter snippets/header-icons.liquid eller header-bar.liquid.
2. Hitta infogningspunkten: Tryck på Ctrl+F (eller Cmd+F på Mac) och sök efter ordet cart eller account. Du vill klistra in din nya kod i samma container (oftast en <div> eller <ul>) som innehåller de här befintliga ikonerna.
3. Klistra in 1 av kodalternativen nedan där du vill att länken ska visas (t.ex. precis före varukorgsikonen).

Alternativ A: ikonlänk

Använd den här koden om du har slutfört steg 1 och vill visa en hjärtikon, förutsatt att den heter icon-heart.svg i vårt exempel:

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

Alternativ B: Textlänk eller knapp

Använd den här koden om du föredrar en textlänk eller en knapp. Du behöver inte ladda upp några tillgångar för detta.

För en enkel textlänk:

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

För en knapp:

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

1. Klicka på Spara.

Tips: matcha din temas stil Om ditt tema använder en specifik CSS-klass för ikoner i sidhuvudet (t.ex. header__icon eller icon-link) kan du ersätta det inline style= -attributet i koden ovan med den klassen (t.ex. class="header__icon"). Förhandsgranska resultatet för att kontrollera att mellanrummet och hovringseffekterna matchar dina andra sidhuvudlänkar.

Steg 3: testa och publicera dina ändringar

När du har sparat koden ska du förhandsgranska det redigerade temat och testa länken innan du publicerar det.

1. I Shopify går du till Webbutik > Teman. Bredvid det duplicerade temat som du redigerade klickar du på trepunktsmenyn (...) > Förhandsgranska.
2. Kontrollera sidhuvudet på dator och mobil. Du ska se ikonen, textlänken eller knappen som du lade till. Klicka på den och bekräfta att den öppnar dina sparade favoriter i Klaviyo Customer Hub.
3. När du är redo att göra alla ändringar i det duplicerade temat synliga för kunderna går du tillbaka till Online Store > Themes. I Utkastteman hittar du den redigerade dubbletten och klickar på Publicera.
4. Öppna din livebutik och testa länken Favoriter igen.

Felsökning

Om länken inte visas, verkar felaktig eller inte öppnar Klaviyo Customer Hub:

• Ikonen visas inte: Kontrollera att filen ligger i mappen assets, är en SVG som är mindre än 15 KB och heter exakt icon-heart.svg så att den matchar kodsnippet. Filnamnet är skiftlägeskänsligt.
• Ikonen är feljusterad: Du kan behöva justera värdena height och width i kodsnippets attribut style så att de matchar höjden på ditt temas navigeringsfält.
• Ändringar visas inte: Bekräfta att du förhandsgranskar temat som du redigerade. Öppna Förhandsgranskning igen från Shopify. Att spara ett duplicerat tema uppdaterar inte din livebutik; publicera det efter testning.
• Länken öppnar inte Klaviyo Customer Hub: Bekräfta att Klaviyo Customer Hub är konfigurerat och att Klaviyo-appinbäddningen är aktiverad i temat som du visar. Kontrollera att länken fortfarande använder #k-hub/favorites.