Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Shopify has created a new paradigm for developing shopify themes. They've created the Shopify CLI. This is great because in moving into development of Online Store 2.0 theme, one obvious issue with using themekit is that now that the templates are .json, you risk overwriting all the changes to content created in the customizer for all pages, not just the homepage anymore.

You could simply ignore all the json files, but would mean that you wouldn't have any of the theme setup changes tracked in github, and if you tried to deploy the theme again, you would have to completely reset up everything from scratch...not ideal!

The Shopify CLI allows the themes to be connected directly to Shopify from Github and allows for two way syncing. This means that client changes in the theme editor get merged into the git repo that you can then pull to your local version and every stays in sync.

It took me a little bit to wrap my head around this flow, so I'm writing it down.

Install Shopify CLI

First things first, install the Shopify CLI. I'm not going to go into this in depth because it varies depending on your setup, so here are the docs from Shopify.

Create new shopify theme and initialize in github

Now that you have it installed, you can run the theme init command in the terminal. This will create a new theme (you'll have the opportunity to name it) that is a clone of Shopify's Dawn theme.

 >> shopify theme init

Once that's done, you'll want to create a git repo and connect it to the theme you just cloned the way you normally would with any other repo.

 >> git init
 >> git remote add origin https://github.com/deartrudence/testing_cli.git
 >> git branch -M main
 >> git add .
 >> git commit -m "initial commit"
 >> git push -u origin main

Add shopify theme by connecting to github

You'll notice when you go to add a new theme in the Shopify admin, there's a new option: Connect from GitHub

Choose this option and you'll have the opportunity to choose a repo and branch from your GitHub account. You may be prompted to log in with your GitHub credentials.

Once you hit connect, you'll see a new theme created in your admin that is the name of the repo and the branch

<>/<>

log into store through CLI

You likely want to log into the shopify store that you want to develop on. In the terminal you'll want to run the login command and set the store that you're developing for. It may prompt you to login in through the browser or to choose a partner organization from the terminal.

 >> shopify login --store [[store-name]].myshopify.com

add the environment variable SHOPIFY_CLI_STACKTRACE=1

403 (ShopifyCLI::API::APIRequestForbiddenError)
	{"errors":"Unauthorized Access"}

Serve Theme Locally

Now you're all set up to start developing! To do this run the following command:

 >> shopify theme serve

You'll see this in your terminal and you can go to the local host url and see the theme. This is great for seeing your code changes, but what about configuration?

You'll see the second url down allows you to customize in the Theme Editor.

Going to that link will take you to the theme editor, but you'll notice up in the left hand corner that the theme name is a temporary development theme based on the name of the device and some random alphanumeric value (I blurred now because I don't know if it is meaningful in anyway).

This is giving you the ability to customize the local version of your theme...yay 🎉

Keep everything in sync

This is the point where I was a little confused about the whole process. If I'm doing all this configuration on the local host and my .json files weren't updating based the those changes, how do I keep everything in sync?

This is where the theme pull command comes in. What I do is open a new terminal tab and periodically run the theme pull command - this syncs my local files to the changes made in the temporary theme editor so I can make sure all the work I do doesn't get overriden.

 >> shopify theme pull

Happy theme coding 🙌