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 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
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”.
Grab the theme ID for this development theme and put it in your _config.yml.
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:
- Go to Shopify Admin > Themes, click ‘Preview’ on your development theme.
theme watch --env=development.
- Make changes, watch them update live on your development theme.
When you’re ready to upload these changes to the production store:
- Go to Shopify Admin > Themes, click ‘Preview’ on your Live theme.
theme upload --env=production.
- 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.