GETTING FAMILIAR WITH THE SHOPIFY CLI AND GITHUB INTEGRATION

We wrote about the groundbreaking changes announced during Shopify Unite in our previous article. These are all really exciting and will make our life as developers easier, but it's a lot to digest and to experiment with.

This is why I decided to put aside some time every week to get familiar with the new features, by reading the documentation and building stuff. If you want, you can follow my progress in a series of articled that I will publish periodically. The first part of the article will put together a list of articles/documents to read before getting started, while in the second part I will outline a series of step-by-step instructions to put into practice what we read in the documentation.

The first step is setting up a development store and getting familiar with Shopify CLI (Command Line Interface), the tool that Shopify recommends for developing themes compatible with the Online Store 2.0 features. Up until now, I was used to develop using ThemeKit. This is still the recommended tool for working with legacy themes, however it is advised not to use it as a private app, but to install the Theme Kit Access app. There are two versions of Shopify CLI, one for themes and one for apps - I will be talking about the one specific to themes.

Documentation

• Shopify CLI
• Shopify CLI commands
• How to install Shopify CLI
• Shopify GitHub Integration
• Dawn
• Come usare la Command Line

Step by step instructions

Creating a new development store

A small premise if you have never developed on Shopify. As a Shopify Partner, you can create an unlimited number of development stores, which are free Shopify accounts that come with a few limitations. You can use these as a sort of a playground to learn how to build themes and apps. You can register as a Shopify partner here.

1. In your partner dashboard, click on Stores and then on Add Store. In the Store type section, select Development store - as for the developer preview version, I chose the global nav. As per the documentation, please note that you will not be able to transfer this development store to clients.
2. Write down the url of your store so you have it handy when you type commands
3. Once you have accessed the dashboard of your newly created development store, go to the store settings → user and permissions and add a new staff account using an email different from the one you registered to the partner acocunt. You will receive a confirmation email and once you login with the staff account, you will be able to use all the commands available in the Shopify CLI

Shopify CLI

1. Follow the instructions here to download Shopify CLI to your machine
2. Use the command shopify login --store=yourstorenamemyshopify.com to authenticate to your newly created store. This will open a browser window and you will need to login with your credentials.
3. After you have logged in, if you at any time want to check which store you are connected to, use the command shopify store, which prints on your console the name of the store you are currently logged in.
4. Let's use the CLI to add some products to your store. The command shopify populate products for example generates 5 random products. If you pass customers or orders to the shopify populate command, you can generate customers or draft orders. I recommend adding 10 test products by running this command twice.

   Products created through shopify populate won't be automatically published to the online store, which is a step you need to perform manually. They also won't have product images attached to them, so if you want to work on image galleries you can add them manually from the admin. What I recommend is also to pick three of your products and edit the following properties:

   • product images
   • add a color option and two variants with different colors to two products
   • add the compare at price for one of these products (so you can visually see the discounted price on your PLP and PDP)

Start working with Dawn

Dawn is the new theme from Shopify and the new reference for best practices. To clone Dawn directly from Github, use the command shopify theme init. This will prompt you to choose a title for your theme, which will also be the name of the directory.

Let's check out the new folder structure. The assets folder contains .css and .js files only and they are modular, not a single file with all the logic. Since Dawn is using the features of the Online Store 2.0, all of its templates are in .json format, except for gift_card.liquid

After we clone the new theme, we can run cd to move inside the newly created theme folder and run the comman shopify theme serve. Once this command has finished running, it will generate three links:

• local environment
• theme customizer
• client preview

When running shopify theme serve, a "ghost" version of the theme is created but not published to the store, so you won't be able to access it from the Shopify admin but only from the local server URL or from the theme preview. One thing to note in terms of workflow: if you have added content to your development theme through the theme editor, you can pull the changes to the template using shopify theme pull. You can then select from the list the development store.

When you are done working, you can decide to push your theme to the store using shopify theme push —unpublished to publish it as a new theme in the store.

Integrate Shopify with Github

Since I use version control and Github for my development workflow on Shopify, I am going to test out the new Github integration, which was also announced during Unite.

First of all, we need to create a new private repository on Github and connect it to the theme we just created on our local environment. These are the commands listed after creating a repository on Github:

1. Open Dawn in VS code and then within terminal run git init. This will initialize the repository locally on your machine
2. Run git add . to add all files
3. Type git commit -m "initial upload" to commit the files you just added
4. Run git branch -M main to set the default branch to main
5. Connect your local repository to the one you created on GitHub git remote add origin
6. git push -u origin main

Now we can try out the integration between Shopify and Github.

1. In my repository, I will create a new branch - this will be specific to the feature I am building, so I will name it feature/about-page-template because I want to create a new page template
2. Go to the Shopify dashboard, online store and select "connect from GitHub"
3. This option will open an overlay on the right of the page, where you can login into GitHub, select your repository and the branch you want to connect
4. Select your branch. Once you have confirmed your selection, a new theme with the name of the branch will be create. Under the theme name, you will see a GitHub icon to show that the theme has been connected.
5. In the dropdown menu for each of the themes connected to Github, there is an option to disconnect from Github or revert commits, directly from Shopify

Every time I will push a change to that branch, the theme will be updated automatically. And all the changes made from the theme editor, like adding a new section to a page, will be pushed directly to Github too.

EXTRA: Setting up Github actions on your repository

Shopify recommends to use Github actions to maintain the quality of the theme. I will setup both the recommended ones on my repository, the Google lighthouse check and the Shopify theme check. The Google Lighthouse workflow works through a private app, similarly to how Theme Kit did, so you will need to enable private apps on your development store and create a new app with Write/Read access to theme.

1. You will add some secrets to your Github repository so that the action can interact with your store. The secrets will be the ones of the private app you created before (API key, API secret), your store url (just dominio.myshopify.com) and the password for your online store, since you are running the audit on a password protected store.
   You can add more parameters to the Github action, such as the handle of the product or collection on which the Lighthouse performance test will be run, but if these are empty the pages analysed will be the ones of the first product/collection.
2. On Github, navigate to "Actions" and then click on "Add new workflow"
3. Paste the code found in this repository in the body of the action and save
4. Saving the action will commit it to the repository, which will automatically run the checks.

What the Lighthouse CI action does is creating a development theme and running 3 audits on 3 each of 3 pages: the homepage, the product page and the collection page. It will then give you the urls for the median between the 3 reports run. One thing to note is that the report is run on a mobile device.

If you want to check out the repositories for the two workflow included in the workflow we just setup, you can go to their repositories here:

Theme Check Action

Lighthouse CI Action

Final thoughts

In this article, we went through the setup of our development store, including the creation of some test products. Then we downloaded the new theme Dawn from Github and uploaded it to a private repository where we setup continuous deployment and some Github actions that check the quality of our theme.

I am really impressed with the new toolkit and I am starting to think about how to implement these workflows in a production store. I would probably connect the main branch to the live theme and the staging branch to a second theme called [Staging].

Then I would work on a specific feature on a new Github branch, but using Shopify CLI to avoid connecting all of my branches to the store. I would use the command shopify theme serve to work on local and then shopify theme push --unpublished, which uploads the theme to the theme library as a new unpublished theme. This gives you a good point to pick up from where you left off the next time you need to work on that feature, as you would continue to use in your branch theme serve and shopify theme push --themeid to publish the most recent changes to the feature theme.

When I have completed the feature, I would push the changes to the staging branch, which is already connected to the store and which probably has more than one feature requiring approval on it. The client or the team would then review the feature and when we are all happy with it, I would push it, which is connected to the live theme.

-

Have you already tried out the Shopify CLI and the new GitHub integration? If you want to share/discuss your workflow and the new features, drop me an email at rossella@namastudio.it