Staging & Production Shopify Themes with Theme Kit

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.

On Shopify

• 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 — 123456789123
• Your Theme - Development — 123456789456

Local development changes

In 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.

Your .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

Commands

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

Previewing things

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.

https://yourshopifystore.com/?preview_theme_id=123456789456

Now you have a staging version of your Shopify theme, and a single command to deploy that to production.

Happy theming!