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.

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

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

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

shopify theme dev --store store_name.myshopify.com

Shopify Theme

Some other commands you might want to experiment with

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