Setting up a Shopify Development Environment: Part 2

This is Part 2 in “Setting Up a Shopify Development Environment”. If you haven’t read Part 1 yet, you can go back and read it now. I’ll wait.

At this point, you should have Shopify Theme Kit set up. You should have a _config.yml file that connects your local directory to your live Shopify store. You should be able to run commands like theme watch, theme update, theme download without seeing any errors.

Theme Kit environments

When I’m developing, I find it helpful to have a development environment and a production environment. Development is the place where I experiment with new ideas and build new features. Production is the place for code running on the live site.

Theme Kit offers a variety of options to customize your project’s environments. You can read about the options in the documentation.

Multiple environment workflow

In order to work in different environments, you should set up your _config.yml like this:

:api_key: 8a91f325de49da9b8bbfe31f64c0ee16
:ignore_files:
- todo
- config/settings_data.json
development:
  password: 9a91f325de49da9b8bbfe31f64c0ee15
  theme_id: "1542069208"
  store: your-shopify-store.myshopify.com
production:
  password: 9a91f325de49da9b8bbfe31f64c0ee15
  theme_id: "4516029802"
  store: your-shopify-store.myshopify.com
  timeout: 60s

In order to do this, you’ll need a development theme with its own theme_id.

Go into Shopify admin, make a copy of your live theme. Rename this new theme. I usually suffix the old title with “_dev” or “_test”.

Rename Shopify theme

Grab the theme ID for this development theme and put it in your _config.yml.

Copy theme ID from browser Address Bar

Config yml file with development theme ID

Now you can use theme commands with the --env flag. It will specify which environment (and accompanying theme_id) will be used.

At this point your workflow looks like this…

When you want to do work on your development store:

  1. Go to Shopify Admin > Themes, click ‘Preview’ on your development theme.
  2. Run theme watch --env=development.
  3. Make changes, watch them update live on your development theme.

When you’re ready to upload these changes to the production store:

  1. Go to Shopify Admin > Themes, click ‘Preview’ on your Live theme.
  2. Run theme upload --env=production.
  3. Your entire local directory will upload to Shopify, overriding your live theme’s code.

Need help with a project? We'd love to hop on board. Hire Us.

Get In
Touch

Must be a valid email address.