This is a simple step-by-step workflow to set up a Shopify Development Environment from the command line. The idea is to keep a similar workflow to other dev environments. A similar workflow would mean managing the theme files locally by making changes and committing those changes with Git while running a command line tool to watch for changes and automatically update the theme on the Shopify store.
This post is a brief primer on setting up your Shopify dev environment. Please check out the Shopify Partner’s docs for further details.
Basic Installation from The Command line
1. Install ThemeKit
Theme Kit is command line tool used to upload and manage files on Shopify store theme. If you have Homebrew, installed you can install Theme Kit by running the following commands:
brew tap shopify/shopify
brew install themekit
2. Create a directory
mkdir STORE-NAME-HERE
cd STORE-NAME-HERE
3. Create config-example.yml file
vim config-example.yml
4. Add the following to the config-example.yml file
development:
store: example.myshopify.com
password: add-password-in-config
theme_id: "live"
bucket_size: 40
refill_rate: 2
ignore_files:
- "*.swp"
- "*~"
- "config/settings_data.json"
5. Initialize Repo
git init
6. Create a .gitignore file
and add the following:
config.yml
config/settings_data.json
7. Copy the config-example.yml to the file Theme Kit will need
cp config-example.yml config.yml.
8. Create a private app within the Shopify store admin
This will yield a password to add to config.yml.
In Admin API Permissions, make sure the “Theme templates and theme assets” is set to Read and write
9. Now go ahead and set the store URL and password in config.yml
development:
password: ENTER-SHOPIFY-PRIVATE-APP-PASSWORD
theme_id: "live"
store: YOUR-STORE.myshopify.com
10. Next you need to pull down the theme from Shopify
theme download
Note: If you receive an error saying you cannot load any valid environments, configure the theme like this before downloading the theme:
Theme configure --password=[your-password] --store=[your-store.myshopify.com] -- example.myshopify.com password: add-password-in-config --themeid=[your-theme-id]
11. Make first commit
Once the theme is downloaded and the Git repository has been initialized, go ahead and create the first commit.
Go ahead and add all the files with:
git add --all
Then make a commit with:
git commit -m "enter your first commit message here"
From here, you can now push up your code to a repo management platform such as Github or Bitbucket
12. Lastly, you want to give Theme Kit either of the following commands to push updates to your store
Watch will start a process that will watch your directory for changes and upload them to Shopify.
theme watch
or
Upload will update all of the current file states to Shopify.
theme upload
Multiple Environment Configurations
It’s possible to create multiple environments for your Shopify store. This comes in handy, especially if you are looking to make changes in a development environment and have a separate production store to push these changes live. Each environment needs it’s own Shopify store to in order to obtain separate private app credentials. Once you create a separate store, you must update the config-example.yml file to:
SHARED: &SHARED
store: example.myshopify.com
password: test
theme_id: 'live'
bucket_size: 40
refill_rate: 2
ignore_files:
- "*.swp"
- "*~"
- "config/settings_data.json"
development:
<<: *SHARED
password: ADD_PASSWORD_HERE
store: TEST_STORE_NAME.myshopify.com
production:
<<: *SHARED
password: ADD_PASSWORD_HERE
store: LIVE_STORE_NAME.myshopify.com
Then you would specify which environment you want to watch for changes:
theme watch --env development
or
theme upload --env production
Closing thoughts
Again, this is a quick set up guide to get you up and running with the default Shopify theme. I came across a few other articles that helped me: