Go Back

Safely Modify a Shopify Website with this Staging Workflow

Author: Ben Bozzay

The first glorious mistake I made as a junior web-developer occurred when I implemented a simple change to a client’s live website.

I was the world’s biggest idiot for about 5 minutes after a basic syntax error caused php error codes to appear all over my client’s website.

The owner, who happened to be browsing at that very moment, frantically called me.

We’ve been hacked, Ben! The whole website is down.

I quickly fixed my mistake and assured my client that I was the alleged hacker. The Russians weren’t at fault this time.

Appearing sloppy and incompetent is bad for business, so it’s a standard development practice to use a staging website to test changes on a copy of the live website before pushing them live.

The simple changes are often the most catastrophic. For example, Amazon Web Services experienced a massive outage due to a typo.

When working on a client’s Shopify website, always stage template changes.

Some developers use a separate Shopify development website to stage changes, then manually export/import the changes to the live Shopify store.

There’s a simpler and faster way to stage and push changes live in Shopify.

Simple Staging in Shopify

Shopify uses theme previews as a way to give website managers a simple way to make changes without impacting the version of the website that customers see.

A really simple way to test changes without severely overcomplicating the development process is to use the preview theme and cloning features.

The workflow is actually really easy.

Create a staging theme

  1. In the Shopify admin panel, navigate to where you installed your theme (online store > themes).
  2. Click the three dot menu button for your active theme.

  1. Duplicate the theme.
  2. Wait a minute and your copied theme will show up as “Copy Of Your theme name.”

You’ve just created an exact replica of your live website. You could think of this as your staging site.

Working on a staging theme

Edit the HTML/CSS of your staging theme as you normally would, but make sure you don’t publish the theme yet.

View the changes you’ve made on the staging theme by clicking the theme preview button.

You’ll know you are viewing the staging theme because the theme preview bar should be fixed at the bottom of the window.

Pushing changes from stage to live

After you save your changes in the HTML/CSS editor, publish the staging theme.

  1. Navigate back to admin/themes
  2. Publish your staging theme
  3. Rename the old version of the theme as “Backup-Date” to easily find the old version of your website.

That’s it. It’s a simple process that will errors caused by careless changes. Additionally, your workflow doesn’t require additional effort.

Follow me on twitter https://twitter.com/benbozzay