Master Shopify CLI: Local Theme Development & Hot Reloading

If you are manually refreshing your live site every time you make a code change, you are slowing down your development process significantly.

Today, we are diving into how to use the Shopify Command Line Interface (CLI) to revolutionize your theme development workflow. This tool allows you to preview changes locally before pushing them to your live theme and utilizes a hot reload feature, eliminating the need for manual refreshes.

Note: A prerequisite for this workflow is that you have already integrated your theme with GitHub. If you haven't done that yet, please ensure that integration is set up first.

Prerequisites: Ruby and Git

To use the Shopify CLI, you must have two specific technologies installed on your machine:

1. Ruby
2. Git

If you don't have these, simply search for "install ruby" or "install git" for your specific operating system. The installation process is generally straightforward—just download and click through the setup wizards.

Step 1: Installing Shopify CLI

Once Ruby and Git are installed, navigate to the parent directory of the Shopify theme you want to work on using your preferred terminal (such as the built-in terminal in VS Code).

First, verify that Ruby is running correctly:

gem --version

Next, install the Shopify CLI using the following command (this applies to both Mac and Windows):

gem install shopify-cli

The terminal will download and install the necessary files. Once finished, verify the installation:

shopify version

To view a list of all available commands, you can type shopify help.

Step 2: Logging into Your Store

Before you can serve your theme locally, you need to authenticate your machine with your Shopify store.

Run the following command, replacing [your-store-name] with your actual store handle (e.g., shop-code):

shopify login --store [your-store-name]

This command will open an authentication window in your browser. Log in to the account associated with the store (ensure you select the correct Partner organization if applicable).

Step 3: Running the Local Development Server

Once logged in, you can start the development server. This process bundles your files, generates minified CSS/JS, and syncs them to Shopify to create a local preview.

Run the command:

shopify theme serve

After syncing, the terminal will provide you with a local URL (usually looking like http://127.0.0.1:9292).

The Power of Hot Reloading

By Ctrl + Clicking the provided local link, you will be taken to a preview of your site.

Here is where the magic happens: Hot Reloading.

If you make a change in your code editor—for example, adding an <h1>Test</h1> tag to the body of your theme.liquid file—and hit save, the browser will automatically refresh to show that change. While it is a full-page refresh (rather than a module update like React), it is significantly faster than manually uploading files and refreshing the browser yourself.

Understanding the CLI Links

When you run shopify theme serve, the terminal provides three distinct links:

1. Local Development Link: This is the one you will use most often for coding and previewing changes locally.
2. Theme Editor Link: Use this if you are customizing settings in the Shopify Admin Theme Editor.
   • Crucial Tip: If you make changes in the Theme Editor, run shopify theme pull afterwards to update your local files and sync those changes to GitHub.
3. Shareable Preview Link: This allows you to share a preview with a client or team member. As long as your server is running, they can view your progress remotely.

Conclusion

Using the Shopify CLI is a game-changer for developers looking to speed up their workflow. It allows for safe local testing and rapid iteration.

When you are finished working, simply press Ctrl + C in your terminal to stop the server.