Qu’est-ce qu’un site staging ? Comment créer un site de test

Imaginez assister à une comédie musicale à Broadway : vous assistez à une production soignée, mais en coulisses, l'équipe et les artistes ont consacré des centaines d'heures aux auditions, aux lectures de texte, aux répétitions générales, et bien plus encore. Tout ce que vous voyez est le résultat d'une préparation minutieuse.

C’est la même chose dans le domaine du développement web, un site staging agit comme une « répétition générale » pour votre site réel. Plutôt que de pousser des mises à jour directement sur la version en ligne, les développeurs utilisent un site staging pour tester et réviser, jusqu'à ce qu'ils soient prêts à présenter leur travail à un public en direct.

Découvrez les avantages d'utiliser un site staging pour votre boutique en ligne, y compris comment en créer un sur Shopify.

Qu'est-ce qu'un site staging ?

Un site staging (aussi nommé site de préproduction, ou même “preprod” en abrégé) est une copie privée de votre site web, utilisée pour tester des modifications sans impacter la version en ligne. Il reproduit fidèlement l’environnement réel afin que vous puissiez visualiser et valider les changements comme si le site était déjà accessible au public.

L’objectif principal de cet environnement de test est d’identifier d’éventuels bugs ou problèmes d’affichage, et de les corriger avant publication. Les équipes techniques, marketing ou décisionnelles peuvent ainsi consulter le site staging, donner leur avis, et valider les ajustements nécessaires.

C’est particulièrement utile pour des mises à jour sensibles, comme l’ajout d’une nouvelle galerie produit ou la refonte d’une page d’accueil. Sans test préalable, ces changements pourraient impacter vos performances (vitesse, SEO, taux de conversion…). La version staging permet de simuler le parcours client complet — depuis la navigation jusqu’à l’ajout au panier — afin de garantir une expérience fluide avant la mise en ligne.

Sites de développement / staging / production

Le développement web passe généralement par trois environnements distincts : développement, préproduction et production. Le code est d’abord écrit et testé dans un environnement de développement, puis transféré sur un site staging (ou préproduction) pour des vérifications qualité (QA). Une fois validé, il est déployé sur le site en ligne, accessible à tous les utilisateurs.

Site de développement

Le site de développement est un bac à sable où les développeurs écrivent du code et concrétisent des idées. Il s'agit généralement d'un environnement local accessible uniquement à l'équipe de développement. Cette étape implique l'ajout d'images, de textes, de vidéos et de code pour des fonctionnalités personnalisées, comme des filtres de produits interactifs. Bien que certains tests initiaux aient lieu ici, l'environnement de développement est généralement brut.

Site staging (préproduction)

Une fois le développement terminé, le code est publié sur un nouveau site staging. C'est la répétition générale, où tous les détails sont peaufinés comme ils le seraient devant un public en direct. Les sites staging sont généralement mis en ligne, sur un domaine de préproduction utilisant une URL de type staging.votrenomdedomaine.com.

Assurez-vous que votre site staging n'est pas indexable, ce qui signifie que vous découragez les moteurs de recherche de l'afficher dans les résultats de recherche. Vous pouvez le faire rapidement en ajoutant quelques lignes de code. Envisagez de protéger par mot de passe le site staging s'il contient des informations que vous n'êtes pas prêt à montrer aux clients, comme une vente à venir.

Une fois le site staging en ligne, les parties prenantes l'examinent et fournissent des retours. Le code retourne alors au site de développement, où les développeurs traitent les problèmes éventuels et poussent à nouveau les modifications vers le site staging. Ce processus se poursuit jusqu'à ce que toutes les parties prenantes approuvent.

Sites en production

Un site en production est la version finale, visible au public, également appelée environnement de production ou site en ligne. C'est là que le rideau s'ouvre au public et que les mises à jour sont visibles par tous les utilisateurs. Ils peuvent effectuer des achats, interagir avec votre contenu et avec votre marque. Une fois qu'un changement est en ligne, tout le monde peut y accéder, ce qui rend essentiel la phase de QA approfondie lors de la phase de préproduction.

Pourquoi utiliser un site staging pour votre boutique en ligne ?

Publier une mise à jour bâclée peut agacer les clients et nuire aux ventes, il est donc particulièrement important pour les boutiques en ligne d'utiliser des sites staging. Un site staging peut vous aider à :

• Tester des éléments sans affecter l'expérience utilisateur. Expérimentez des designs et de nouvelles fonctionnalités sans dégrader l'expérience de vos clients.
• Détecter les bugs avant le déploiement public. Trouvez des erreurs telles que des problèmes de panier, des boutons non fonctionnels ou des images de produits cassées.
• Tester des intégrations sans perturber le site. Testez des intégrations tierces comme des API (interfaces de programmation d'applications) ou des simulateurs d'expédition sans affecter le site en ligne.
• Collaborer avec les parties prenantes. Invitez diverses équipes, designers et parties prenantes à examiner et collaborer sur les révisions.
• Simuler l'expérience utilisateur. Parcourez le site comme le ferait un client pour repérer les éventuels points de friction dans le parcours d’achat. Le site staging offre une simulation bien plus réaliste que des maquettes interactives dans des outils comme Figma.
• Tester la performance du site web. Vos mises à jour ralentissent-elles votre site ? Un site staging vous permet de tester l'impact sur les performances techniques (ce qui peut également avoir un impact sur le classement dans les recherches organiques).

3 façons de créer un site staging sur Shopify

Les sites Shopify standard ne sont pas livrés avec un site staging, vous devrez donc en créer un. Il existe trois façons de le faire :

1. Dupliquer votre thème

C'est la manière la plus simple de créer un environnement de préproduction avec un plan standard Shopify. C'est un processus de configuration rapide qui ne nécessite que quelques clics. Vous n'avez pas besoin d'installer des applications tierces, car votre environnement staging sera intégré au panneau d'administration de Shopify.

Voici comment créer un site staging sur Shopify en dupliquant votre thème :

1. Allez dans Boutique en ligne > Thèmes dans votre panneau d'administration Shopify.

2. Sous Thème actuel > Cliquez sur “...”, puis sélectionnez Dupliquer.

3. Vous avez maintenant une copie identique de votre thème en ligne. Modifiez-la librement sans affecter le site en ligne. Vous pouvez cliquer sur Prévisualiser pour générer une instance de préproduction.

4. Une fois vos tests terminés, vous pouvez apporter les modifications sur votre site en ligne.

Cette option est idéale pour des changements de design comme des ajustements de mise en page ou de nouvelles sections de page. Cependant, elle ne fournit pas un environnement de test pour les intégrations ou les changements de fonctionnalité. Gardez également à l'esprit que vous devrez ajouter manuellement les éléments que vous avez déjà mis sur votre site existant.

2. Créer une boutique de développement

Cette méthode consiste à créer un compte partenaire Shopify, qui permet de créer une boutique complète dédiée aux tests. Les comptes partenaires sont conçus pour les développeurs, designers et agences qui gèrent des boutiques pour leurs clients. Ils sont gratuits et donnent accès à une boutique de développement : un environnement privé où vous pouvez reproduire à l’identique le design et les fonctionnalités de votre site principal.

Étapes pour créer un site staging via une boutique de développement :

1. Créez un compte partenaire sur le site de Shopify.
2. Rendez-vous dans l’onglet Boutiques > Créer une boutique.
3. Choisissez Développement comme type de boutique.
4. Donnez-lui un nom distinctif, par exemple staging-nomboutique, pour éviter toute confusion avec la boutique en ligne.
5. Ajoutez vos produits, installez votre thème et configurez les paramètres pour reproduire votre site principal.

Vous pourrez ainsi simuler toute l’expérience utilisateur sans prendre le moindre risque sur votre site réel. Cette méthode est idéale pour tester des modifications fonctionnelles complexes, comme du code personnalisé ou des intégrations avec des apps tierces.

💡 À noter :
Les boutiques de développement sont gratuites, mais comportent certaines limitations. Par exemple, vous ne pouvez utiliser que des applications gratuites ou compatibles avec les partenaires, et vous ne pouvez générer que des étiquettes d’expédition fictives.

Si vous avez besoin de tester d’autres apps ou de créer de vraies étiquettes, vous pouvez créer une nouvelle boutique payante avec l’offre Basic. Dans ce cas, comme pour un duplicata de thème, vous devrez reproduire manuellement vos contenus et paramètres sur le site de test.

3. Utiliser une application

Certains outils de préproduction comme Duplify (qui propose un plan gratuit limité) vous permettent de créer un environnement de préproduction qui réplique l'ensemble de votre site. Vous pouvez ensuite tester les pages et produits existants avant de passer en ligne. Rewind Staging est une application similaire (avec un essai gratuit) qui inclut des sauvegardes de thème, vous permettant de revenir à la version précédente si quelque chose ne va pas.

Il vous suffit de vous rendre sur le Shopify App Store et de rechercher des applications de préproduction pour commencer.

Voici comment créer un site staging en utilisant Rewind Staging :

1. Installez Rewind Copy sur votre site en ligne depuis le Shopify App Store.

2. Choisissez votre boutique en ligne comme boutique source.

3. Installez Rewind Copy sur votre boutique de développement.

4. Choisissez votre boutique de développement comme votre boutique de destination.

5. Copiez la clé de votre boutique source vers votre boutique de destination pour associer les boutiques.

6. Choisissez les informations à copier sur le site staging, afin qu'il reflète votre site en ligne.

7. Vérifiez en continu les modifications de copie pour maintenir la synchronisation entre les deux boutiques.

8. Cliquez sur Commencer la tâche pour lancer la copie.

Dupliquer manuellement votre site peut parfois laisser passer des éléments importants. En utilisant une application dédiée à la préproduction, vous vous assurez d’obtenir une copie fidèle de votre boutique — un vrai plus si vous utilisez un thème complexe ou des fonctionnalités personnalisées.