Hvad er et staging site? Sådan opretter du et staging-miljø

Forestil dig, at du ser en stor teaterforestilling. Det hele virker gennemført og ubesværet, men bag scenen gemmer der sig hundredvis af timer brugt på auditions, prøver, kostumegennemgange og finpudsning. Det publikum ser, er resultatet af grundig forberedelse.

På samme måde fungerer et staging site inden for webudvikling som en generalprøve for din hjemmeside. I stedet for at lægge opdateringer direkte ud på den live hjemmeside bruger udviklere et staging site til at teste ændringer og rette fejl, inden løsningen bliver gjort offentlig.

Her kan du læse mere om fordelene ved at bruge et staging site til din webshop, og hvordan du opretter et staging-miljø i Shopify.

Hvad er et staging site?

Et staging site er et privat testmiljø til hjemmesider, hvor du kan teste opdateringer eller ændringer af design uden at påvirke den live hjemmeside. Det fungerer som en kopi af den rigtige side, så udviklere og andre involverede kan opleve siden, præcis som brugerne gør, når den går live.

Et vigtigt formål med et staging-miljø er at finde fejl og lave justeringer, før ændringerne bliver offentliggjort. Typisk bliver teams fra fx marketing eller ledelse inddraget i denne fase for at gennemgå siden og give feedback. Når testsitet er blevet gennemgået grundigt, og alle rettelser er på plads, bliver ændringerne flyttet til live-miljøet.

En vigtig opdatering, som fx en ny sektion med produktbilleder, kan skade konverteringen, hvis siden ikke fungerer korrekt efter ændringen. Ved at simulere hele brugeroplevelsen, fra det øjeblik nogen klikker på et produkt, til varerne er i indkøbskurven, kan du opdage og rette fejl, før de påvirker rigtige kunder.

Udviklingssite vs. staging-site vs. live-site

• Udviklingssite
• Staging site
• Live site

Webudvikling foregår typisk i tre forskellige miljøer: udvikling, staging og live. Først bliver koden skrevet på et udviklingssite. Derefter bliver den flyttet til et staging site til kvalitetssikring og test, før den til sidst bliver lagt over på den live hjemmeside, som brugerne møder.

Udviklingssite

Et udviklingssite fungerer som et sandkassemiljø, hvor udviklere skriver kode og omsætter idéer til konkrete løsninger. Det er som regel et lokalt miljø, som kun udviklingsteamet har adgang til. Her bliver der tilføjet billeder, tekst, videoer og kode til specialfunktioner som fx interaktive produktfiltre. Der bliver også lavet de første tests, men udviklingsmiljøet er typisk stadig under opbygning og ikke helt færdigt.

Staging site

Når udviklingsarbejdet er færdigt, bliver koden flyttet til et staging site. Det fungerer som en generalprøve, hvor fejl og ujævnheder bliver opdaget og rettet, som om siden allerede var offentlig. Et staging site ligger online, typisk på et staging-domæne med en URL som fx staging.dinhjemmeside.dk.

Det er vigtigt, at dit staging-miljø ikke bliver indekseret af søgemaskiner. Ellers risikerer du, at testsider dukker op i søgeresultaterne. Det kan du gøre forholdsvis hurtigt, da det som regel løses ved at tilføje nogle få linjer kode. Du kan også beskytte staging-sitet med adgangskode, især hvis det indeholder information, kunderne ikke skal se endnu, fx et kommende udsalg eller nye produkter.

Når staging-sitet er klar, bliver det gennemgået af relevante teams og andre involverede, som giver feedback på siden. Derefter går koden tilbage til udviklingssitet, hvor udviklerne retter eventuelle problemer og sender ændringerne tilbage til staging-miljøet. Processen fortsætter, indtil løsningen er klar til at blive gjort live.

Live site

Et live site er den endelige og offentlige version af hjemmesiden. Det bliver også kaldt et produktionsmiljø eller produktionssite. Det er her, opdateringer bliver synlige for alle brugere, så de kan gennemføre køb, læse indhold og interagere med brandet. Når en ændring først er live, kan alle se den. Derfor er grundig kvalitetssikring i staging-fasen meget vigtig.

Hvorfor bruge et staging site til din webshop?

En opdatering med fejl kan frustrere kunder og koste salg. Derfor er det især vigtigt for webshops at bruge et staging site eller staging-miljø. Det kan bl.a. hjælpe med at:

• Teste elementer uden at påvirke brugeroplevelsen. Afprøv designændringer og nye funktioner uden at forringe kundeoplevelsen på den live hjemmeside.
• Fange fejl før lancering. Find problemer som fejl i indkøbskurven, knapper der ikke virker, eller produktbilleder der ikke bliver vist korrekt.
• Teste integrationer uden at forstyrre siden. Afprøv integrationer som API’er, betalingsløsninger eller fragtberegnere uden at påvirke den live hjemmeside.
• Samarbejde med teams og andre involverede. Invitér designere, marketingteams og andre involverede til at gennemgå siden og samarbejde om rettelser.
• Simulere brugeroplevelsen. Oplev hjemmesiden præcis, som kunderne vil møde den, så du kan finde problemer i købsoplevelsen. Det giver et mere realistisk billede end kun at bruge designfiler i værktøjer som Figma.
• Teste hjemmesidens performance. Bliver hjemmesiden langsommere efter opdateringerne? Med et staging site kan du teste den tekniske performance og se, hvordan ændringerne påvirker hastighed og brugeroplevelse. Det kan også have betydning for dine placeringer i søgeresultaterne.

3 måder at oprette et staging site i Shopify på

1. Duplikér dit tema
2. Opret en udviklingsbutik
3. Brug en app

Standardbutikker i Shopify kommer ikke med et indbygget staging site, så du skal selv oprette et staging-miljø. Det kan du gøre på tre forskellige måder:

1. Duplikér dit tema

Det er den nemmeste måde at oprette et staging-miljø på med et almindeligt Shopify-abonnement. Opsætningen går hurtigt og kræver kun få klik. Du behøver heller ikke installere tredjepartsapps, fordi staging-miljøet bliver oprettet direkte i Shopify-administrator.

Sådan opretter du et staging site i Shopify ved at duplikere dit tema:

1. Gå til Webshop > Temaer i Shopify-administrator.

2. Klik på knappen ... ud for dit nuværende tema for at åbne handlingsmenuen, og klik derefter på Dupliker.

3. Du har nu en identisk kopi af dit live-tema. Du kan redigere frit i det uden at påvirke den live hjemmeside. Klik på Forhåndsvisning for at åbne en staging-version.

4. Når du er færdig med at teste ændringerne, kan du lægge dem live på hjemmesiden.

Denne løsning egner sig bedst til designændringer som justeringer af layout eller nye sektionsblokke på siderne. Den giver dog ikke et komplet testmiljø til integrationer eller ændringer i funktionalitet. Husk også, at du manuelt skal tilføje de elementer, du allerede har lagt ind på den eksisterende hjemmeside.

2. Opret en udviklingsbutik

Denne metode kræver, at du opretter en Shopify-partnerkonto, som giver adgang til at bygge en komplet butik til test. Partnerkonti er lavet til udviklere, designere og bureauer, der bygger og administrerer butikker for kunder. De er gratis og giver adgang til en udviklingsbutik, så du kan spejle alt fra den eksisterende butik, inklusive design og funktionalitet, i et privat staging-miljø.

Sådan opretter du et staging site ved hjælp af en udviklingsbutik:

1. Opret en Shopify-partnerkonto.

2. Gå til dit kontrolpanel for udviklere, eller Dev Dashboard.

3. Vælg “Development” som butikstype.

4. Giv butikken et navn som fx “staging-dinhjemmeside”, så den er nem at skelne fra live-butikken.

5. Tilføj produkter, installer temaet, og konfigurer alle indstillinger, så butikken afspejler den live webshop.

Nu kan du simulere hele brugeroplevelsen uden at sætte den rigtige hjemmeside på spil. Det er den bedste løsning til ændringer i funktionalitet, herunder specialkode og tredjepartsintegrationer. Udviklingsbutikker er gratis at bruge til test, men de har visse begrænsninger. Du kan fx kun installere gratis apps og apps, der er kompatible med partnermiljøet, og du kan kun oprette testforsendelseslabels.

Hvis du vil teste flere apps eller oprette rigtige forsendelseslabels, kan du oprette en ny betalt butik med et Basic-abonnement. Ligesom når du duplikerer dit tema, skal du manuelt kopiere de nyeste ændringer fra hjemmesiden over på staging-sitet.

3. Brug en app

Nogle staging-værktøjer som Duplify, der tilbyder et begrænset gratis abonnement, gør det muligt at oprette et staging-miljø, som kopierer hele hjemmesiden. Derefter kan du teste eksisterende sider og produkter, før ændringerne bliver lagt live.

Rewind Staging er en lignende app med gratis prøveperiode, som også inkluderer backup af temaer. Det gør det muligt at vende tilbage til en tidligere version, hvis noget går galt. Du skal blot gå til Shopify App Store og søge efter staging-apps for at komme i gang.

Sådan opretter du et staging site med Rewind Staging:

1. Installer Rewind Copy på den live hjemmeside fra Shopify App Store.

2. Vælg den live butik som “Source Store”.

3. Installer Rewind Copy på udviklingsbutikken.

4. Vælg udviklingsbutikken som “Destination Store”.

5. Kopiér nøglen fra “Source Store” til “Destination Store” for at forbinde butikkerne.

6. Vælg, hvilke oplysninger der skal kopieres til staging-sitet, så det afspejler den live hjemmeside.

7. Markér “Continuously copy changes” for at holde de to butikker synkroniseret automatisk.

8. Klik på “Begin task” for at starte kopieringen.

Når du duplikerer hjemmesiden manuelt, kan der let mangle enkelte elementer. En staging-app kan derfor hjælpe med at sikre en mere præcis kopi, især hvis du arbejder med et komplekst tema.