Local Development with Shopify CLI
If you want to implement a lot of custom code into your shopify theme, perhaps your even developing your own shopify theme from scratch then you will surely want to implement a shopify local development environment.
This approach to shopify theme development allows you to:
- Code themes using your preferred code editor.
- Keep your changes under git version control
- Live reload coding changes
Prerequisites
Install / upgrade shopify cli with homebrew
Version 3.49.5
Get Theme List
You can get the myshopify url from your list of domains ‘settings > domains’ Firstly this command will try log you in to your store. Upon success a browser window will open with some login prompts for you to complete. Then back in your terminal you will see a lovely list of all the themes on your shopify site.
I like to run the
theme list
command before I do anything as its a nice, safe command to run and it will tell you if you are logged in correctly.
1
shopify theme list --store store_name.myshopify.com
Trouble shooting login issues
If you run the shopify theme list
command and get the following error
1
2
3
4
5
6
7
8
9
10
11
12
13
You are not authorized to edit themes on
"your-shop.myshopify.com".
You can't use Shopify CLI with development stores if you only have Partner
staff member access. If you want to use Shopify CLI to work on
development store, then you should be the store owner or create a staff
account on the store.
If you're the store owner, then you need to log in to the store directly
using the store URL at least once (for example, using
"https://your-shop.myshopify.com/admin") before you log in using
Shopify CLI. Logging in to the Shopify admin directly connects the
development store with your Shopify login.
Try fix this by running a auth logout
first then re-run the shopify theme list --store store_name.myshopify.com
1
shopify auth logout
Once logged out, you can run theme list
command again. The theme list command will try log you in by way of prompting you to open a browser to login
. So hit enter
when you see the prompt
Start Local Development Enviroment
The below command is your bread and butter for local development.
it will eventually sync your local enviroment with the production enviroment. Give it some time. Its not fast to begin with.
Once the files have been synced then you can click the local address it dispays http://127.0.0.1:9292
to view your site locally. Any changes you make will be live reloaded at http://127.0.0.1:9292
1
shopify theme dev --store store_name.myshopify.com
Shopify Theme
Some other commands you might want to experiment with
1
2
3
4
5
6
7
8
9
10
11
12
13
theme check
theme delete
theme info
theme init
theme language-server
theme list
theme open
theme package
theme publish
theme pull
theme push
theme share
Integrate with GitHub
Shopify theme deployment one option is to integrate with github