Shopify CLI og Cursor: Byg landingssider uden at røre dit live-tema

Theme Editor i Shopify gør det let at skifte tekst, billeder og rækkefølge på sektioner. Men vil du have en ny sektion, et særligt layout eller en funktion, temaet ikke har, rammer du hurtigt en grænse. I denne guide viser jeg den arbejdsgang, jeg selv bruger til Shopify-landingssider: Cursor bygger de nye sektioner, Shopify CLI flytter koden mellem din computer og Shopify, og Theme Editor bruges stadig til alt det indhold, der skal vedligeholdes.

Det lærer du i denne guide

• Hvornår Theme Editor er nok, og hvornår det giver mening at bruge Cursor
• Hvordan Theme Editor, Cursor og Shopify CLI arbejder sammen
• At installere Shopify CLI og hente dit tema til computeren
• At se dine ændringer live, mens du udvikler
• At sende ændringerne til Shopify og gøre dem live uden risiko

Forudsætninger: Du skal have adgang til at redigere temaer i butikken og have Cursor installeret. Du behøver ikke være udvikler, men du skal være tryg ved at kopiere kommandoer ind i en terminal.
Tidsforbrug: Cirka 1 time første gang, inklusive installation.

Hvornår er Theme Editor nok?

Theme Editor er lavet til den daglige vedligeholdelse af en webshop. Her skifter du tekst og billeder, tilføjer videoer, flytter sektioner og justerer farver og afstande. Har dit tema allerede de sektioner, du skal bruge, kan du bygge flotte landingssider uden at skrive kode.

Problemet opstår, når du vil have noget, temaet ikke er bygget til, fx en ny type sektion, en mere avanceret FAQ eller et interaktivt element. Mange forsøger enten at presse Theme Editor til noget, den ikke kan, eller begynder at kode alt fra bunden. Begge dele gør arbejdet sværere end nødvendigt.

Løsningen er at lade hvert værktøj gøre det, det er bedst til:

Opgave	Værktøj
Skifte tekst, billeder og video	Theme Editor
Flytte og skjule sektioner	Theme Editor
Bygge en ny sektion eller et nyt layout	Cursor
Tilføje funktioner med Liquid, CSS eller JavaScript	Cursor
Flytte kode mellem computer og Shopify	Shopify CLI

Sådan arbejder Theme Editor, Cursor og Shopify CLI sammen

Cursor arbejder ikke direkte i Shopify. Den redigerer en lokal kopi af dit tema på din computer. Shopify CLI er bindeleddet: Den henter temaet ned, viser dine ændringer i browseren og sender dem op igen. Theme Editor er stadig stedet, hvor du og andre redigerer indholdet bagefter.

Det smarte er, at en sektion, du bygger i Cursor, bliver en helt almindelig Shopify-sektion. Når den først er bygget, kan den redigeres i Theme Editor ligesom temaets egne sektioner. Du skal altså ikke åbne Cursor, hver gang en overskrift skal ændres.

Trin 1: Lav en kopi af dit live-tema

Udvikl aldrig direkte i det tema, kunderne ser. Gå til Online Store → Themes i Shopify, klik på de tre prikker ved dit live-tema, og vælg Duplicate. Giv kopien et tydeligt navn, fx “Landingsside udvikling”.

Kopien er dit arbejdstema. Her kan du teste frit, uden at besøgende ser halvfærdige ændringer. Arbejder flere personer på butikken, undgår du også at overskrive hinandens ændringer.

Bemærk: Shopify CLI opretter også sit eget midlertidige “development theme”, når du kører shopify theme dev. Det er kun til forhåndsvisning. Kopien, du laver her, er det tema, du gemmer dit arbejde i.

Trin 2: Installer Shopify CLI

CLI står for Command Line Interface, altså et program, du styrer med kommandoer i en terminal. Du skal kun bruge en håndfuld kommandoer, og dem kan du kopiere herfra.

Shopify CLI kræver:

• Node.js version 22.12 eller nyere
• Git version 2.28 eller nyere

Åbn en terminal (PowerShell eller Windows Terminal på Windows, Terminal på Mac), og installer Shopify CLI med npm, som følger med Node.js:

npm install -g @shopify/cli@latest

Tjek, at installationen virkede:

shopify version

Viser terminalen et versionsnummer, er du klar. Shopify CLI opdaterer sig selv automatisk inden for samme hovedversion, så du skal sjældent installere igen. Ændrer kommandoerne sig, finder du den aktuelle vejledning i Shopifys dokumentation.

Trin 3: Hent temaet til din computer

Opret en mappe til projektet, fx shopify-landingsside, og åbn terminalen i mappen. Hent derefter temaet:

shopify theme pull --store din-butik

Erstat din-butik med navnet på din butik, altså det, der står før .myshopify.com. Første gang åbner Shopify et browservindue, hvor du logger ind og godkender adgangen. Butikken bliver husket, så du ikke skal skrive --store igen.

Shopify viser en liste over temaerne i butikken. Vælg den kopi, du lavede i trin 1. Efter få sekunder ligger hele temaet som almindelige filer i mappen.

Trin 4: Åbn projektet i Cursor

Start Cursor, vælg File → Open Folder, og åbn projektmappen. Et Shopify-tema består af nogle få faste mapper:

Mappe	Indhold
sections	Sektionerne, du ser i Theme Editor. Her bygger du de fleste nye ting.
templates	Opbygningen af de forskellige sidetyper, fx en ny skabelon til landingssider
snippets	Små dele, der genbruges flere steder, fx knapper og ikoner
assets	CSS, JavaScript og billeder
config	Temaets globale indstillinger fra Theme Editor

Til en landingsside arbejder du typisk med en ny skabelon i templates, én eller flere sektioner i sections og lidt styling i assets.

Før Cursor skriver kode, bør den forstå temaet. Start derfor med at bede den om en analyse uden at ændre noget. Hvordan du skriver den og de andre prompts, gennemgår jeg i Cursor-prompts til Shopify: Sådan får du bedre kode.

Trin 5: Se dine ændringer live med shopify theme dev

Kør denne kommando i projektmappen:

shopify theme dev

Shopify CLI uploader nu temaet som et midlertidigt development theme og giver dig et link til forhåndsvisning på http://127.0.0.1:9292. Åbn det i Google Chrome. Når du gemmer en fil i Cursor, opdateres CSS og sektioner automatisk i browseren, med rigtige produkter og data fra din butik. Forhåndsvisningen kan kun ses af dig.

Lad kommandoen køre, mens du arbejder. Du stopper den med Ctrl+C.

Trin 6: Byg én sektion ad gangen

Det mest effektive er ikke at lade Cursor bygge en hel side på én gang. Arbejd i små runder:

1. Beskriv én sektion eller funktion for Cursor.
2. Lad Cursor forklare løsningen og de filer, den vil ændre.
3. Godkend, og lad Cursor lave ændringen.
4. Test resultatet i forhåndsvisningen.
5. Justér, og gå først videre til næste sektion, når denne virker.

Så bliver fejl lette at finde, fordi du ved præcis, hvad der er ændret siden sidst, og Cursor rører ikke dele af temaet, som ikke er en del af opgaven.

Sørg for, at alt indhold i en ny sektion kan redigeres i Theme Editor: tekster, billeder, links og farver. Målet er ikke at bygge webshoppen i Cursor, men at give Theme Editor de byggesten, den mangler.

Trin 7: Send ændringerne til din kopi af temaet

Når en sektion virker, sender du den op til kopien fra trin 1:

shopify theme push

Vælg kopien på listen. Vælg aldrig dit live-tema her. Åbn derefter kopien i Theme Editor, og tjek, at:

• sektionen vises korrekt på computer og mobil,
• tekster, billeder og knapper kan redigeres,
• alle indstillinger virker som forventet.

Små justeringer, som en kortere overskrift eller et andet billede, laver du direkte i Theme Editor. Det er hurtigere end at gå tilbage til Cursor.

Trin 8: Hent ændringerne fra Theme Editor tilbage

Ændringer, du laver i Theme Editor, bliver gemt i Shopify og ikke i filerne på din computer. Går du tilbage til Cursor uden at hente dem, kan næste push overskrive dem. Kør derfor altid:

shopify theme pull

før du fortsætter i Cursor. Det er en lille vane, der kan spare dig for mange timers fejlfinding.

Trin 9: Gør landingssiden live

Når hele landingssiden er testet, er der to måder at gøre den live på:

• Udgiv kopien. Klik Publish ved kopien under Online Store → Themes. Det er enklest, hvis der ikke er rettet noget i live-temaet, mens du har arbejdet.
• Flyt kun de nye filer. Er der rettet i live-temaet undervejs, så flyt kun dine nye sektioner, skabeloner og styles til live-temaet, fx med shopify theme push --only efterfulgt af filnavnene. Så overskriver du ikke andres ændringer.

Tag altid en kopi af live-temaet, før du udgiver noget nyt. Så kan du vende tilbage på et øjeblik, hvis noget går galt.

Typiske fejl, og hvordan du undgår dem

Fejl	Konsekvens	Sådan undgår du det
Udvikling direkte i live-temaet	Kunderne ser fejl og halvfærdige sektioner	Arbejd altid i en kopi
Glemmer at køre theme pull efter Theme Editor	Næste push overskriver dine rettelser	Pull, før du åbner Cursor igen
For store opgaver til Cursor	Mange filer ændres, og fejl er svære at finde	Én sektion ad gangen
Bruger Cursor til tekst og billeder	Indhold låses fast i koden	Byg sektioner, der kan redigeres i Theme Editor
Bruger den gamle kommando shopify login	Kommandoen findes ikke længere	Brug --store første gang, så logger du ind i browseren

Næste skridt

Kvaliteten af det, Cursor laver, afhænger i høj grad af dine prompts. I Cursor-prompts til Shopify viser jeg de prompts, jeg bruger til at analysere temaet, bygge sektioner og holde styr på ændringerne.

Shopify CLI opdateres løbende. Guiden følger Shopifys egen vejledning til temaudvikling, som du altid kan tjekke for de nyeste kommandoer.

Ofte stillede spørgsmål

Skal jeg kunne kode for at bruge Cursor med Shopify?

Nej, men du skal kunne læse lidt kode og forstå, hvad Cursor foreslår. Bed altid Cursor om at forklare løsningen, før den ændrer noget, så du ved, hvad der sker.

Kan Cursor ødelægge min webshop?

Ikke hvis du arbejder i en kopi af temaet. Cursor ændrer kun filerne på din computer, og intet når Shopify, før du selv kører shopify theme push.

Hvorfor kan jeg ikke se forhåndsvisningen?

Forhåndsvisningen fra shopify theme dev virker kun i Google Chrome. Tjek også, at kommandoen stadig kører i terminalen.

Hvad er forskellen på theme dev og theme push?

theme dev viser dine ændringer i en midlertidig forhåndsvisning, mens du arbejder. theme push gemmer ændringerne i et rigtigt tema i Shopify, hvor de kan redigeres i Theme Editor og senere udgives.