Wat is een staging site? Zo maak je er één

Stel je voor dat je een Broadway-musical bijwoont: je ziet een gepolijste productie, maar achter de schermen heeft de cast en crew honderden uren gestoken in audities, tekstlezen, repetities en meer. Alles wat je ziet is het resultaat van zorgvuldige voorbereiding.

Evenzo fungeert in webontwikkeling een stagingwebsite als een “dress rehearsal” voor je daadwerkelijke website. In plaats van updates direct naar een live website te pushen, gebruiken ontwikkelaars een staging site voor testen en revisies totdat ze klaar zijn om hun werk aan een live publiek te tonen.

Ontdek meer over de voordelen van het gebruik van een staging site voor je e-commerce winkel, inclusief hoe je een staging site in Shopify kunt maken.

Wat is een staging site?

Een staging site is een privé testomgeving waar je updates of herontwerpen kunt bekijken zonder de live site te beïnvloeden. Het simuleert een live versie van een site, zodat ontwikkelaars en belanghebbenden het kunnen ervaren zoals een gebruiker dat zou doen als het live was.

Een belangrijk doel van een stagingomgeving is om fouten op te sporen en revisies of correcties aan te brengen. Gewoonlijk worden belanghebbenden, zoals marketing- of managementteams, betrokken bij het stagingproces om feedback te geven. Zodra belanghebbenden de testsite grondig hebben beoordeeld en hun input is verwerkt, worden de updates naar de live omgeving gepusht.

Een belangrijke update, zoals een nieuwe sectie voor productafbeeldingen, kan de conversies schaden als de site niet goed functioneert als gevolg van de wijziging. Door de gebruikerservaring te simuleren—van het klikken door naar de productpagina tot het toevoegen van artikelen aan een winkelwagentje—kun je fouten ontdekken en verhelpen voordat ze invloed hebben op echte klanten.

Ontwikkelings-, staging- en live sites

• Ontwikkelingssite
• Staging site
• Live site

Webontwikkeling vindt plaats in drie hoofdgebieden: ontwikkeling, staging en live. Eerst wordt de code geschreven op een ontwikkelingswebsite, vervolgens wordt deze naar een staging site gepusht voor kwaliteitsbeoordeling (QA), en ten slotte wordt de live site bijgewerkt voor alle gebruikers.

Ontwikkelingssite

De ontwikkelingssite is een sandbox waar ontwikkelaars code schrijven en ideeën tot leven brengen. Het is meestal een lokale omgeving die alleen toegankelijk is voor het ontwikkelingsteam. Deze fase omvat het toevoegen van afbeeldingen, tekst, video's en code voor aangepaste functionaliteiten, zoals interactieve productfilters. Hoewel hier enige initiële testing plaatsvindt, is de ontwikkelingsomgeving doorgaans nog niet gepolijst.

Staging site

Na de voltooiing van de ontwikkeling wordt de code gepubliceerd naar een nieuwe staging site. Dit is je dress rehearsal, waar alle problemen worden opgelost alsof je voor een live publiek staat. Staging websites zijn online beschikbaar, meestal op een staging-domein dat een staging site-URL gebruikt zoals staging.jouwwebsitenaam.com.

Zorg ervoor dat je staging site niet indexeerbaar is—dit betekent dat je zoekmachines ontmoedigt om deze in zoekresultaten weer te geven. Dit kun je snel doen door een paar regels code toe te voegen. Overweeg om de staging site met een wachtwoord te beveiligen als deze informatie bevat die je nog niet klaar bent om klanten te tonen, zoals een aanstaande uitverkoop.

Zodra de staging site live is, beoordelen belanghebbenden deze en geven feedback. De code gaat dan terug naar de ontwikkelingssite, waar ontwikkelaars eventuele zorgen aanpakken en wijzigingen opnieuw naar de staging site pushen. Dit proces gaat door totdat alle belanghebbenden goedkeuring geven.

Live sites

Een live site is de definitieve, publiek toegankelijke versie—ook wel de productieomgeving of productiesite genoemd. Dit is waar het gordijn opengaat voor het publiek en updates zichtbaar zijn voor alle gebruikers. Ze kunnen aankopen doen, interactie hebben met je content en communiceren met je merk. Zodra een wijziging live is, kan iedereen deze bekijken, wat de reden is dat grondige QA in de stagingfase cruciaal is.

Waarom een staging site gebruiken voor je e-commerce winkel?

Het publiceren van een mislukte update kan klanten irriteren en de verkoop schaden, dus het is bijzonder belangrijk voor e-commerce winkels om staging sites te gebruiken. Een staging site kan je helpen:

• Elementen testen zonder de gebruikerservaring te beïnvloeden. Experimenteer met ontwerpen en nieuwe functies zonder de ervaring van je klanten te verslechteren.
• Fouten opsporen voordat ze publiekelijk worden uitgerold. Vind fouten zoals winkelwagentjes die niet werken, knoppen die niet functioneren, of gebroken productafbeeldingen.
• Integraties testen zonder de site te verstoren. Test externe integraties zoals API's (application programming interfaces) of verzendcalculators zonder de live site te beïnvloeden.
• Samenwerken met belanghebbenden. Nodig verschillende teams, ontwerpers en belanghebbenden uit om revisies te beoordelen en samen te werken.
• De gebruikerservaring simuleren. Beleef de site zoals je klanten dat zullen doen, zodat je tekortkomingen in de winkelervaring kunt ontdekken. Dit is een completere simulatie dan alleen het gebruik van interactieve ontwerpbestanden in een tool zoals Figma.
• De prestaties van de website testen. Vertraagt je site door de updates? Een staging site stelt je in staat om de impact op de technische prestaties te testen (wat ook invloed kan hebben op organische zoekresultaten).

3 manieren om een staging site op Shopify te maken

1. Dupliceer je thema
2. Maak een ontwikkelingswinkel
3. Gebruik een app

Standaard Shopify-websites worden niet geleverd met een staging site, dus je moet er zelf een maken. Er zijn drie manieren om dit te doen:

1. Dupliceer je thema

Dit is de eenvoudigste manier om een stagingomgeving te creëren met een standaard Shopify-abonnement. Het is een snel installatieproces dat slechts een paar klikken kost. Je hoeft ook geen externe apps te installeren, omdat je stagingomgeving in het Shopify-beheerpaneel is ingebouwd.

Hier is hoe je een staging site in Shopify maakt door je thema te dupliceren:

1. Ga naar Online winkel > Thema's in je Shopify-beheerpaneel.

2. Onder Huidig thema > Acties, selecteer Dupliceer.

3. Je hebt nu een identieke kopie van je live thema. Bewerk het vrijelijk zonder de live site te beïnvloeden. Je kunt op Voorbeeld klikken om een staging instance te genereren.

4. Zodra je klaar bent met testen, kun je de wijzigingen op je live site aanbrengen.

Deze optie is het beste voor ontwerpwijzigingen zoals lay-outaanpassingen of nieuwe paginasecties. Het biedt echter geen testomgeving voor integraties of functionele wijzigingen. Houd er ook rekening mee dat je handmatig de elementen moet toevoegen die je al op je bestaande site hebt geplaatst.

2. Maak een ontwikkelingswinkel

Deze methode vereist dat je een nieuw Shopify partneraccount aanmaakt, waarmee je een volledige winkel voor tests kunt bouwen. Partneraccounts zijn ontworpen voor ontwikkelaars, ontwerpers en bureaus die winkels voor klanten bouwen en beheren. Ze zijn gratis en geven je toegang tot een ontwikkelingswinkel, waarmee je alles van je hoofdsite kunt spiegelen—inclusief het ontwerp en de functionaliteit van de website—in een privéomgeving.

Hier is hoe je een staging site maakt door een ontwikkelingswinkel te gebruiken:

1. Meld je aan voor een Shopify-partneraccount.

2. Ga naar Winkels > Winkel aanmaken.

3. Selecteer Ontwikkeling als het type winkel.

4. Geef het een naam zoals “staging-jouwwebsite” zodat het gemakkelijk te onderscheiden is van je live winkel.

5. Voeg producten toe, installeer je thema en configureer alle instellingen om je live winkel te spiegelen.

Nu kun je de volledige gebruikerservaring simuleren zonder risico voor je daadwerkelijke site. Dit is de beste optie voor functionele wijzigingen, inclusief aangepaste code of integraties van derden. Hoewel ontwikkelingswinkels gratis zijn voor tests, hebben ze enkele beperkingen. Je kunt bijvoorbeeld alleen gratis en partner-vriendelijke apps installeren en alleen testverzendlabels genereren.

Als je extra apps wilt testen of functionele verzendlabels wilt maken, kun je een nieuwe betaalde winkel op een Basisplan opzetten. Net als bij het dupliceren van je thema, moet je handmatig de toegevoegde website-elementen naar je staging site kopiëren.

3. Gebruik een app

Sommige stagingtools zoals Duplify (dat een beperkte gratis versie biedt) stellen je in staat om een stagingomgeving te creëren die je hele site repliceert. Je kunt dan bestaande pagina's en producten testen voordat je live gaat. Rewind Staging is een vergelijkbare app (met een gratis proefperiode) die thema-back-ups omvat, zodat je kunt terugkeren naar de vorige versie als er iets misgaat. Ga gewoon naar de Shopify App Store en zoek naar staging-apps om aan de slag te gaan.

Hier is hoe je een staging site maakt met Rewind Staging:

1. Installeer Rewind Copy op je live site vanuit de Shopify App Store.

2. Kies je live winkel als je Bronwinkel.

3. Installeer Rewind Copy op je ontwikkelingswinkel.

4. Kies je ontwikkelingswinkel als je Bestemmingswinkel.

5. Kopieer de sleutel van je Bronwinkel naar je Bestemmingswinkel om de winkels te koppelen.

6. Kies de informatie die je naar de staging site wilt kopiëren, zodat deze je live site spiegelt.

7. Controleer Continu op kopieerwijzigingen om de synchronisatie tussen beide winkels te behouden.

8. Klik op Taak starten om de kopie te starten.

Soms kan het handmatig dupliceren van je website leiden tot ontbrekende onderdelen, dus het gebruik van een staging-app kan zorgen voor een exacte kopie—vooral als je een ingewikkeld thema hebt.