Set Up a Modern Shopify Online Store 2.0 Workflow with Shopify CLI
Tags: shopify, cli, ecommerce
Published: 2022-04-22 01:46:59

In this post, I'll walk you through setting up a modern [Shopify Online Store 2.0](https://www.shopify.ca/partners/blog/shopify-online-store) workflow using the [Shopify CLI](https://shopify.dev/apps/tools/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](https://www.youtube.com/watch?v=E1XA8yxhSII&ab_channel=ShopifyDevs) 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](https://partners.shopify.com/signup).

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](https://www.ruby-lang.org/en/documentation/installation/). 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](https://shopify.dev/apps/tools/cli/installation) 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](https://github.com/Shopify/dawn)!

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](https://github.com/new) 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](https://github.com/Shopify/starter-theme/blob/master/.gitignore) 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](https://github.com/Shopify/shopify-cli/issues/1332) 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:

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

Update it to this:

```css
#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:

```css
* {
  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!