Cos’è un sito di staging e come crearlo

Immagina di assistere a un musical di Broadway: vedi una produzione impeccabile, ma dietro le quinte, il cast e la troupe hanno dedicato centinaia di ore a provini, letture di copione, prove generali e altro ancora. Tutto ciò che vedi è il risultato di una preparazione meticolosa.

Allo stesso modo, nello sviluppo web, un sito di staging funge da "prova generale" per il tuo sito web reale. Invece di pubblicare aggiornamenti direttamente su un sito attivo, gli sviluppatori utilizzano un sito di staging per testare e apportare modifiche fino a quando non sono pronti a mostrare il loro lavoro al pubblico.

Scopri di più sui vantaggi dell'utilizzo di un sito di staging per il tuo negozio ecommerce, incluso come crearne uno su Shopify.

Che cos'è un sito di staging?

Un sito di staging è un ambiente di test privato dove puoi rivedere aggiornamenti o riprogettazioni senza influenzare il sito attivo. Simula una versione live di un sito, così sviluppatori e stakeholder possono possano sperimentarlo come farebbe l’utente se fosse online.

Un obiettivo chiave di un ambiente di staging è individuare difetti e apportare revisioni o correzioni. Di solito, le parti interessate come i team di marketing o dirigenziali vengono coinvolte nel processo di staging per fornire feedback. Una volta che gli stakeholder hanno esaminato a fondo il sito di test e il loro input è stato considerato, gli aggiornamenti vengono trasferiti all'ambiente live.

Un aggiornamento critico, come una nuova sezione di immagini di prodotto, potrebbe danneggiare le conversioni se il sito non funziona correttamente a causa della modifica. Simulando la user experience (dal clic sulla pagina del prodotto all'aggiunta di articoli al carrello) puoi scoprire e correggere errori prima che abbiano conseguenze sui clienti reali.

Siti di sviluppo vs siti di staging vs siti live

• Sito di sviluppo
• Sito di staging
• Sito live

Lo sviluppo web avviene in tre ambiti principali: sviluppo, staging e live. Prima, il codice del sito viene scritto su un sito di sviluppo, poi viene trasferito su un sito di staging per la valutazione della qualità (quality assessment - QA), e infine, il sito live viene aggiornato per tutti gli utenti.

Sito di sviluppo

Il sito di sviluppo è un ambiente di test dove gli sviluppatori scrivono codice e danno vita alle idee. Di solito è un ambiente locale accessibile solo al team di sviluppo. Questa fase prevede l'aggiunta di immagini, testi, video e codice per funzionalità personalizzate, come filtri di prodotto interattivi. Sebbene qui avvengano alcuni test iniziali, l'ambiente di sviluppo è solitamente grezzo.

Sito di staging

Dopo che lo sviluppo è completo, il codice viene pubblicato su un nuovo sito di staging. Questa è la tua prova generale, dove tutti i problemi vengono risolti come se fossi di fronte al pubblico. I siti di staging sono disponibili online, generalmente su un dominio di staging che utilizza un URL come staging.tuonome.com.

Assicurati che il tuo sito di staging non sia indicizzabile, il che significa che scoraggerai i motori di ricerca dal visualizzarlo nei risultati di ricerca. Puoi nascondere una pagina dai motori di ricerca rapidamente aggiungendo alcune righe di codice. Valuta di proteggere con password il sito di staging se contiene informazioni che non vuoi a mostrare ai clienti, come una vendita imminente.

Una volta che il sito di staging è attivo, le parti interessate lo esaminano e forniscono feedback. Il codice torna quindi al sito di sviluppo, dove gli sviluppatori affrontano eventuali perplessità e trasferiscono nuovamente le modifiche al sito di staging. Questo processo continua fino a quando tutti gli stakeholder approvano.

Siti live

Un sito live è la versione finale, visibile al pubblico, chiamata anche ambiente di produzione o sito di produzione. Qui le quinte si aprono al pubblico e gli aggiornamenti sono visibili a tutti gli utenti. Possono effettuare acquisti, interagire con i tuoi contenuti e con il tuo brand. Una volta che una modifica è live, tutti possono accedervi, motivo per cui un QA approfondito nella fase di staging è cruciale.

Perché utilizzare un sito di staging per il tuo negozio ecommerce?

Pubblicare un aggiornamento imperfetto può infastidire i clienti e danneggiare le vendite, quindi è particolarmente importante per gli ecommerce utilizzare siti di staging. Un sito di staging può aiutarti a:

• Testare elementi senza influenzare la user experience. Sperimenta con design e nuove funzionalità senza compromettere l'esperienza dei tuoi clienti.
• Individuare bug prima del lancio. Trova errori come problemi con il carrello, pulsanti o immagini di prodotto non funzionanti.
• Testare integrazioni senza interrompere il funzionamento del sito. Prova integrazioni di terze parti come API (interfacce di programmazione delle applicazioni) o calcolatori di spedizione senza influenzare il sito live.
• Collaborare con gli stakeholder. Invita vari team, designer e parti interessate a rivedere e collaborare sulle revisioni.
• Simulare l'esperienza utente. Vivi il sito proprio come faranno i tuoi clienti, permettendoti di trovare carenze nell'esperienza di acquisto. Si tratta di una simulazione più completa rispetto all'utilizzo di semplici file di design interattivi in uno strumento come Figma.
• Testare le prestazioni del sito web. I tuoi aggiornamenti stanno rallentando il sito? Un sito di staging ti consente di testare l'impatto sulle prestazioni tecniche (che possono anche influenzare il posizionamento nei risultati di ricerca organica).

3 modi per creare un sito di staging su Shopify

1. Duplica il tuo tema
2. Crea un development store
3. Usa un'app

I siti web standard di Shopify non includono un sito di staging, quindi dovrai crearne uno. Ci sono tre modi per farlo:

1. Duplica il tuo tema

Questo è il modo più semplice per creare un ambiente di staging con un piano standard di Shopify. È un processo di configurazione rapido che richiede solo pochi clic. Non è necessario installare app di terze parti poiché il tuo ambiente di staging sarà integrato nella dashboard di Shopify.

Ecco come creare un sito di staging in Shopify duplicando il tuo tema:

1. Vai su Negozio online > Temi nella tua dashboard di Shopify.

2. Sotto Tema attuale > Azioni, seleziona Duplica.

3. Ora hai una copia identica del tuo tema live. Modificala liberamente senza che ciò influenzi il sito live. Puoi cliccare su Anteprima per generare un'istanza dello staging.

4. Una volta terminati i test, puoi apportare le modifiche sul tuo sito attivo.

Questa opzione è la migliore per modifiche di design come aggiustamenti di layout o nuove sezioni di pagina. Tuttavia, non fornisce un ambiente di test per integrazioni o modifiche funzionali. Tieni anche presente che dovrai aggiungere manualmente gli elementi che hai già inserito nel tuo sito esistente.

2. Crea un development store

Questo metodo richiede di creare un nuovo account partner Shopify, che ti consente di costruire un negozio completo per i test. Gli account partner sono progettati per sviluppatori, designer e agenzie che costruiscono e gestiscono negozi per i clienti. Sono gratuiti e ti danno accesso a un development store, consentendoti di replicare tutto ciò che riguarda il tuo sito principale (compreso il design e le funzionalità del sito) in un ambiente privato.

Ecco come creare un sito di staging utilizzando un development store:

1. Registra un account partner Shopify.

2. Vai su Negozi > Crea negozio.

3. Seleziona Sviluppo come tipo di negozio.

4. Dagli un nome come “staging-tuonome” in modo da poterlo facilmente differenziare dal tuo negozio live.

5. Aggiungi prodotti, installa il tuo tema e configura tutte le impostazioni per rispecchiare il tuo negozio attivo.

Ora puoi simulare l'intera user experience senza rischi per il tuo vero sito. Questa è la migliore opzione per modifiche funzionali, inclusi codice personalizzato o integrazioni di terze parti. Sebbene i development store siano gratuiti per i test, hanno alcune limitazioni. Ad esempio, puoi installare solo app gratuite e compatibili con i partner e puoi generare solo etichette di spedizione di prova.

Se desideri testare app aggiuntive o creare etichette di spedizione funzionali, puoi impostare un nuovo negozio a pagamento su un piano Basic. Proprio come se avessi duplicato il tuo tema, dovrai copiare manualmente gli elementi del tuo sito web aggiunti sul tuo sito di staging.

3. Usa un'app

Alcuni strumenti di staging come Duplify (che offre un piano gratuito limitato) ti consentono di creare un ambiente di staging che replica l'intero sito. Puoi quindi testare pagine e prodotti esistenti prima di andare live. Rewind Staging è un'app simile (con una prova gratuita) che include backup del tema, così puoi tornare alla versione precedente se qualcosa va storto. Basta andare nel Shopify App Store e cercare app di staging per iniziare.

Ecco come creare un sito di staging utilizzando Rewind Staging:

1. Installa Rewind Copy sul tuo sito live dal Shopify App Store.

2. Scegli il tuo negozio live come Sorgente.

3. Installa Rewind Copy sul tuo development store.

4. Scegli il tuo development store come Destinazione.

5. Copia la chiave dal tuo negozio Sorgente al tuo negozio Destinazione per associare i negozi.

6. Scegli le informazioni da copiare sul sito di staging, in modo che rispecchi il tuo sito live.

7. Controlla continuamente le modifiche per mantenere la sincronizzazione tra entrambi i negozi.

8. Clicca su Inizia attività per avviare la copia.

A volte, duplicare manualmente il tuo sito web può comportare pezzi mancanti, quindi utilizzare un'app di staging può garantire una copia esatta, soprattutto se hai un tema complicato.