Shopify Theme Staging

This post is about how to create a "staging" environment for making changes to your Shopify theme. This can be useful to avoid the awful truth of having to do it _in the flesh or the painful and tedious process of modifying, previewing and publishing changes to a theme._

TL;DR

It's all about doing changes on a staging theme, pushing and pulling commits onto a production theme and then deploying your shiny new featured theme.

You going to need

• Git and a repository on GitHub
• Your main theme (production theme from now on)
• A secondary theme (staging theme from now on)
• Shopify theme gem and Ruby up and running.

Staging theme

This theme is where you are going to write your code and implement your features. This is not on production, but lives among your Shopify themes. It is supposed to be a copy or duplicate of your production theme (the current face of your store).

Creating a staging theme

As we stated, this theme should be a copy or duplicate of your production theme. You can achieve this by:

• Simply duplicating the production theme via the Shopify admin. It's pretty straighforward. The downside here is you have to pay at least Shopify Basic, which costs (about $29/month), or they won't let you duplicate the theme.

• Using Shopify Theme Gem. You can bootstrap and register a new theme, and then you will override the theme files with the production ones. Once you are done, voilá!, you have a duplicated production theme (with a different name, if you feel like).

Let's get things done

Downloading production theme

You will have to use Shopify Theme Gem to download your production theme files to your local/dev machine. You will need to create a private app because you are going to need the API key and Password and, of course, your Store name (without the http://). For this example, I created a directory called crowdint-store-production-theme added this inside

~/theme register <your API key> <your password> crowdint-store.myshopify.com

~/theme download

.

Make sure to use your API key and your password.

Now you have your production theme on your local/dev machine. Check the config.yml and notice the absence of a :theme\id_ field, this means that this are your production theme files.

IMPORTANT: Do not track config.yml file. Make sure you add it to your .gitignore file

Create a commit with these files and push it to the remote repository.

~/echo 'config.yml' > .gitignore

Bootstrapping staging theme

Create another directory outside the production theme directory for your staging theme. Inside this directory run:

~/theme bootstrap <your API key> <your password> crowdint-store.myshopify.com my-staging-theme

This will create and register a new theme using Timber. You don't need to worry about the details, just let it do its thing and wait for the files to be downloaded.

Once it has finished downloading files, check the config.yml file and look for the :theme\id:_ field. This ID is what you are going to need to setup and sync the staging theme, DON'T lose it.

The tricky part

Delete the directory you just created but make sure you have the theme id annotated somewhere.

Duplicate the production theme directory:

cp -R crowdint-store-production-theme crowdint-store-staging-theme

Inside the staging theme directory, edit the config.yml file and add the Theme_id .

Now you should have:

• One production theme directory (crowdint-store-production-theme/) with config.yml without theme_id
• One staging theme directory (crowdint-store-staging-theme/) with theme_id
• They both are linked to the same GitHub repository.

Workflow

Time to get your hands dirty. Let's say you are asked to add a text to the site footer. You can begin with running the theme watch command that will watch for changes in your staging directory and syncing those updated files to you unpublished staging theme up there in your Shopify store.

IMPORTANT: Make sure you are woking on the stage theme directory

Change the required files and save. They will be uploaded automatically, although there are other ways of syncing those files. You can preview your changes with the Shopify theme manager.

When everything looks more than OK, it is time to commit and push to the remote repository, and you are ready to deploy.

Deploying to production

It is pretty simple: you just have to go to your production theme directory, start the theme watch and simply git pull to get the latest changes.

When the files come down from the remote repository to your local repository, the local files are going to be updated and synced up to the production theme and changes will be reflected instantaneously to your front-store.

Conclusion

Shopify doesn't provide a staging environment (at least not in the way we are used to) and this is a very common question among Shopify developers. There are workarounds for this such setting up a different store and copying theme between them or simply switching from theme to 'new theme'. I find the method I just described during the post to be more simple, controllable and customizable with the power of git and Shopify Theme Gem.

Thanks for reading! Looking forward to reading your questions and criticisms.

@ingedmundo

See also:

• Shopify Theme Development – by guys at Thoughbot.

Special thanks to Adrian Castillo for his great aport to this blogpost.