What Is a Staging Site? How To Create a Staging Site

Imagine attending a Broadway musical: you see a polished production, but behind the scenes, the cast and crew have put hundreds of hours into auditions, line reads, dress rehearsals, and more. Everything you see is the result of careful preparation. 

Similarly, in web development, a staging website acts as a “dress rehearsal” for your actual website. Rather than pushing updates directly to a live website, developers use a staging site for testing and revisions until they’re ready to show their work to a live audience. 

Learn more about the benefits of using a staging site for your ecommerce store, including how to create a staging site in Shopify. 

What is a staging site?

A staging site is a private website testing environment where you can review updates or redesigns without affecting the live site. It simulates a live version of a site so developers and stakeholders can experience it as a user would if it were live.

A key goal of a staging environment is to spot flaws and make revisions or corrections. Usually, stakeholders such as marketing or executive teams are brought in at the staging process to provide feedback. Once stakeholders have thoroughly reviewed the test site and their input has been addressed, updates are pushed to the live environment.

A critical update, such as a new product image section, could hurt conversions if the site doesn’t function properly as a result of the change. By simulating the user experience—from clicking through to the product page to adding items to a cart—you can uncover and fix errors before they impact real customers.

Development vs. staging vs. live sites 

• Development site
• Staging site
• Live site

Web development takes place in three main arenas: development, staging, and live. First, code is written on a development website, then it’s pushed to a staging site for quality assessment (QA), and finally, the live site is updated for all users. 

Development site

The development site is a sandbox where developers write code and bring ideas to life. It’s usually a local environment accessible only to the development team. This stage involves adding images, text, videos, and code for custom functionalities, like interactive product filters. While some initial testing happens here, the development environment is typically unpolished.

Staging site

After development is complete, code is published to a new staging site. This is your dress rehearsal, where all kinks are worked out as if in front of a live audience. Staging websites live online, typically on a staging domain that uses a staging site URL like, staging.yourwebsitename.com. 

Be sure your staging site is not indexable—meaning you’ll discourage search engines from displaying it in search results. You can do this quickly by adding a few lines of code. Consider making the staging site password-protected if it has information you’re not ready for customers to see, such as a coming sale.

Once the staging site is live, stakeholders review it and provide feedback. The code then goes back to the development site, where developers address any concerns and push changes to the staging site again. This process continues until all stakeholders approve.

Live sites

A live site is the final, public-facing version—also called the production environment or production site. This is where the curtains open to the public and updates are visible to all users. They can make purchases, engage with your content, and interact with your brand. Once a change is live, everyone can access it, which is why thorough QA in the staging phase is crucial.

Why use a staging site for your ecommerce store?

Publishing a botched update can annoy customers and hurt sales, so it’s particularly important for ecommerce stores to use staging sites. A staging site can help you:

• Test elements without affecting the user experience. Experiment with designs and new features without degrading your customers’ experience.

• Catch bugs before public roll-out. Find errors like cart issues, non-functioning buttons, or broken product images.

• Test integrations without disrupting the site. Test third-party integrations like APIs (application programming interfaces) or shipping calculators without affecting the live site.

• Collaborate with stakeholders. Invite various teams, designers, and stakeholders to review and collaborate on revisions.

• Simulate the user experience. Experience the site just like your customers will, letting you find shortcomings in the shopping experience. This is a more complete simulation than simply using interactive design files in a tool like Figma.

• Test website performance. Are your updates slowing your site? A staging site lets you test the impact on technical performance (which can also have an impact on organic search rankings). 

3 ways to create a staging site on Shopify

1. Duplicate your theme
2. Create a development store
3. Use an app

Standard Shopify websites don’t come with a staging site, so you’ll need to create one. There are three ways to do it:

1. Duplicate your theme

This is the easiest way to create a staging environment with a standard Shopify plan. It’s a quick setup process that only takes a few clicks. You also don’t need to install third-party apps because your staging environment will be built into Shopify’s admin panel. 

Here’s how to create a staging site in Shopify by duplicating your theme:

1. Go to Online Store > Themes in your Shopify admin panel.

2. Under Current Theme > Actions, select Duplicate.

3. You now have an identical copy of your live theme. Edit it freely without affecting the live site. You can click Preview to generate a staging instance.

4. Once you're finished testing, you can make the changes on your live site. 

This option is best for design changes like layout tweaks or new page sections. However, it doesn’t provide a testing environment for integrations or functionality changes. Also keep in mind that you’ll need to manually add the elements you’ve already put on your existing site.

2. Create a development store

This method requires you to create a new Shopify partner account, which lets you build a full store for testing. Partner accounts are designed for developers, designers, and agencies who build and manage stores for clients. They’re free and give you access to a development store, allowing you to mirror everything about your main site—including the website’s design and functionality—in a private environment. 

Here’s how to create a staging site by using a development store:

1. Sign up for a Shopify partner account.

2. Go to Stores > Create Store.

3. Select Development as the store type.

4. Name it something like “staging-yourwebsite” so it’s easy to differentiate it from your live store.

5. Add products, install your theme, and configure all the settings to mirror your live store.

Now, you can simulate the full user experience without risking your actual site. This is the best option for functionality changes, including custom code or third-party integrations. Although development stores are free for testing, they have some limitations. You can only install free and partner-friendly apps and can only generate test shipping labels, for instance. 

If you want to test additional apps or create functional shipping labels, you can set up a new paid store on a Basic plan. Just like if you duplicated your theme, you’ll need to manually copy your added website elements onto your staging site. 

3. Use an app

Some staging tools like Duplify (which offers a limited free plan) let you create a staging environment that replicates your entire site. You can then test existing pages and products before going live. Rewind Staging is a similar app (with a free trial) that includes theme backups, so you can revert to the previous version if something goes wrong. Just head to the Shopify App Store and search for staging apps to get started.

Here’s how to create a staging site by using Rewind Staging:

1. Install Rewind Copy on your live site from the Shopify App Store.

2. Choose your live store as your Source Store.

3. Install Rewind Copy on your development store.

4. Choose your development store as your Destination Store.

5. Copy the key from your Source store to your Destination store to associate the stores.

6. Choose the information to copy over to the staging site, so it mirrors your live site.

7. Check Continuously for copy changes to maintain synchronization between both stores.

8. Click Begin task to start the copy.

Sometimes, manually duplicating your website may lead to missing pieces, so using a staging app can ensure an exact copy—especially if you have a complicated theme.