Staging & Production Shopify Themes with Theme Kit
How I manage Shopify theme development
Shopify has a library called Theme Kit, which lets you use your local environment to build theme that then deploy to Shopify and lat yo preview on their infrastructure. Most tutorials will guide you in setting this up akin to mid 2000's development where you FTP every change to the server and view the changes on the live site.
The trouble with this comes when you want to work on something that will take more than 2 minutes, and don't want to interrupt the live site and potentially cause issues with people trying to purchase stuff. You wouldn't change the wheel on a moving car.
Thankfully, Theme Kit is configurable and there's a few ways to drastically improve this process.
There's a little bit of legwork to get started, but once done, it's simple.
- Navigate to the Themes section and create a duplicate of the current live theme
- Rename the live theme to
Your Theme - Production
- Rename the new duplicate to
Your Theme - Development(To help differentiate)
- Hit [Customise] on the Production theme, and copy the numbers in the URL. This is the theme ID.
- And do the same for the Development theme.
At this point you should have 2 copies of the same theme, and an ID for each version of that theme.
Your Theme - Production—
Your Theme - Development—
Local development changes
config.yml, set development and production environments.
development: password: a1b2c3d4 theme_id: "1234" store: mystore.myshopify.com ignores: - themekit_ignores # Ignores files in ./.themeignore production: password: a1b2c3d4 theme_id: "1234" store: mystore.myshopify.com ignores: - themekit_ignores # Ignores files in ./.themeignore
Of the Commands section below, one deploys all files whether they have changed or not, so we need to make sure that any files we don't want synced are ignored. For example,
config/settings_data.json caused me some headaches (it wiped all custom settings fields), so that's definitely important to ignore.
.themeignore file should look something like this, depending how your theme's built:
.DS_Store node_modules package-lock.json package.json gulpfile.js config/settings_data.json
The day-to-day work involves running
gulp and the below command in another shell tab.
# Upload changes to the development theme theme watch --env=development
When I'm ready to deploy all changes, I run
gulp build, and the below:
# Deploy changes to production theme theme deploy --allow-live --env=production
All fo this is great, but if there's no way to preview the changes, what's the point?
Shopify lets you preview any theme installed on your site. By knowing the theme ID, you san skip the step of needing to go into Shopify and opening the preview every time you need it.
Now you have a staging version of your Shopify theme, and a single command to deploy that to production.