Så här konfigurerar du Klaviyo Customer Hub med Headless Shopify

Förväntad lästid: 8 minut(er)

Uppdaterad 2 okt. 2025 12:56 EST

Anslut Klaviyo Customer Hub till din huvudlösa Shopify-butik. Aktivera inloggning, ytwidget (favoriter, vanliga frågor) och aktivera Aktiv/Recently Viewed-produktupplevelser för att öka engagemanget och konverteringen.

Du kommer att lära dig

Du kommer att ansluta Klaviyo Customer Hub till en headless Shopify butik, välja en inloggningsmetod och publicera hubben så att kunderna kan komma åt den på hela webbplatsen.

Klaviyo Customer Hub stöder för närvarande Shopify butiksfönster, inklusive Shopify Headless. Ytterligare e-handelsplattform support är abonnemang.

För feedback om Klaviyo Customer Hub-funktionalitet, skicka e-post till customerhub@klaviyo.com.

Innan du börjar

Förkunskapskrav

⚠️ Obs: Du måste kontakta din representant, CSM eller Klaviyo support för att aktivera Headless Shopify support för din Klaviyo Konto innan du fortsätter så att du får tillgång till de nödvändiga konfigurationerna. Hur du kontaktar support

En headless Shopify storefront med tillgång till Storefront API (Public access token / Storefront API public key i Shopify's Headless Administratör).
Ditt Klaviyo-företags-ID (används av JavaScript-laddaren på webbplatsen).
Beslut om shopper login: Shopify Kundkonto API eller Klaviyo Engångslösenord (OTP).
1. Om du använder ett befintligt Konto ska du ha inloggning, utloggning och (valfritt) rutterna Hantera Konto och Hantera adresser klara för din butik.
Möjlighet att redigera din butikskod och distribuera ändringar.
Vem kan ställa in detta: Du behöver en Konto-roll som kan redigera Klaviyo Customer Hub-inställningar och publicera widget (Ägare, Administratör eller en anpassad roll som har skrivbehörighet till Content och API-nyckel).

Översikt

Klaviyo Customer Hub är en webbplatsöverbyggnad som ger kunderna snabbare tillgång till Konto-åtgärder och användbara shoppingverktyg. För huvudlösa Shopify ansluter du Klaviyo's onsite-skript, väljer en inloggningsmetod (Customer Konto API eller Klaviyo OTP) och lägger eventuellt till:

Aktiv Product: visar den produkt som en kund tittar på i hubben.
Recently Viewed: lista senast visade produkter med Klaviyo's spårning.
Widget för favoriter och vanliga frågor: återges på PDP:er och i hubben.

Använd Klaviyo Customer Hub när du vill ha ett assistanslager på sidan som driver produktupptäckt och snabbare utcheckning, vilket förbättrar konvertering och livstidsvärde.

Konfiguration

1 - Konfigurera inställningar för Klaviyo Customer Hub

Följ först Komma igång med Klaviyo Customer Hub och slutför onboarding-guiden, precis som med alla andra inställningar. När detta är klart går du till Klaviyo Customer Hub > Inställningar. Du kommer att se konfigurationsavsnittet Headless Shopify.

Klistra in din offentliga nyckel för Storefront API från Shopify:s Headless Administratör (Public access token).

Under Shopper login väljer du Shopify Customer Konto API (rekommenderas så att alla dina appar i butiken kan dela Shopify:s inloggning) eller Klaviyo One Time Password (OTP, fungerar bara med Klaviyo och loggar inte in kunderna i några andra appar).

Om du väljer Shopify Customer Konto API anger du även inloggning, utloggning och valfria Hantera konto/Hanteraadresser-vägar för din butik (används för omdirigeringar mellan hubben och din webbplats).

Publicera synlighet: sätt Klaviyo Customer Hub till Live.

2 - Ladda Klaviyo Customer Hub JavaScript (instruktioner för utvecklare)

Tips: Om du redan kör Klaviyo onsite-funktioner kan du ha en laddare på plats. Bekräfta innan du lägger till ett andra skript.

Skapa /public/customerHub.js (eller motsvarande) med följande laddare (ersätt COMPANY_ID med din offentliga Klaviyo API-nyckel, även känd som ditt företags-ID):

// customerHub.js
// TODO: Konfiguration
const COMPANY_ID = '';
const script = document.createElement('script');
script.src = `https://static.Klaviyo.com/onsite/js/${COMPANY_ID}/Klaviyo.js`;
script.async = true;
script.onload = () => { console.log('Klaviyo JS script loaded successfully'); };
script.onerror = () => { console.error('Failed to load Klaviyo JS script'); };
document.body.appendChild(script);

Onsite-skriptet laddas på varje sida. Leta efter konsolmeddelandet: "Klaviyo JS-skriptet laddades framgångsrikt." I din root layout (t.ex. root.tsx), inkludera lastaren:

// root.tsx
return (
  <html>
    <body>
      < script src="/customerHub.js" defer></script>
    </body>
  </html>
)

Efter detta steg kommer window.customerHubApi blir tillgänglig på sidor där hubben körs.

3 - Visa Aktiv-produkten i Klaviyo Customer Hub

Lägg till hydratanropet på din produktdetaljsida (PDP) så att den aktuella produkten visas i navet:

<!-- products.tsx -->
< script type="text/javascript"> 
 (function() {
 function waitForCustomerHubApi() {
 return new Promise((resolve) => {
 const check = () => {
 if (window.customerHubApi && window.customerHubApi.hydrateProduct) {
            resolve();
          } else {
            requestAnimationFrame(check);
          }
        };
 check();
 });
 }
 waitForCustomerHubApi().then() => {
      window.customerHubApi.hydrateProduct("your-product-handle");
    });
 })();
</script>

Hubben ska nu visa ettytterligare produktkort för den PDP som kunden tittar på i fliken "Chat" om du har aktiverat det.

4 - Aktivera nyligen visade produkter i Klaviyo Customer Hub

Implementera Viewed Product spårning så att hubben kan fylla i nyligen visade artiklar och du kan använda mättalen på andra ställen i Klaviyo. Följande spårningssnuttar kan också läggas till direkt i din butik, instruktioner finns här i vår Klaviyo Developers-dokumentation: Integrera en e-handelsplattform utan en färdigbyggd Klaviyo integrationer.

5 - Möjliggör övertagande av Kontolänk

För att Klaviyo:s Klaviyo Customer Hub ska öppnas genom att klicka på Kontoikonen i din butikshuvud, måste du redan ha en befintlig a-etikett som refererar till en länk med /Konto (i vilket fall vi automatiskt kommer att ersätta den åt dig). Du kan också manuellt definiera ikonlänken så att den pekar på #k-hub för att öppna lådan.

6 - Ställ in Klaviyo Customer Hub med Customer Konto API autentisering (rekommenderas)

För att kunna använda din befintliga butiksfronts kundkonto och autentiseringsinställning kommer Klaviyo Customer Hub att kräva att du lägger till en ny API -väg till din butiksfront som hanterar säkert att skicka en inloggad shoppers access token till våra tjänster. Det viktiga är att den nya API rutten är namngiven och kan nås med '/API/authenticateCustomerHub'.

Obs: följande kodsnippet-exempel är för Shopify's Hydrogen-ramverk, mer anpassade skyltfönster kan kräva ytterligare lösningar, men det allmänna tillvägagångssättet kommer att beskrivas här.

// ./app/routes/API.authenticateCustomerHub.js
// TODO: Konfiguration
const COMPANY_ID = '';
export async function action({context}) {
 // Hämta Customer Konto API Client från din butiksfronts kontext
 const {customerAccount} = context;
 try {
 // Hämta åtkomsttoken för den aktuella kunden
 const accessToken = await customerAccount.getAccessToken();
    if (!accessToken) {
 return new Response(JSON.stringify({message: 'User not logged in'}), {
        status: 200,
      });
 }
   // Skicka access token till Klaviyo Customer Hub API
    const response = await fetch(
 'https://atlas-app.services.klaviyo.com/api/onsite/headless-shopify-login',
      {
 method: 'POST',
 headers: {
          'Content-Type': 'application/json',
        },
 body: JSON.stringify({
          access_token: accessToken,
          company_id: COMPANY_ID,
        }),
 },
 );
 const responseData = await response.text();
    // Returnera det faktiska svaret från Klaviyo Customer Hub med samma statuskod
 return new Response(responseData, {
 status: response.status,
      Headers: {
        'Content-Type':
          response.headers.get('content-type') || 'application/json',
      },
 });
 } catch (error) {
 return new Response(null, {status: 500});
 }
}

När detta är konfigurerat, liksom de butiksvägar som definieras i Klaviyo's inställningar, kommer Klaviyo Customer Hub att kunna länka till din befintliga autentiseringskonfiguration och ge en sömlös ingångspunkt till din befintliga kundkonto.

7 - Lägg till favoriter widget (rekommenderas)

Både favoriter och vanliga frågor kommer att fungera i Klaviyo Customer Hub-lådan. Du kan dock lägga till dessa widgetar även på PDP:er för ytterligare engagemang.

Att lägga till en ingångspunkt för favoriter på PDP:er och inuti hubben:

// products.tsx
// Exempel på identifierare:
// id: gid://Shopify/Product/12345
// data-product-id: 12345
const gid = "gid://Shopify/Product/12345";
const productId = gid.delning('/').pop();

return (
 < div
 className="kl-hub-favorites-slot"
 data-product-id={productId}
  />
 )

Shoppare kan nu klicka på Lägg till i favoriter på PDP:er; varan visas i hubbens favoritobjekt.

8 - Lägg till FAQ-block (rekommenderas)

På samma sätt som att lägga till favoriter är det lika enkelt att lägga till FAQ-block som att lägga till en div på din produktsida med dess produkt-ID som skickas in för att göra FAQ som du kan redigera och designa i Klaviyo.

Lägg till ett produktspecifikt FAQ-block som du designar i Klaviyo:

// products.tsx
// Exempel:
const gid = "gid://Shopify/Product/12345";
const productId = gid.delning('/').pop();

return (
 < div className="klaviyo-faqs-slot" data-product-id={productId} />
 )

FAQ-chips/knappar ska nu återges på PDP:er om de är inställda och kan redigeras i Klaviyo

Bästa praxis

Publicera till produktion först efter verifiering - håll staging dolt tills QA är slutfört; ställ sedan in Live för att exponera hubben. Effekt: färre supportfrågor, snabbare tid till värde.
Se till att Aktiv Product alltid finns med på PDP:erna - det gör att produktkontexten syns i hubben och uppmuntrar till att lägga till i varukorgen. Påverkan: konverteringsfrekvens, återköpsfrekvens.
Implement Viewed Product spårning early - fyller i Recently viewed och låser upp bläddringsbaserade flöde. Effekt: engagemang och intäkter från återställning av bläddring.
Lägg till favoriter - skapar en sparåtgärd med låg friktion och en bestående kortlista. Effekt: återkommande besök, lägg till i varukorgen.
Använd vanliga frågor för invändningar - svara på frågor om frakt, material eller returer inline för att minska bortfallet. Effekt: konverteringsfrekvens.
Föredra autentisering på serversidan med kundkonto API när det är tillgängligt - förbättrar kontinuiteten för inloggade kunder. Påverkan: upplevd kvalitet, support avböjning.

Mätning av framgång

Var du kan se resultat: Använd Analytics > mättal för att övervaka Visad produktaktivitet och nedströms flöde/kampanjprestanda. Använd din e-handel inkomst instrumentpanel för att spåra konvertering och genomsnittligt beställningsvärde förändringar efter att du aktiverat Klaviyo Customer Hub. Viktiga mättal att titta på: konverteringsfrekvens från PDP, add-to-cart rate, sessioner med Hub opens (om instrumenterade), intäkt per mottagare (återköpsfrekvens) och browse-driven inkomst kopplad till Viewed Product events. Checklista för snabba lösningar: Låg Nyligen visad aktivitet? Kontrollera att spårningsavsnittet Viewed Product aktiveras och att händelserna tillskrivs profil. Låg add-to-cart från Hub? Se till att Aktiv Product hydration körs på varje PDP och att variation/priser är korrekta. Några favoriter lägger till? Flytta Favorites-platsen nära PDP CTA:er och bekräfta att data-product-id matchar produkten.

Felsökning

Symptom: Klaviyo Customer Hub visas inte på webbplatsen.

Trolig orsak: Skriptet laddas inte eller navet är dolt.

Åtgärd: Bekräfta att customerHub.js laddas (kontrollera konsolen), att företags-ID:t är inställt och att Klaviyo Customer Hub är synligt i Klaviyo Customer Hub > Inställningar.

Symptom: Konsolen visar "Misslyckades med att ladda Klaviyo JS-skript."

Trolig orsak: Felaktig skript-URL eller saknat företags-ID.

Åtgärda: Verifiera https://static.Klaviyo.com/onsite/js/<COMPANY_ID>/Klaviyo.js och att COMPANY_ID är ifyllt.

Symptom: Aktiv produktkort visas inte i navet på PDP:er.

Trolig orsak: hydratProdukt ej anropad eller fel produkthantering.

Åtgärdat: Se till att vänteslingan körs och anropa window.customerHubApi.hydrateProduct("<handle>" ) med rätt produkthandtag.

Symptom: Avsnittet med nyligen visade bilder är tomt.

Trolig orsak: Visad Produktspårning ej implementerad.

Åtgärdat: Lägg till utdraget Viewed Product spårning från utvecklarguiden och verifiera händelser i Klaviyo.

Symptom: Favoriter eller FAQ-widget renderas inte på PDP.

Trolig orsak: Saknad behållare eller fel attribut.

Åtgärd: Lägg till <div class="kl-hub-favorites-slot" data-product-id="..."> och/eller <div class="klaviyo-faqs-slot" data-product-id="..."> med rätt produkt-ID.

Symptom: Om du klickar på Konto-ikonen öppnas inte hubben.

Trolig orsak: Huvudlänken pekar inte till /Konto eller #k-hub.

Åtgärd: Se till att Konto-ankaret använder /Konto (automatisk övertagning) eller set href="#k-hub".

Symptom: Shoppare identifieras inte när de loggar in i hubben.

Trolig orsak: Saknad /API/authenticateCustomerHub-väg eller misslyckad API -begäran.

Åtgärd: Implementera Hydrogen-exemplet (eller motsvarande i ditt ramverk), skicka access_token och company_id till Klaviyo:s inloggning slutpunkt och returnera svaret.

Vanliga frågor

Q: Måste jag använda Shopify Customer Konto API för att logga in?

A: Nej. Du kan använda Klaviyo One Time Password (OTP) istället. Om du redan använder Shopify Konto kan du ansluta dig via Customer Konto API för en sömlös upplevelse.

F: Vilka skyltfönstervägar behöver jag tillhandahålla?

S: Om du använder ditt befintliga Konto ska du ange inloggnings- och utloggningsvägar; Manage Konto och Manage-adresser är valfria för djupare länkning.

Q: Var hittar jag den publika nyckeln till Storefront API?

A: I Shopify's Headless Administratör under Storefront API > Public access token (även kallad Storefront API public key).

Q: Kan Klaviyo Customer Hub ta över min Konto-ikon?

A: Ja. Om din header's Konto-länk använder /Konto kan Klaviyo Customer Hub öppnas automatiskt; du kan också peka den till #k-hub.

F: Krävs Shopify Hydrogen?

A: Nej. I autentiseringsexemplet används Hydrogen, men alla ramverk kan implementera en serverväg på /API/authenticateCustomerHub som skickar access token och company_id till Klaviyo.

F: Kan favoriter och vanliga frågor finnas på PDP:er och i hubben?

A: Ja. Lägg till respektive container divs på PDP:er; de kommer också att dyka upp i Hub-lådan.

Var den här artikeln till hjälp?

Använd endast detta formulär för feedback på artiklar. Lär dig hur du kontaktar support.

Utforska mer från Klaviyo

Community

Få kontakt med kollegor, partner och Klaviyo-experter för att hitta inspiration, dela insikter och få svar på alla dina frågor.

Besök communityn

Partners

Anlita en Klaviyo-certifierad expert för att hjälpa dig med en specifik uppgift eller för löpande marknadsföringshantering.

Anlita en partner

Support

Få tillgång till support via ditt konto.

E-postsupport (gratis provperiod och betalkonton) Tillgänglig dygnet runt, alla dagar i veckan

Chatt/virtuell hjälp
Tillgängligheten varierar beroende på plats och abonnemangstyp

Logga in