Så bygger du en enproduktsbutik ovanpå Shopify med AI

Vad det här faktiskt bygger, och vad det inte gör

Produkter för sömn och återhämtning — munplåster, tyngdtäcken, magnesium, sovmasker — delar en kommersiell form. En huvudprodukt, ett påstående som behöver förklaras, en skeptisk köpare, och ett beslut som fattas på under en minut. Den formen belönar en fokuserad sida och straffar ett allmänt kategoritema med elva menyval.

Så det som är värt att bygga är inte en butik. Det är en front: en sida som argumenterar för en produkt och sedan kliver undan. Och avgörande: det är en front mot en Shopify-butik du redan har. NorthernGo hanterar inte betalningar, räknar inte moms, håller inget lager och skickar ingenting. Shopify gör allt det, och appen lämnar över köparen vid rätt ögonblick.

Den arbetsdelningen är hela skälet till att det här är värt att göra. Du behåller Shopifys betalningshantering, orderadministration och momslogik — de delar som är genuint svåra och genuint reglerade — och byter bara ut det Shopify-teman är sämst på, nämligen en sida byggd för att sälja en sak till en skeptisk person.

Två ärliga förutsättningar innan du börjar. Shopify-integrationen kräver Pro, för 299 SEK / $29 i månaden. Och du behöver en befintlig Shopify-butik med en åtkomsttoken för Storefront API:t; det här är inte en väg att sälja utan en sådan.

Steg 1: Koppla butiken till projektet

Spara projektet först. Integrationen hänger på ett projekt-id, och ett osparat projekt har inget id att hänga på — API:t svarar att du måste spara projektet innan du kan hämta Shopify-data, och ingenting fungerar.

Öppna sedan Mina projekt, välj Mer på projektkortet och klicka Shopify. Två fält:

• Butiksdomänen, i formen din-butik.myshopify.com. Klistra in den utan https://; fältet rensar bort protokollet ändå, men det är en sak mindre att fundera över.
• En Storefront Token. Det är en åtkomsttoken för Storefront API:t från din Shopify-administration, inte en nyckel till Admin API:t och inte ditt kontolösenord.

Tryck Spara Shopify. Domänen visas därefter på projektkortet, vilket är den snabbaste bekräftelsen på att den sparades.

Steg 2: Be AI:n bygga sidan mot det verkliga API:t

Nu beskriver du sidan i prompten. Var specifik om produkten och den invändning du besvarar, eftersom "en hälsobutik" ger dig en allmän hälsobutik.

Den enda tekniska instruktionen som är värd att skriva ut är vilka anrop som ska användas:

Bygg en landningssida för en enda produkt: munplåster. Hämta produkterna med window.NorthernGoShopify.getProducts() och visa den första stort, med priset ur produktens eget prisfält. Lägg till en antalsväljare och en knapp som anropar window.NorthernGoShopify.checkout() med den varianten. Under sidbrytet: tre fördelsblock, ett kort avsnitt om huruvida det är säkert att sova med, och en frågedel.

De tre agenterna sköter resten. Arkitekten planerar strukturen, Byggaren skriver den, och på Premium och Pro granskar Kritikern resultatet innan du ser det. Ut kommer ett enda HTML-dokument som använder Tailwind från ett CDN, med SDK:n injicerad i en skripttagg längst ned — inget byggsteg, ingenting att kompilera.

Steg 3: Förstå produktformen du får tillbaka

getProducts() returnerar en array. Servern plattar ut Shopifys GraphQL-svar till något enkelt, och att känna till de exakta fälten sparar dig gissningar:

const products = await window.NorthernGoShopify.getProducts();
// [{
//   id, title, description, handle,
//   imageUrl,          // bara första bilden, eller null
//   price,             // sträng, t.ex. "249.00"
//   currency,          // t.ex. "SEK"
//   variantId          // krävs för kassan
// }]

Tre saker med den formen betyder mer än de ser ut att göra.

Den returnerar de 20 första produkterna. Inte de 20 första i en sidindelad mängd du kan bläddra igenom — 20 är vad frågan ber Shopify om, och det finns ingen sidparameter. För en enproduktsbutik är det ointressant. För ett sortiment på 200 artiklar är det ett hårt tak.

Varje produkt bär en variant och en bild. Har din produkt tre storlekar får du tillbaka ett variantId, och det är den variant Shopify råkar returnera först. En storleks- eller färgväljare går inte att bygga ur den datan — det är den viktigaste begränsningen på den här sidan.

price är en sträng. Räknar du på den får du sammanfogning i stället för multiplikation. Kör parseFloat(product.price) innan du multiplicerar med antalet.

Steg 4: Skicka varukorgen till Shopifys kassa

Kassaanropet tar en array med variant-id och antal:

async function buy(product, quantity) {
  try {
    await window.NorthernGoShopify.checkout([
      { variantId: product.variantId, quantity: quantity }
    ]);
  } catch (err) {
    console.error(err);
    showMessage('Kunde inte öppna kassan. Försök igen.');
  }
}

Vid lyckat anrop returneras ingen data — webbläsaren skickas vidare till Shopifys egen kassa. Allt efter det klicket är Shopifys: kort- och plånboksbetalning, moms, fraktval, orderbekräftelsen och ordern i din administration.

Det är värt att säga rakt ut, eftersom det lyfter bort en stor mängd regelarbete från din sida. Du lagrar inga kortuppgifter och du ansvarar inte för momsberäkningen. Vill du hellre sälja helt utan Shopify — en digital produkt, en prenumeration — är det en Stripe-integration i stället, och en annan uppsättning.

Anropet kastar vid fel, till skillnad från AI-anropen i SDK:n, så try/catch runt det gör verkligt arbete. Det vanligaste kastade felet är en tom eller ogiltig varukorg.

Steg 5: Testa i den publicerade appen, inte i förhandsgranskningen

Den här kostar folk en eftermiddag. Shopify-anrop är medvetet blockerade i editorns förhandsgranskning. Både getProducts() och checkout() svarar med meddelandet att funktionen inte fungerar i förhandsgranskningen och att du behöver spara projektet och öppna appen via dess ?app=-länk.

Det är inte ett fel och det är inte dina nycklar. Förhandsgranskningen har ingen projektidentitet att slå upp nycklar med, så bryggan nekar i stället för att fela otydligt. Samma sak gäller e-postutskick, webhooks och Stripe-kassan.

För att testa butiken: publicera den och öppna den riktiga adressen. På Pro är det din egen domän om du kopplat en, annars en adress på <subdomän>.northerngo.com, annars reservadressen https://northerngo.com/?app=<projektId>. För allt du annonserar mot bör du koppla en egen domän — ett köpflöde som börjar på någon annans domän konverterar sämre, och skälet är inte subtilt.

Vad det kostar

Pro kostar 299 SEK / $29 i månaden och innehåller 50 molngenereringar, Shopify-integrationen, egna domäner, webhooks och automatiska SEO-granskningar. Shopifys egen prenumeration och transaktionsavgifter är separata och oförändrade — det här byter ut ditt tema, inte din Shopify-plan.

Att generera lokalt på ditt eget grafikkort är obegränsat på samtliga planer, vilket är genuint användbart medan du finslipar text och layout: att bygga om samma sida elva gånger för att få huvudsektionen rätt behöver inte dra molngenereringar.

Begränsningar

• Kräver Pro. Shopify, egna domäner och webhooks ligger alla bakom Pro-planen. På Gratis och Premium syns menyvalet men är låst.
• Inga produktvarianter. En variant och en bild per produkt. Storlekar, färger och paket går inte att välja i appen. Behöver din produkt en storleksväljare har den här integrationen fel form för den.
• Tjugo produkter, ingen sidindelning. Utmärkt för en produkt eller ett litet kurerat sortiment. Ingen front för ett helt sortiment.
• Ingen lagerstatus. Svaret bär inget tillgänglighetsfält, så sidan kan inte visa "3 kvar" eller gömma en slutsåld produkt. Shopify nekar köpet i kassan i stället, vilket är ett sämre ställe för köparen att upptäcka det.
• Ingen varukorg som följer mellan enheter. En varukorg som bara finns i JavaScript försvinner vid omladdning om du inte sparar den själv med window.NorthernGoDB.save(). Shopifys varukorg existerar först när kassan skapats.
• Ingen orderhistorik i appen. Ordrarna bor i Shopify. Appen kan inte läsa tillbaka dem.
• Semantisk HTML är ingen garanti för placering. Den genererade koden är ett rent HTML-dokument, vilket hjälper sökrobotar och språkmodeller att tolka sidan. Det gör inte att sidan rankar. Det kommer från produkten, texten och länkarna som pekar dit. Verktyg som utlovar automatisk synlighet i sök enbart ur ren kod överdriver en verklig men liten fördel.

Felsökning

"Du måste spara projektet innan du kan hämta Shopify-data." Projektet har inget id än. Spara det från arbetsytan och koppla Shopify igen.

"Det saknas giltiga Shopify-nycklar för det här projektet." Domänen eller tokenen sparades inte, eller ett av fälten är tomt. Öppna Mina projekt → Mer → Shopify igen och fyll i båda fälten; sparningen kräver båda.

Produkterna kommer tillbaka tomma utan felmeddelande. Nästan alltid ett tokenproblem. Shopify svarar med statuskod 200 och en errors-array vid ogiltig token, vilket dyker upp som ett kastat fel med Shopifys egen text. Kontrollera att tokenen är en Storefront API-token med läsrättighet på produkter, och att produkterna är publicerade till den försäljningskanal tokenen hör till. En opublicerad produkt är osynlig för Storefront API:t även om den ser rätt ut i administrationen.

Ingenting händer i förhandsgranskningen. Förväntat. Shopify-anrop är blockerade där. Publicera appen och testa på dess riktiga adress.

Kassan öppnas med fel variant. Du skickar det enda variantId API:t returnerade, vilket är produktens första variant. Det finns inget sätt att välja en annan ur den datan.

Priset visas som "249.001" eller liknande. price är en sträng och du multiplicerade den med antalet genom sammanfogning. Kör parseFloat() på den först.