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._
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.
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.
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.
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.
- Shopify Theme Development - by guys at Thoughbot.
Special thanks to Adrian Castillo for his great aport to this blogpost.