# Bygg en webbutik med AI: en liten katalog, inte en kopia av Shopify

> Bygg en webbutik med AI i NorthernGo: Pro-butiksfront mot Shopify, eller en liten katalog du lagrar själv. Stripe i kassan. Ärliga gränser, inte en hel butik.

Source: https://northerngo.com/sv/guider/bygga-webbshop-med-ai/
Language: sv
Updated: 2026-08-16

---
**NorthernGo ersätter inte Shopify. På Pro kopplar du en Shopify-butik du redan äger och bygger en butiksfront med window.NorthernGoShopify.getProducts() och .checkout(). Utan Shopify lagrar du en liten katalog i window.NorthernGoDB och skickar köparen till Stripe. Båda vägarna är en fokuserad sida plus en överlämning. Ingen av dem är en hel butik med moms, lager och leverans.**

### Säg det tysta först

En [AI-appbyggare](/sv/ordlista/ai-app-builder/) ritar gärna en butik: ett rutnät med kort, en varukorgsikon, en knapp som står Till kassan. Den teckningen är inte en butik. En butik räknar moms, håller lager, tar kortuppgifter utan att du ser dem, mejlar ett kvitto och säger till ett lager vad som ska packas. NorthernGo gör inget av det som produkt.

Två ärliga vägar finns.

**Väg A, bara Pro.** Du har redan en Shopify-butik. Du kopplar den till projektet. Den genererade appen är en front: `window.NorthernGoShopify.getProducts()` fyller rutnätet, `window.NorthernGoShopify.checkout([{ variantId, quantity }])` skickar köparen till Shopifys egen kassa. Shopify behåller betalning, moms, rabatter, frakt och orderadmin. Du bytte temat, inte butiken.

**Väg B, varje plan som kan spara data.** Du har en handfull produkter — ett tryck, en kurs, tre burkar honung från en gård utanför Lycksele — och du lagrar dem själv med `window.NorthernGoDB.save()`. Varukorgen är en array i webbläsaren. Kassan är [ditt eget Stripe-konto](/sv/guider/integrate-stripe-payments-saas/), på Pro, via Stripe-guiden. Du ansvarar för lager, moms, kvitton och frakt. Appen är en katalog plus en överlämning till betalning.

Om någon lovade dig en full Shopify-ersättare ur ett stycke text lovade de något den här plattformen inte säljer. Läs vidare bara om en av de två vägarna faktiskt är det du behöver.

### Steg 1: Välj formen innan du promptar

Skriv begränsningen i första meddelandet. Modellen faller tillbaka på en allmän klädbutik med tolv menyval och en storlekssväljare den inte kan backa upp med data.

Välj en:

> Jag har redan en Shopify-butik. Bygg en butiksfront som hämtar produkter med window.NorthernGoShopify.getProducts() och går till kassan med window.NorthernGoShopify.checkout(). En samlingssida, en produktsida, en varukorg. Ingen påhittad storlekssväljare. Använd prisfältet från varje produkt.

eller:

> Jag har inte Shopify. Bygg en liten katalog med högst tolv produkter som jag lagrar med window.NorthernGoDB. Varje produkt har id, namn, prisSek, beskrivning, bildUrl. Varukorgen är en array i minnet. Kassaknappen startar Stripe — hitta inte på kortfält.

De två promptarna ger olika appar. Att blanda dem — "hämta från Shopify och spara också produkter i databasen och ta också kort i ett formulär" — är så du får en sida som låtsas ta betalt och aldrig gör det.

Molngenerering körs på Gemini: fem i månaden på Gratis, 25 på Premium (179 SEK / $19), 50 på Pro (299 SEK / $29). Lokal WebGPU (Qwen 3.5 4B, eller större Pro-modeller) eller Ollama är obegränsad på alla planer. Första stommen till en butik är ett rimligt molnutlägg. Att putsa knapptexter är det inte.

### Steg 2: Har du Shopify, koppla den på Pro

Spara projektet först. Kopplingen nycklas på ett projekt-id.

Sedan Mina projekt, Mer på projektkortet, Shopify. Två fält: butiksdomänen som `din-butik.myshopify.com`, och en Storefront API-token från Shopify-admin — inte en Admin API-nyckel, inte ditt lösenord. Spara Shopify. Domänen på kortet är bekräftelsen att det landade.

Det här är Pro för 299 SEK / $29. Gratis och Premium hämtar inte produkter. Det finns ingen Shopify-brytare på prov.

Be byggaren anropa de riktiga metoderna, inte hitta på en produktarray:

```javascript
async function loadCatalogue() {
  if (!window.NorthernGoShopify || typeof window.NorthernGoShopify.getProducts !== 'function') {
    showMessage('Shopify är inte kopplad på det här projektet.');
    return [];
  }
  const products = await window.NorthernGoShopify.getProducts();
  return products || [];
}

function checkoutCart(cart) {
  window.NorthernGoShopify.checkout(cart.map(line => ({
    variantId: line.variantId,
    quantity: line.quantity
  })));
}
```

Känn taket innan du annonserar en katalog. Anropet returnerar de första 20 produkterna, en bild vardera, en variant vardera. En butik med 200 produkter och tre storlekar är fel form. En landsida för en produkt, eller en kort samling, är rätt. Shopify äger resten av katalogen bakom sin egen kassa.

### Steg 3: Har du inte Shopify, lagra en liten katalog själv

Tolv produkter är en butik en människa kan kurera. Tvåhundra är ett jobb för en riktig handelsplattform.

```javascript
async function saveProduct(product) {
  await window.NorthernGoDB.save('products', {
    id: product.id || crypto.randomUUID(),
    name: product.name,
    priceSek: Number(product.priceSek) || 0,
    description: product.description || '',
    imageUrl: product.imageUrl || '',
    active: product.active !== false
  });
}

async function loadProducts() {
  const all = (await window.NorthernGoDB.get('products')) || [];
  return all.filter(row => row.active !== false);
}
```

[Databasen är redan inkopplad](/sv/guider/connect-supabase/). Inget schema. `prisSek` måste vara ett tal; modellen klistrar ihop strängar till "199199" första gången någon köper två.

Mata katalogen från en adminvy du gömmer bakom inloggning, inte från en loop som körs vid varje besök. En loop vid laddning dubblerar honungsburkarna varje gång en köpare uppdaterar.

Bilder är URL:er du hostar någon annanstans, eller filer du lägger på egen hosting efter en ZIP-export. Det finns inget produktbildsnät i byggaren. En trasig bild är en trasig produktsida. Kontrollera dem.

Inloggning på butiksfronten är valfri. Inloggning på adminvyn som kan spara produkter är det inte. En öppen `save('products')` på en publik URL är så en främling lägger till en produkt uppkallad efter sig själv. Lås skrivningar bakom `getToken()`. Har adminkontot inloggning behövs också en synlig knapp Radera mitt konto som anropar `window.NorthernGoDB.deleteAccount()` efter bekräftelse. Det är GDPR artikel 17 för butiksägaren också.

### Steg 4: Varukorgen är en array, inte en plattform

Oavsett om produkterna kom från Shopify eller från din kollektion är varukorgen i sidan vanlig JavaScript.

```javascript
let cart = [];

function addToCart(product, quantity) {
  const qty = Math.max(1, Number(quantity) || 1);
  const existing = cart.find(line => line.id === product.id);
  if (existing) {
    existing.quantity += qty;
  } else {
    cart.push({
      id: product.id,
      name: product.name,
      priceSek: Number(product.priceSek) || 0,
      variantId: product.variantId || null,
      quantity: qty
    });
  }
  renderCart(cart);
}

function cartTotal(lines) {
  return lines.reduce((sum, line) => sum + Number(line.priceSek) * Number(line.quantity), 0);
}
```

För Shopify är det du måste lämna till kassan `variantId` och `quantity`. Namn och priser i din korg är till för visning. Shopify tar betalt efter sitt eget pris. Visar du 199 SEK och Shopify har 249 ser köparen 249 på den gästade kassan. Det är rätt, och det överraskar folk. Hitta inte på ett andra pris.

För en självlagrad katalog är korgen summan du skickar till Stripe. Avrunda till hela kronor om det är så du säljer. Korgen överlever inte en omladdning om du inte sparar den. `localStorage` duger för en liten butik och är inte ett lagersystem. Lägg inte kortnummer eller personnummer någonstans.

### Steg 5: Lämna över till kassan — Shopify eller Stripe, aldrig ett kortformulär

**Shopify-vägen.** Ett anrop. Köparen lämnar din sida och avslutar hos Shopify. Du ser inte kortet. Du räknar inte frakt i appen. Om kassan inte händer är vanliga orsaken ett saknat `variantId` eller en butik som inte är kopplad på Pro.

**Stripe-vägen.** Följ Stripe-guiden. Du klistrar in din egen hemliga nyckel på Pro. Appen öppnar en Checkout-session med orderrader. Kort och Klarna landar på Stripes sida. NorthernGo ser aldrig kortuppgifter. Du är handlaren: återbetalningar, köpvillkor, moms, support.

Det finns ingen tredje väg där den genererade appen ritar fält för kortnummer, utgång och CVC och "bara drar". Bygger modellen det formuläret, radera det. Då skulle du samla in betaldata du inte får lagra och inte kan behandla.

En katalog utan kassa är ändå användbar: en lista med priser och en beställning via `window.NorthernGo.sendEmail`. Det är en postorder-sida, inte en butik. Kalla den det. Efter en lyckad överlämning till Stripe eller Shopify: hitta inte på en orderadmin om du inte själv sparar ordrar. Shopify har redan ordrar. På Stripe-vägen är en tunn orderpost så du vet vad som ska packas. Håll den tunn. Köparens e-post om hen gav den; inte ett kortnummer.

### Steg 6: Publicera en sida du kan lämna

Publicera från Mina projekt. Premium och Pro får en subdomän; Pro kan koppla en egen domän, vilket är det en butik bör använda. Gratis använder alltid reservadressen — okej för en skiss, fel för en köpare.

ZIP-export på Premium och Pro är andra halvan av att inte låsa in dig. Butiksfronten är vanilla JS och Tailwind i en HTML-fil. Anropen mot Shopify och Stripe pekar fortfarande hit tills du byter ut dem. Layout, texter och korglogik följer med.

PWA kommer automatiskt. Skalet kan ladda på ett trögt tåg. Produkthämtning och kassa fungerar inte offline. En köpare utan täckning ska se ett tydligt tomt läge, inte en korg som påstår sig ha betalat.

### Vad det här inte blir

- **Inte en Shopify-ersättare.** Pro kopplar en butik du redan betalar Shopify för. Ingen temaredigerare, ingen katalog med 200 produkter och varianter.
- **Inte en full handelsplattform.** Ingen momsmotor, inga fraktpriser, inget lager. Bara gästad kassa — aldrig kortfält i appen.
- **Inte storlek och färg på Shopify-vägen.** En variant och en bild per produkt från `getProducts()`.

### Vad det kostar

Gratis: 0 SEK, fem molngenereringar, obegränsat lokalt. Ingen Shopify, ingen Stripe-nyckel, ingen ZIP. Premium: 179 SEK / $19, 25 moln, ZIP — fortfarande ingen Shopify eller Stripe-nyckel. Pro: 299 SEK / $29, 50 moln, Shopify, Stripe-nycklar, egna domäner, SEO-granskningar, webhooks och Fortnox. Shopify och Stripe är egna räkningar.

### Felsökning

**Rutnätet är tomt på Pro.** Butiken är inte kopplad, projektet sparades inte först, eller `getProducts()` anropades aldrig. Bekräfta domänen på kortet.

**Kassan gör ingenting.** Saknat `variantId`, inte Pro, eller ett kortformulär modellen hittade på. Radera kortformuläret. `Number(...)` före multiplikation av priser. En storlekssväljare som drar en variant är förväntat — ett `variantId` kommer tillbaka. Sätt inloggning framför katalogskrivningar; låt butiksfronten vara publik.

## Vanliga frågor

### Kan NorthernGo ersätta Shopify för min webbutik?

Nej. På Pro kan det vara en butiksfront framför en Shopify-butik du redan äger, med getProducts och checkout, medan Shopify behåller betalning, moms och ordrar. Utan Shopify kan du lagra en liten katalog själv och lämna köparen till Stripe. Ingen av vägarna är en full handelsplattform.

### Behöver jag Pro-planen för att bygga en butik?

Du behöver Pro för att koppla Shopify eller spara Stripe-nycklar. Gratis och Premium kan generera en katalogvy och, på Premium, exportera ZIP:en, men de kan inte slutföra en riktig kassa. Pro är 299 SEK / $29 i månaden. Shopify och Stripe faktureras var för sig.

### Hur fungerar betalningar om jag bygger en liten katalog utan Shopify?

På Pro kopplar du ditt eget Stripe-konto och öppnar en gästad Checkout-session med orderrader. Kortuppgifter rör aldrig appen. Följ Stripe-guiden i stället för att låta modellen rita kortnummerfält. Du förblir handlaren för återbetalningar, moms och support.

### Hur många produkter kan en AI-byggd NorthernGo-butik visa?

Shopify-kopplingen returnerar de första 20 produkterna, en bild och en variant vardera. En självlagrad katalog har inget hårt tak i databasen, men en liten kurerad lista är den ärliga formen. En butik med 200 produkter och storlekar hör hemma i Shopify, inte i den här byggaren.

### Ska den genererade appen ta kortnummer i ett formulär?

Nej. Radera det formuläret om modellen bygger det. Kortuppgifter hör hemma på Stripe Checkout eller Shopifys kassa. NorthernGo ser dem aldrig, och den inbyggda databasen får inte lagra kortnummer eller personnummer.

---

## Related

- [Så tar du betalt i en AI-byggd app med dina egna Stripe-nycklar](https://northerngo.com/sv/guider/ta-betalt-med-stripe/)
- [Bygga GDPR-säkra appar: en praktisk checklista för EU-grundare](https://northerngo.com/sv/guider/bygga-gdpr-saker-app/)
- [Så undviker du inlåsning när du bygger med en AI-appbyggare](https://northerngo.com/sv/guider/undvik-inlasning-ai-verktyg/)

---

NorthernGo är en AI-driven plattform för att bygga produktionsklara webbappar utan kod. Lokal AI-generering via WebGPU är obegränsad och gratis, och du äger all genererad källkod. https://northerngo.com/