How to Set Up a Shopify Staging Site

Setting up a Shopify staging site is a great way to test new themes & changes to your store and iron out any bugs in your code before you go live with changes to your site. In this article, we’ll walk you through all of the steps to set up a staging site for your Shopify store. We’ll also show you how to use the Shopify development tools to help make the process easier.

What is site staging for Shopify?

If you’re a seasoned developer, you presumably already know what a Shopify staging site is. But if you’re new, maybe you’re not yet familiar with how it works. Site staging for Shopify is the process of creating a duplicate of your live Shopify store so that you can test changes to the site before making them live. This is a valuable tool for merchants who want to experiment with new designs, products, or features without affecting their live site.

Changing your published theme in the Shopify admin is dangerous. Between making modifications, testing them, and fixing them, your customers (or your client’s customers) may experience bugs on the website. That’s why you need experienced developers to take care of site staging for you.

After making changes, a developer’s job is to test, and test, and test their work before putting it live.

Then, the developers send the final changes for the merchant to review. Once the merchant approves the changes, the site goes live with its new changes!

To recap, the process looks like this:

• Developers work on changing the old site by working on development sites.
• After testing, the developers apply the changes to the staging site for the merchant’s final approval.
• The merchant reviews and either approves or rejects the changes.
• If rejected, the developers address the feedback and make changes.
• If approved, the developers apply the changes to the published site and update it.
• Developers never change a published theme. To ensure a stable and bug-free (or as close to it!) site, the process remains development > staging > publish.

Now that you know what site staging is, let’s examine why you might want to stage your site.

What do you want to stage?

Conceptually, we can think of a Shopify store in two parts. You have the following:

1. data consisting of products, collections, pages, blog articles, images, and more
2. the theme and its configuration

When deciding what you want to stage, first think about why.

Errors in your data can lead to catastrophic problems with your store, from incorrect pricing to bulk deletes, and more. And bugs in your theme and its configuration are also harmful if customers can’t order products.

Having a single staging environment for both your shop’s theme and its data could slow your workflows down and confuse your team. That’s why it’s important to have two staging environments: our recommendation at PluginUseful is to have a staging environment for both your data and theme.

A staging environment should have up-­to-date data, but it shouldn’t be used to test that data. Instead, it should be used to test your theme. You should test the theme only in a staging environment that way, you can find errors without breaking your main website.

A wishlist for your Shopify staging site environment

Setting up a clean staging and production environment for Shopify presents some unusual challenges.

Before we get started, let’s think about how we want it to work.

Git

There are three branches:

• Master branch – the live Shopify store www.pluginuseful.com
• Staging branch – staging.pluginuseful.com
• Feature branch – for local development

A wrench in your workflow

Shopify is distinct from most software because the code and configuration can change by anyone who has access to the admin.

With admin access, someone on the team can install an app or customize the theme, or even (the horror!) edit the theme code.

We can’t just have our git repository as the source of truth that “master” equals “production.”

Theme settings

Some workflow systems say you don’t need any theme settings when developing.

However, this means we can’t use the theme settings in our dev and staging environments, making them out of sync with production.

So, we must ensure that we can change the theme settings for both production and development.

Apps

Apps can get out of control because they can change the theme’s functionality. But, plug-ins provide shop owners with a way to add extra features to their websites.

We want to allow apps to do their thing, so we keep that in mind when changing our git repository.

Rogue developers

While everyone on your dev team will likely follow your dev workflow and never use the Shopify theme editor, you can’t count on other collaborators to always do the same.

Your client or someone else on your team might hire a developer, designer, or marketer for a small task.

They’re just going to open up their live theme, edit their code, and be done. It would be unwise to overwrite their work.

Real-world Shopify development workflow

We’ve found this approach to be an efficient and reasonable one, benefiting everyone involved.

How to Setup a Shopify Staging Site

1. First, set up a git repo on your hosting provider of choice like GitLab.

Beanstalk is a time-saving application that allows us to deploy changes from Git to our Shopify stores automatically.

The free plan covers only one deployment, but ideally, we want two: production and staging.

2. Next, set up Beanstalk to pull your current live theme into your git repository.

3. Create a new deployment in Beanstalk to automatically deploy changes to your live Shopify theme whenever the master changes.

4. Duplicate your theme in your Shopify admin, and name the copy Staging.

5. In git, create a branch off of master: staging.

6. Set up Beanstalk to deploy to the Staging theme copy whenever your staging branch changes.

7. If you haven’t already, set up your local development environment using Slate.

We recommend using development shops created in your Shopify Partner Admin to develop.

And now you’re ready to develop!

This is what your development workflow might look like:

1. Take a branch from the master shiny-new-feature.
2. Develop locally using Slate.
3. Once you complete the dev and dev test, create a pull request to master.
4. Merge your shiny-new-feature branch with the staging branch.
5. In your Shopify admin, download your production theme.
6. Change your branch to master.
7. To commit any changes directly to master so they also reflect in Git, copy the contents of the production’s theme zip into this folder, overwriting existing files. Note: Commit any changes directly to master by adding a descriptive comment (“Installed slideshow app”).
8. Merge the master branch into the staging branch.
9. When you push changes to the development branch, they automatically deploy to the staging theme on Beanstalk.
10. To view staging, go to your Shopify theme admin. Then, click Actions. Then, Preview.
11. Test and fix.
12. When staging is ready to deploy and depending on how much time elapsed, you may want to run steps 5-9 again, depending on how much time elapsed.
13. Approve the pull request and merge it into master.
14. Beanstalk deploys, and your change is live!

We also have a video on how to set up a Shopify staging site here: 

Frequently Asked Questions About a Shopify Staging Site

Does Shopify have staging?

Yes, you can stage your Shopify store. Set up a git repo on your hosting provider of choice like GitLab. We recommend using Beanstalk as you can automatically deploy changes from Git to your Shopify store.

What is a staging platform?

Staging your Shopify store is the process of creating a replica of your live Shopify site so that you can test out changes before they go live. It’s a great way to experiment with changes to your site without committing to the changes.

How do I migrate a Shopify staging site to live?

Once you’re ready to go live, approve the pull request and merge it into master. Beanstalk deploys the changes, and they go live.

Why should I stage my Shopify site?

Site staging is necessary to ensure that any site changes work correctly before the changes deploy live. Before deploying life, you can fix any bugs or issues, so they never affect the customer.

Conclusion

Shopify offers a great way to set up a staging environment for your store. This allows you to test new features, changes, and updates before going live on your site. By setting up a staging environment, you can help ensure that your store runs smoothly and without glitches.