Så här lägger du till en favoritlänk (ikon, text eller knapp) i ditt Shopify-huvud

Genom att lägga till en specifik "Favorites" ikon i webbplatsens navigeringsfält ("header") skapar du mer engagemang genom att minska friktionen för dina kunder att hitta sina favoriter inom Klaviyo Customer Hub. Genom att ge kunderna en särskild startpunkt för sina sparade varor uppmuntrar du dem att bygga större korgar och återvända till din butik oftare.

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 infogar den nödvändiga koden i webbplatsens rubrik med hjälp av Shopifys Liquid-kod.

Den här guiden beskriver hur du laddar upp en hjärtikon till dina tematillgångar och infogar kodlänken i webbplatsens rubrik med hjälp av Shopifys Liquid-kod.

Observera Denna process innebär att du redigerar din Shopify-temakod. Om du inte är 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 implementeringar av anpassad kod.

Innan du börjar

Vi rekommenderar starkt att du duplicerar ditt live-tema innan du gör ändringar. På så sätt kan du testa den nya ikonen i en säker miljö utan att det påverkar din butik.

1. I Shopify går du till Online Store > Themes.

2. Klicka på menyn med tre prickar (...) bredvid ditt live-tema.

3. Välj Duplicera.

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

Först laddar du upp ikonfilen som ska fungera som knapp. Att använda en SVG-fil är bäst eftersom den skalas till alla skärmstorlekar utan att förlora kvalitet och kan ärva ditt temas färger.

1. Du måste 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 pixelering. Du kan ladda ner en standardversion (MIT-licensierad) här: Heroicons hjärta.svg.

2. I din Shopify-administratör navigerar du till Online Store > Themes.

3. Hitta ditt tema och klicka på menyn med tre prickar (...) > Redigera kod.

4. I den vänstra sidofältet bläddrar du ner till mappen Assets och klickar på Add a new asset.

5. Ladda upp din ikonfil.

Steg 2: Infoga länken till rubriken (övre navigeringsfältet)

Lägg sedan till kodsnippet som visar ikonen och länkar den till Klaviyo Customer Hub.

1. I temats kodredigerare letar du upp filen som styr ditt sidhuvud.

   • Teman för Online Store 2.0 (t.ex. Dawn): Sök efter sections/header.liquid.

   • Vintage-teman: Sök efter snippets/header-icons.liquid eller header-bar. liquid.

2. Hitta insättningspunkten: Tryck Ctrl+F (eller Cmd+F på Mac) och sök efter ordet cart eller Konto. Du vill klistra in din nya kod i samma behållare (vanligtvis en <div> eller <ul>) som innehåller de befintliga ikonerna.

3. Klistra in ett av kodalternativen under den plats där du vill att länken ska visas (t.ex. precis före varukorgsikonen).

<a href="#k-hub/favoriter"
 id="favoriter-ikon-bubbla"
 aria-label="Öppna favoriter"
 title="Favoriter"
 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/favoriter" class="header__menu-item header__menu-item--list" style="text-decoration: none;"> 
 Favoriter
</a>

<a href="#k-hub/favoriter" class="button button--primary"> 
 Favoriter
</a>

Tips: Anpassa temats stil Om ditt tema använder en specifik CSS-klass för rubrikikoner (t.ex. rubrik__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__ ikon " ). Detta säkerställer att avståndet och svävningseffekterna matchar dina andra knappar perfekt.

Utfall

När du har sparat butiken öppnar du den i ett nytt inkognito/privat fönster för att kringgå webbläsarens cachning. Du bör se hjärtikonen i navigeringsfältet. Genom att klicka på den här ikonen öppnas nu fliken Favoriter i Klaviyo Customer Hub.

Felsökning

Om ikonen inte visas eller ser felaktig ut:

• Ikonen är en trasig bild: Se till att du laddade upp filen till mappen Assets och gav den exakt namnet icon-heart.svg. Filnamnen är skiftlägeskänsliga.

• Ikonen är feljusterad: Du kan behöva justera värdena för höjd och bredd i kodsnippets style-attribut för att matcha navigeringsfältets höjd i ditt tema.

• Ändringar visas inte: Shopify teman cache aggressivt. Prova att förhandsgranska temat i ett inkognitofönster eller lägg till ?preview_theme_id= till din URL om du arbetar med ett utkast till tema.