How To Use Shopify CLI for Themes (A Step-by-Step Guide)

When working on Shopify stores, developers often face a common challenge: finding the corresponding CSS styles or JavaScript functions for elements with specific classes, IDs, and attributes. In a live Shopify environment, this means manually searching through multiple files to locate where these selectors are being used – be it stylesheets, theme files, or JavaScript modules.

This process is much simpler in local development environments like Visual Studio Code. There, you can simply copy a class name, ID, or attribute, use the global search feature (Ctrl+Shift+F or Cmd+Shift+F), and instantly see all occurrences across your project files. The search results clearly show which files contain these selectors and provide context, making it much easier to trace how an element is being styled or manipulated.

Not just this, working on the Shopify store has its fair share of shortfalls.

1. When multiple developers need to collaborate on a single theme, they must each create separate theme copies. This is necessary because simultaneous work on the same theme can lead to code conflicts, where one developer's changes might accidentally override another's modifications.

2. It’s hard to keep track of all the changes as there is no proper version control system

Without a proper version control system, tracking changes across theme files becomes challenging. This is where Shopify CLI comes in handy - it's a command line interface that allows you to work on themes locally, preview changes, and deploy updates through your terminal. By developing locally, you can integrate your theme files with GitHub, providing robust version control and eliminating issues with code conflicts and change tracking.

Here is a step-by-step guide for working on themes locally using a Shopify CLI,

1. Pre-requisites

Before the steps make sure to have the,

Node.js: 18.20+, 20.10 or higher
A Node.js package manager: npm, Yarn 1.x, or pnpm.
Git: 2.28.0 or higher

2. Install Shopify CLI Globally

Paste the following command to your terminal.

npm install -g @shopify/cli@latest

3. Pull the theme to which you want to work locally

After Installing the Shopify CLI, use the following command to pull the theme files to your local system.

 shopify theme pull --store store_name_here.myshopify.com

You will then be redirected to the browser for login verification, Once confirmed with the login.

In your terminal, you'll see a list of all theme files currently in your store. From here, you'll need to select the specific theme you want to work on.

Once selected, the CLI will begin downloading the theme files to your local system.

Once the download completes, you can access all the theme files in your local directory.

4. Use the Shopify theme dev for previewing the changes while working on the theme locally

Use the following command while working on the theme locally to see the changes in preview

shopify theme dev

Click [1] to open the theme preview or [2] to access the theme editor.

5. Make the desired changes and see them reflected on the preview link

Let's try to make some changes in the theme file

In the index file, Lets change the heading for the banner image from “Equip Yourself with Our Latest Camping Gear”

Collection to something else,

As you edit the file, your changes will automatically reflect in the preview window.

And In the terminal also

6. Use Command Theme Push to push the changes from local to store

Once done with all the changes use the command below,

shopify theme push

Next, select the theme file to which you want your changes to be pushed to

On confirmation, the Shopify CLI will start uploading files to the store

Once Completed the Terminal would show the message of success,

The Changes would reflect on the live website or on the theme to which you have pushed your code.

And that's it!!!

Our Final Words

I hope this guide has shown you how Shopify CLI can streamline your theme development workflow. By working locally, you can leverage your favorite IDE features, collaborate effectively with team members through Git version control, and maintain better oversight of your code changes.

This approach not only enhances productivity but also makes theme development more organized and efficient.

Need expert help?

Looking to enhance your Shopify store but not sure where to start? F22 Labs specializes in custom Shopify development and optimization. Our team of certified Shopify experts can help transform your e-commerce vision into reality, offering tailored solutions from theme customization to full-scale store development. Contact us to elevate your online store.