DEV Community

Cover image for Shopify CLI and Online Store 2.0 (with GitHub) Crash Course
iskurbanov
iskurbanov

Posted on

Shopify CLI and Online Store 2.0 (with GitHub) Crash Course

Article brought to you by Studio Klein for Working With Shopify

Check out the Full Tutorial here!

A couple months ago, I was working on a Shopify Theme and accidentally deleted the whole CSS file. Luckily for me there was a backup theme I was able to copy the CSS from but any changes or updates I made to the file was gone. This led to a painful afternoon of figuring out what CSS changes I made and a whole lot of time lost on this project. But what if I didn’t have that backup file? Then that's tens of thousands of lines of CSS I’ve lost. This is why we as developers use Git.

Git is one of the most important tools for a developer's workflow. Git helps us keep track of changes done to a file so we have records on what work has been done. In a world where I was using Git, I would’ve simply been able to recover that deleted file and save myself a whole afternoon of time and pain.

The new Shopify Online Store 2.0 updates introduced a simple GitHub integration with your Shopify Theme. Shopify has even widened the scope of the Shopify CLI to include themes.

I will be showing you how you can integrate GitHub into your Shopify theme development workflow using the new Github integration with Shopify Themes and the updated Shopify CLI.

Lets dive in:

1. Shopify Partners Account and Development Store

If you already have a Shopify Partners account and development store you can skip to step 2.

Head over to Shopify Partners and create a Partners Account.

Then click on Stores on the top left then Add store on the top right. Choose Development store as your store type and fill out the other information required and click Save. You'll then be redirected to your new store.

2. Shopify CLI Installation

You can head over to the Shopify CLI Installation page here and install the CLI based on your platform/preferred method.

Since I'm on a Mac, I'll use Homebrew and run the follow commands in the terminal

$ brew tap shopify/shopify
$ brew install shopify-cli
Enter fullscreen mode Exit fullscreen mode

Then use $ shopify version to see what version of the CLI you're on and $ shopify help to see all the list of commands available.

Screen Shot 2021-09-10 at 10.33.11 AM

2. Initializing a New Shopify Theme

We can now initialize a new theme by running the $ shopify theme init and you will the instructed to enter a name for this theme. I will be naming mine shopify-theme. The new Reference them 'Dawn' will then be cloned into your current directory. You can then $ cd into your new theme and run $ ls and you will see all of the Dawn theme folders inside.

Screen Shot 2021-09-10 at 10.50.00 AM

3. Creating a Git Repository

Head over to your GitHub account and create a new repository. I would recommend naming the repo the same name you gave your theme. In my case I will call it shopify-theme.

Screen Shot 2021-09-10 at 10.52.44 AM

4. Add Theme Files to Your Git Repository

Head back to the terminal and in the theme directory you just initialized and run $ git init to create a new repository in that directory. Then run $ git add . then $ git commit -m "First commit" to add and commit the theme folders to your new repository

Screen Shot 2021-09-10 at 11.01.30 AM

Now before we push, we must add the GitHub repository as a remote repository with $ git remote add origin <REMOTE REPOSITORY URL> then we can push using $ git push -u origin main

Screen Shot 2021-09-10 at 11.00.54 AM

You can get your remote repository url from your Repository from GitHub.

Screen Shot 2021-09-10 at 10.58.52 AM

After you have pushed to GitHub, your GitHub repo will now have all your theme files.

Screen Shot 2021-09-10 at 1.10.00 PM

5. Connecting Your Repository to Shopify

We can now head back to our Shopify Admin Dashboard and navigate to Online Story > Themes. From there, scroll down to Theme library and click Add theme > Connect from GitHub.

Screen Shot 2021-09-10 at 1.11.41 PM

You will be prompted to login to GitHub and once logged in your account will be connected. From there select the repository you made on GitHub and click connect. The repository will now be added to your Theme Library.

Screen Shot 2021-09-10 at 1.20.47 PM

This integration works 2 ways to sync data. We can push commits through GitHub, but also when we make a change on the theme through Shopify, Shopify will make a commit to our repository. We can see this by opening the code editor on Shopify by click Actions > Edit Code and open the theme.liquid file in the layout folder. Just above the opening main tag input <h1>Hello World</h1>. Click Preview to see if the change was made.

Screen Shot 2021-09-10 at 1.32.57 PM

Screen Shot 2021-09-10 at 1.35.32 PM

Screen Shot 2021-09-10 at 1.38.06 PM

Now go back to your repository on GitHub, and you can see that Shopify made a commit to your repository.

Screen Shot 2021-09-10 at 1.37.12 PM

6. Starting a Development theme through the Shopify CLI

It's great that we can sync data both ways, but if we made a change locally, we would have to commit and push those changes onto GitHub to see them on our Shopify theme. This is where the Shopify CLI comes in. We can create a temporary Development Theme that will allow us to preview changes we made locally to your Shopify Theme but not make any changes to the actual theme until you push your code on GitHub.

Since Shopify made a change to our repository, let first grab those changes by running $ git pull. Once those changes have been pulled run $ shopify login --store <DOMAIN> where <DOMAIN> would be your Shopify store URL. A Window will popup to login to your Shopify Partners account. Once logged, on your terminal it will now tell you what store your are logged into and which partner organization.

Screen Shot 2021-09-10 at 1.56.56 PM

From here we can run $ shopify theme serve and this will create our Development theme. Open up the code in VSCode (or any text editor of your choice) and open the theme.liquid file and remove the <h1>Hello World</h1> code we added in the previous step, you can see the changes live on the localhost url.

Screen Shot 2021-09-10 at 2.06.58 PM
Screen Shot 2021-09-10 at 2.19.04 PM

Once you're happy with your changes, add and commit them to GitHub and they will apply to the theme on Shopify.

Screen Shot 2021-09-10 at 2.20.33 PM

Congratulations! You now have all the tools needed to integrate GitHub into your Shopify theme development workflow!

There are a lot of other tools the Shopify CLI can do but for this article I just wanted to cover utilizing the development theme in a theme development workflow.

Other Shopify CLI tools:

  1. Theme Check - A linter for Liquid and JSON within your theme
  2. Publish themes from the command line
  3. Delete themes
  4. Pull and push changes from and to other themes
  5. Package themes into a ZIP file that can be uploaded to Shopify

Git Repo: https://github.com/JoshTag/shopify-2.0-dev-course
Live Demo: https://moo-vintage-thrift.myshopify.com/

Check out the Full Tutorial here!

Discussion (0)