Byg en Shopify-shop med Claude Code uden at ødelægge noget

Jeg har bygget en hel webshop i Shopify med Claude Code. Den virker, den er i drift, og jeg har ikke rørt live-temaet en eneste gang undervejs.

Det sidste er hele grunden til, at det gik godt.

De fleste, der sætter AI til at arbejde på deres Shopify-shop, ender med noget halvfærdigt. Ikke fordi AI'en skriver dårlig Liquid. Men fordi de lader den arbejde direkte i live-temaet, uden en kopi at falde tilbage på, og uden at vide hvad der bliver overskrevet hvornår. Så virker forsiden ikke på mobil klokken 14 på en tirsdag, og ingen kan huske hvad der blev ændret.

Forskellen ligger i opsætningen. Den tager tyve minutter at lave, én gang.

Alle kommandoer er testet mod Shopify CLI 4.7.1.

Hvad det her er, og hvor du skal starte

Det her er en guide til at bruge Claude Code sammen med Shopify. Det er ikke en installationsguide.

Jeg går ud fra, at du allerede har Claude Code kørende, uanset om du bruger appen, VS Code, Cursor eller bare terminalen. Har du ikke det, så installer den først, og kom tilbage hertil. Der er flere måder at gøre det på, og de er beskrevet på docs.claude.com.

Find dig selv i listen:

• Du har Claude Code, men ikke Shopify CLI → start ved Del 1.
• Du har begge dele → hop til Del 2. Det er der, den egentlige guide begynder.
• Du har allerede hentet et tema ned og arbejdet i det → hop til Del 3. Sikkerhedsmodellen er den vigtigste del af hele guiden, og det er også der, folk med erfaring oftest opdager, at de har gjort noget forkert i årevis.

Det vigtigste at forstå, før du går i gang

Du skal ikke selv skrive de fleste af kommandoerne i den her guide.

Claude Code kan køre dem for dig. Du skriver i chatten, hvad du vil have, og den udfører kommandoen. Så i praksis siger du:

"Hent temaet ned fra min butik"

i stedet for selv at huske shopify theme pull --store ....

Jeg skriver alligevel kommandoerne ud i guiden, af to grunde: du skal kunne genkende dem, når Claude kører dem, og du skal kunne gribe ind, hvis noget går galt.

De eneste ting, du selv skal i terminalen for:

• Installationerne i Del 1, for Claude kan ikke installere sit eget værktøj, før værktøjet findes.
• shopify theme dev, fordi den bliver ved med at køre, mens du arbejder. Den skal have sit eget vindue.

Sådan åbner du en terminal:

• I VS Code eller Cursor: Terminal → New Terminal.
• I Claude Code-appen: den har sin egen indbygget.
• Windows uden IDE: tryk Start, skriv "PowerShell", tryk Enter.
• Mac uden IDE: tryk Cmd + Mellemrum, skriv "Terminal", tryk Enter.

Del 1: Installer Shopify CLI

Det er Shopifys eget kommandolinjeværktøj, og broen mellem filerne på din computer og din butik. Det er den, der henter temaet ned og sender ændringer op. Claude Code kan ikke tale med Shopify uden den.

1.1 Node.js først

Shopify CLI er skrevet i JavaScript, så den skal bruge Node.js for at kunne køre. Du kommer aldrig til at bruge Node direkte.

Node kommer med npm, som er den pakkemanager, du installerer værktøjer med. Det er npm, du bruger om et øjeblik.

Gå på nodejs.org, hent LTS-versionen (den stabile, ikke "Current"), og klik dig igennem. Standardindstillingerne er fine.

Luk terminalen og åbn den igen bagefter. En terminal, der stod åben under installationen, kender ikke Node endnu. Det er den klart hyppigste årsag til, at næste skridt fejler.

Tjek:

node --version
npm --version

Du skal se to versionsnumre. Får du "command not found" eller "not recognized", er Node enten ikke installeret, eller også har du ikke genstartet terminalen.

1.2 Så selve CLI'en

npm install -g @shopify/cli@latest

-g betyder "global", altså at værktøjet virker fra alle mapper og ikke kun den, du står i.

Tjek:

shopify version

Får du et versionsnummer, er du klar. Får du "permission denied" på Mac, så sæt sudo foran kommandoen og indtast din adgangskode.

Del 2: Hent dit tema ned

Lav en ny, tom mappe til shoppen, og åbn Claude Code i den.

Herfra kan du bede Claude om det direkte:

"Hent temaet ned fra dinbutik.myshopify.com"

Den kører så det her for dig:

shopify theme pull --store dinbutik.myshopify.com

Du finder butiksnavnet i adresselinjen, når du er logget ind i Shopify admin.

Første gang åbner den en browser og beder dig logge ind. Derefter husker den dig. Den spørger også, hvilket tema du vil hente.

Du har nu hele dit tema liggende som filer på din maskine: sections, snippets, templates, assets.

Det er hele forbindelsen mellem de to. Claude retter i filerne, Shopify CLI sender dem videre. Der er ikke mere at sætte op.

Del 3: Sikkerhedsmodellen, den vigtigste del

Shopify CLI er bygget sådan, at du skal gøre noget aktivt for at ramme dit live-tema. Det sker ikke ved et uheld. De her fem kommandoer er hele sikkerhedsnettet.

3.1 Lav en kopi, før du rører noget

shopify theme duplicate

Din faldskærm. Ti sekunder. Gør det før hver større ændring.

3.2 Arbejd i et udviklingstema, ikke i det aktive

shopify theme dev

Kernen i det hele. Kommandoen uploader dit tema som et udviklingstema, som kun du kan se, og giver dig en preview-URL. Dine ændringer opdaterer live i preview mens du arbejder, men kunderne ser ingenting.

Den nægter at arbejde på dit live-tema, medmindre du eksplicit skriver --allow-live. Sikkerheden er indbygget. Du skal aktivt vælge at omgå den.

Sig det til Claude med det samme, så det gælder hele samtalen:

"Arbejd altid i et udkast-tema. Rør ikke det aktive tema, før jeg siger til."

Det er den enkleste forsikring i hele guiden. Så bygger og retter I frit, kunderne ser den gamle version imens, og du bestemmer selv, hvornår det går live.

Det virker lige så godt til småting som til store ombygninger. Skal du bare rette en enkelt sektion på en side, der allerede er live, så gør det i udkastet, se det i preview, og publicer først når det er som det skal være.

Lad kommandoen køre i sit eget terminalvindue, mens du arbejder. Luk den med Ctrl + C.

3.3 Push til et nyt, upubliceret tema

shopify theme push --unpublished --theme "Nyt design"

Opretter et helt nyt tema i butikken, som ikke er live.

3.4 Del et preview-link uden at publicere

shopify theme share

Et delbart link til et upubliceret tema. Guld værd, hvis du bygger for en kunde og skal have godkendelse først.

3.5 Gå live, bevidst

shopify theme publish

Den eneste kommando i hele flowet, der ændrer hvad kunderne ser.

Del 4: Push og pull, forklaret ordentligt

Det er den ene ting, folk misforstår, og det er der, filer forsvinder.

pull henter FRA butikken TIL din maskine. Overskriver dine lokale filer.

push sender FRA din maskine TIL butikken. Overskriver butikkens filer.

Der er ingen fletning. Ingen af dem spørger pænt. Den der kører sidst, vinder.

Fælden alle falder i: du retter noget i Shopifys tema-editor i browseren, og pusher bagefter fra din maskine. Din push overskriver det, du lige lavede i browseren. Det er væk.

Reglen: vælg ét sted at arbejde. Enten i koden eller i browseren. Skal du skifte, så pull først.

Ekstra sikkerhedsnet:

shopify theme push --nodelete

Så bliver filer, du har slettet lokalt, ikke slettet i butikken.

Del 5: Hvis I er flere om butikken

I en organisation er der flere hænder i det samme tema. En marketingperson retter en tekst i browseren. En anden udvikler pusher fra sin maskine. Din lokale kopi er en time gammel, og du aner det ikke.

Fire regler, der løser det meste:

1. Pull altid, før du begynder. Og pull igen, før du pusher.

shopify theme pull

Den vigtigste vane i hele guiden, når I er flere. Bed Claude gøre det til en fast regel:

"Kør altid theme pull, før du foreslår en push, og sig til, hvis der kom ændringer ned."

Så afhænger det ikke af, om du selv husker det.

2. Arbejd i dit eget udviklingstema. To personer i det samme tema overskriver hinanden. To personer i hver sit gør ikke.

3. Læg temaet i git. Det er den rigtige løsning, ikke en luksus. Med git kan du se hvad der blev ændret, hvornår, og af hvem, og rulle tilbage til i går. Uden git er "hvem slettede den sektion?" et spørgsmål, ingen kan svare på.

git init
git add .
git commit -m "Temaet som det ser ud nu"

4. Aftal, hvem der publicerer. theme publish bør være én persons ansvar.

Del 6: Sådan får du kvalitet ud af det

Det her er forskellen på en shop der virker og en shop fuld af fejl.

Fortæl Claude hvilket tema I arbejder i (Dawn, Impulse, et custom tema), og bed den læse de eksisterende sektioner, før den skriver nye. Halvdelen af alt AI-slop opstår, fordi modellen skriver generisk Liquid i stedet for at følge temaets eget mønster.

Bed den bruge temaets eksisterende CSS-variabler og sektions-schema i stedet for at opfinde sine egne.

Kør altid det her, før du pusher:

shopify theme check

Den fanger Liquid-fejl, manglende schema-felter og performance-problemer, før de rammer butikken.

Og så til designet

Standard-AI laver funktionelt design. Det ser ordentligt ud, og det ser også ud som alt muligt andet.

Installer en design-skill. Claude Code kan udvides med skills, og der findes nogle stykker til UI og UX, for eksempel ui-ux-pro-max, der giver modellen rigtige rammer at arbejde efter: farvesystemer, typografi-par, spacing, interaktionstilstande. Forskellen på output er meget tydelig.

Tre ting, der flytter mere end nogen prompt:

• Giv den noget at ramme efter. Send et screenshot af en side, du synes er flot, og bed den ramme det udtryk. Konkret reference slår enhver beskrivelse.
• Bed om varianter, ikke om "pænt". "Lav tre versioner af den her sektion, forskellige i layout" giver dig noget at vælge imellem. "Gør den pænere" giver dig gætteri.
• Vurdér den på mobil først. Det er der, størstedelen af din trafik er, og det er der, AI-genereret layout oftest falder fra hinanden.

Del 7: Lad AI'en kvalitetssikre sit eget arbejde

Det er her, de fleste aldrig kommer hen, og det er det trick, der flytter mest.

Claude Code kan starte underagenter: separate Claude-instanser med ét specifikt job. I stedet for at bede den samme model om både at bygge og godkende sit eget arbejde, får du et rigtigt review.

Og det bedste: de to kan sende arbejdet frem og tilbage, indtil der ikke er flere fejl tilbage.

Du kan starte enkelt og bare bede om det i chatten:

"Start en underagent, der gennemgår den her sektion for mobilvisning, tilgængelighed og om den følger temaets eksisterende mønstre."

Men det rigtige trick er at bygge en fast reviewer, du kan genbruge. Opret filen .claude/agents/tema-review.md i din projektmappe:

---
name: tema-review
description: Gennemgår Shopify Liquid-sektioner for fejl, mobilvisning og temakonventioner
---

Du reviewer Shopify-temakode. Du bygger ikke, du finder fejl.

Tjek hver gang:
1. Følger sektionen temaets eksisterende mønstre, eller er den generisk?
2. Bruger den temaets CSS-variabler, eller hardcodede farver og størrelser?
3. Virker den på mobil? Kig efter faste bredder og manglende breakpoints.
4. Er schema-felterne komplette, så butiksejeren kan redigere teksterne selv?
5. Tilgængelighed: alt-tekster, knap-labels, kontrast.

Rapportér kun konkrete problemer med filnavn og linjenummer. Ingen ros.

Nu kan du sige "kør tema-review på den nye sektion". Finder den fejl, retter Claude dem og sender til review igen. Loopet kører, indtil rapporten er tom.

Hvorfor det virker: en model, der lige har bygget noget, er dårlig til at finde fejl i det. En frisk agent med ét job og ingen tilknytning til koden er langt mere kritisk. Præcis derfor laver mennesker også kodegennemgang i par.

Del 8: Custom app, når Claude skal have flere rettigheder

Hvorfor er det nødvendigt, når CLI'en allerede virker?

Det er det spørgsmål, folk stopper op ved, så lad os tage det først.

Shopify CLI giver adgang til dit tema. Altså filerne: Liquid, CSS, JavaScript, sektioner, templates. Alt hvad der handler om, hvordan butikken ser ud og opfører sig.

Custom app'en giver adgang til dine data. Produkter, lager, ordrer, kunder, metafelter. Alt hvad butikken indeholder.

Det er to helt forskellige ting, og CLI'en kan ikke det sidste.

Et konkret eksempel. Claude kan med CLI-adgang alene bygge dig en sektion, der viser lagerstatus på produktsiden. Den kan lave designet, animationen, det hele. Men den kan ikke læse dit faktiske lagertal, for det ligger i dataene, ikke i temaet.

Andre ting, der kræver custom app:

• Rette 400 produktbeskrivelser på én gang i stedet for i hånden
• Læse eller opdatere lagertal og priser i bulk
• Oprette metafelter til en ny produktegenskab
• Trække ordredata ud til en analyse

Tommelfingerregel: skal Claude ændre hvordan butikken ser ud, er CLI nok. Skal den røre ved det, der står i butikken, skal du bruge en custom app.

Bygger du bare om på designet, kan du roligt springe hele det her afsnit over.

Sådan opretter du den

Shopify har flyttet det over i deres udviklerdashboard, så fremgangsmåden er en anden end i de fleste ældre guider, du finder på nettet.

1. Gå ind i Shopify admin og klik Apps.

Menupunktet hed tidligere "Apps and sales channels". Det hedder bare Apps nu.

2. Klik Develop apps oppe i højre hjørne.

Det sender dig videre til udviklerdashboardet. Du kan også gå direkte dertil:

https://dev.shopify.com/dashboard/<dit-id>/apps

3. Klik Create app og giv den et navn.

4. Sæt de scopes, appen skal bruge.

Vælg kun dem, du faktisk har brug for: read_products, write_products, read_inventory og så videre. En token med fuld skriveadgang til ordrer er en meget dyr fejl at lave.

5. Release en version.

Det her er det trin, folk overser. Dine scopes træder ikke i kraft, før du har released en version af appen. Har du sat rettighederne, men appen svarer stadig "access denied", er det næsten altid det her, der mangler.

6. Hent Client ID og Client secret under App settings.

Det er de to værdier, Claude Code skal bruge for at kunne tale med Admin API'et. Du finder dem inde i appens indstillinger.

Læg dem aldrig i temafilerne. Brug en .env-fil, og sørg for at .env står i din .gitignore, før du committer noget som helst. Nøgler i et tema ligger offentligt på din butik.

Det daglige loop

shopify theme pull        # hent andres ændringer først
shopify theme duplicate   # faldskærm
shopify theme dev         # arbejd sikkert, kun du kan se det
# ... byg med Claude, og bed tema-review agenten om en gennemgang ...
shopify theme check       # find fejl før butikken gør
shopify theme pull        # pull igen, hvis der er gået tid
shopify theme push --unpublished --theme "Test"
shopify theme share       # preview-link til godkendelse
shopify theme publish     # gå live, bevidst

Og husk: du kan bede Claude om at køre næsten alle sammen. Du skal kunne genkende dem, ikke huske dem udenad.

Hvad det her erstatter

Her er den del, ingen nævner. Når du selv kan rette i dit tema, kan du droppe en stor del af de apps, du betaler for hver måned.

Upsell-knapper. Trust badges. Nedtællings-timere. Størrelsesguider. Announcement bars.

De fleste af dem er små stykker kode til 200-400 kr om måneden stykket, der sidder i et tema, som lige så godt kunne indeholde koden direkte.

To ting jeg selv har fået Claude til at bygge, som jeg før betalte for:

Sticky køb-bar. En fast bjælke, der glider frem i bunden af skærmen, når man scroller forbi køb-knappen, med produktnavn, pris og en knap. Det er en af de mest solgte app-funktioner overhovedet. Jeg bad Claude om det, og den byggede det ind i temaet:

"Lav en sticky bar i bunden, der dukker op når køb-knappen scroller ud af billedet. Produktnavn, pris og tilføj-til-kurv. Brug temaets egne farver og knapstil, og sørg for at den ikke dækker for menuen på mobil."

Lagerstatus på produktsiden. "På lager" eller "kun 3 tilbage" direkte under prisen. Skaber den urgency, som halvdelen af alle konverterings-apps sælger, og den trækker på et tal, Shopify allerede kender.

Hvorfor det er bedre end en app, ud over prisen:

• Det passer til dit design, fordi det er bygget ind i dit tema og bruger dine egne farver og fonte. Apps ligner altid lidt noget, der er limet på.
• Det gør præcis det, du beder om. Ingen indstillinger, du ikke bruger, ingen features du ikke bad om.
• Din side bliver hurtigere. Hver app lægger sit eget JavaScript oveni. Ti apps er ti ekstra ting, browseren skal hente, før kunden ser noget.

Jeg siger ikke, du skal opsige det hele. Nogle apps laver rigtigt arbejde, som du ikke selv skal bygge. Men gå din liste igennem og spørg ved hver enkelt: laver den her faktisk noget kompliceret, eller er den en knap og lidt styling til 300 kr om måneden?

De seks fejl, der koster mest

1. 1At arbejde direkte i live-temaet. Sig til Claude med det samme, at den skal arbejde i et udkast.
2. 2Ikke at pulle, før du pusher. Især når I er flere. Du overskriver folk, der intet anede.
3. 3At blande browser-editor og lokal kode. Vælg ét sted, ellers overskriver du dig selv.
4. 4At springe theme check over. Den finder på to sekunder det, kunderne ellers finder for dig.
5. 5At lade AI skrive generisk Liquid. Få den til at læse temaets mønstre først, og lad en underagent reviewe bagefter.
6. 6At glemme at release en version af din custom app, og så bruge en time på at fejlsøge rettigheder, der aldrig trådte i kraft.

Bygget og testet på rigtige butikker.