Set Up a Modern Shopify Online Store 2.0 Workflow with Shopify CLI

In this post, I'll walk you through setting up a modern Shopify Online Store 2.0 workflow using the Shopify CLI. We'll essentially be creating themes off of branches from a GitHub repo! If that sounds exciting to you, or you want to start learning a bit about Shopify theme development, then let's get started!

Prerequisites

First, I'd highly recommend watching this YouTube video on the ShopifyDevs channel if you want to get up to speed with Shopify Online 2.0 and all of it's features.

After that, you'll need to create a Shopify Partners account. You can sign up for an account here.

Next, we'll need to install the Shopify CLI. But before we do that, we need to install Ruby first. Instructions for installing Ruby can be found here. Once you have Ruby installed, run the command ruby -v to make sure installation was successful. You'll see a version number appear if it was.

After that, you can then follow the instructions here to install the Shopify CLI. Similarly, you can run the command shopify version to make sure installation was successful. Again, you'll see a version number appear if it was.

Once you've got those installed, you're ready to get started!

Shopify Store Setup

Once you are in your Shopify Partners dashboard, click Stores, then Add Store. For a quick setup:

• Click Development Store
• Enter a Store Name and password
• Select I'm just playing around for Store purpose

Now simply wait for the store setup to complete.

Once you are in the store admin, click Online Store. Here you should see Dawn as the Current theme. Dawn is now the default theme for OS 2.0 stores, and is actually open source!

Next, click Actions, and then click Download theme file. A popup will appear and say "Your theme files will be emailed to [YOUR-EMAIL-ADDRESS].". Click Send email. Go to your email, and click on the link "Your theme export is ready to download." link, and a .zip folder should be downloaded. Unzip the folder, and move the project to wherever you store your projects.

GitHub Setup

Go here to create a new repo. Then in your terminal, cd into the directory where you moved the theme files into, and open it in your text editor of choice

At the root level, create a .gitignore and README file:

touch .gitignore README.md

In the .gitignore file, add the code listed here to it as a starting point. In the README add any necessary info there, such as a main heading and some quick body text.

Next, run through all the git commands as shown in the GitHub page:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/[YOUR_GITHUB_USERNAME]/[REPO_NAME].git
git push -u origin main

After that, go back to Shopify Admin. On the Themes page in the admin, scroll down to the Theme library section. Once there, click Add theme, and then select Connect from GitHub. Click Login to GitHub, choose your Shopify account, and click Authorize Shopify. If you cannot login and / or see a warning, simply logout and then login into the Partners dashboard again.

Select your GitHub account, and install Shopify if needed and give access to the repo, and then click Install. Enter in GitHub password if prompted.

Next, select your GitHub account from the dropdown, and then select the repo. We only have a main branch at this point, so you should only see main listed. Click Connect, and you should see the theme being added.

On this newly added theme, click Actions, then click Publish, then click Publish again in the popup. Now the published theme will be updated with all the latest commits on the main branch!

Local Development

To get started, use the Shopify CLI to login and select your account in the browser once the tab opens:

shopify login --store [STORE_NAME].myshopify.com

You can then run shopify whoami to confirm the login was successful.

To start a local development server, run the command: shopify theme serve. If you are not able to login and / or see this:

ERROR: You are not authorized to edit themes on online-store-2-0-learning.myshopify.com.

Try the following:

• Logout of all Shopify accounts (both in the browser and in the CLI)
• If your partner account AND personal account use the same email, try clicking on "Login with different account" - Clear browser cache
• See this GitHub issue for other recommendations

And as a quick side note, once you are able to get the local development server up and running, you can open a new tab in your terminal check for any obvious linting or performance issues by running the command: shopify theme check

Making a Simple Change

In your text editor, open the file assets/base.css. Scroll down to around line 2185 and you should see this:

#shopify-section-header {
  z-index: 3;
}

Update it to this:

#shopify-section-header {
  background-color: transparent; /* this will do nothing, just making sure the workflow is working */
  z-index: 3;
}

Commit and push the change by running the command:

git commit -am 'simple change to header'
git push

Go back to the Store Admin, and click on View your store. Open dev tools and inspect the element #shopify-section-header, the background-color should be there!

Realistic Workflow

Now, it's really bad practice to work on the main branch / published theme as you don't want to push changes without being able to preview them first. Imagine you are working on a store for a client, and push changes to the main branch without getting their approval first!

So, to avoid any possible issues, we'll now setup the following:

• Create a new staging branch and push this branch up to GitHub
• Create a new theme based off the staging branch in the Theme Admin
• Make any changes on a new branch, such as feature/... or bug-fix/...
  • It's common when working on teams to prefix branch names this way
• Create a PR to merge that branch into staging
• We preview the changes on the staging theme
• If we like the changes, we then merge staging into main

Full chain of commands to create a new staging branch, switch over to it, and push it up to GitHub:

git branch staging
git checkout staging
git push --set-upstream origin staging

To create a new theme based off this branch in the Theme Admin, scroll down to the Theme library section. Click Add theme, then Connect from GitHub. Select your GitHub account in the dropdown, and the repo. You should now see a staging branch listed. Click Connect, and wait for the theme to finish setting up.

Then, make any changes on a new branch, such as feature/... or bug-fix/.... We'll make a very obvious change: changing all text to red!

Create a new branch, switch to it, and push the branch up to GitHub:

git branch feature/red-text
git checkout feature/red-text
git push --set-upstream origin feature/red-text

Open assets/base.css, scroll down to the very bottom, and add this:

* {
  color: red;
}

Commit and push the change:

git commit -am 'changed all text color to red'
git push

Go back to Store admin, and on both the main and staging themes, click Actions, and then click Preview. You should NOT see red text color, which is correct!

Back in GitHub, open a PR to merge the feature/red-text branch into staging. You should be able to automatically merge, so click on Merge pull request.

Back in Store admin, you should now see the /staging theme, the time for Last saved should be Just now. If not, simply refresh the page.

Click Actions, then Preview for the /staging theme. You should see all the text is now red!

Let's assume we (we being an imaginary client) like this change. Repeat the above process to merge staging into main. Now we should see the red text on the main published theme.

But of course, we don't actually want this change. So, to practice this process a bit more, simply remove the code snippet and repeat the merging process again. After merging the PRs, you can delete the feature/red-text branch both locally and remotely by running:

git checkout staging
git branch -d feature/red-text
git push origin --delete feature/red-text

You can then double check the branch was deleted by running git branch, which displays a list of the local branches for your repo.

Moving Forward

Going forward, all work should be done off the staging branch. At the start of each update / ticket / etc.:

• Switch to the staging branch: git checkout staging
• Get the latest from GitHub: git pull origin staging
• Create a branch off of staging:

git branch [NEW_BRANCH_NAME]
git checkout [NEW_BRANCH_NAME]
git push --set-upstream origin [NEW_BRANCH_NAME]

Make your changes, then commit and push to GitHub:

git add .
git commit -m 'MESSAGE_HERE'
git push -u origin [NEW_BRANCH_NAME]

Create a PR (ideally have someone review your PR if possible. If you are working by yourself, you can merge the branch into staging). Have the client review changes on the staging theme, and once approved, merge changes into main. Finally, delete the new branch locally and remotely:

git checkout staging
git branch -d feature/red-text
git push origin --delete feature/red-text

And repeat!

Here is a visual aid in case it is not clear:

main
^
|
|
staging <----------------
^           |           |
|           |           |
|           |           |
feature/... bug-fix/... update/...

I hope you enjoyed this article and found it useful. Thanks for reading!