As a developer working on Shopify stores, you might have encountered a common challenge that many in the fraternity face.
It can be quite cumbersome to find corresponding CSS styles, IDs, JavaScript functions for elements with specific classes and attributes.
When working in a live Shopify environment, this could mean manually sifting through multiple files to locate where these selectors are being deployed, be it theme files, stylesheets, or JavaScript modules.
This process can be simplified to a great extent in local dev environments like Visual Studio Code, where one may copy and paste an ID, a class name, or an attribute, deploy the global search feature (Ctrl+Shift+F or Cmd+Shift+F), and view all occurrences across project files.
The search results make the files containing these selectors amply clear and render context, which ultimately makes it much easier to see how an element is being styled or manipulated.
Keeping this in mind, we will look into the need for using the Shopify CLI, how it can benefit you, how to work on themes locally with it, some best practices, and who stands to benefit from it.
Where does the need to use the Shopify CLI arise?
Other than the challenge mentioned above, there are a couple of others that you might have faced as well.
- When multiple developers work collaboratively on a single theme, they all need to create separate theme copies. This is important because working on the same theme simultaneously can result in inadvertent code conflicts, where one developer’s changes might accidentally overwrite another’s.
2. Also, in the absence of a proper version control system, keeping track of changes across theme files can become challenging.
This is where Shopify CLI comes in handy and flips the game.
Simply put, this is a Command Line Interface that enables you to work on themes locally, preview any changes, and implement updates through your terminal.
When you choose to develop locally, you may integrate your theme files with GitHub, thereby enjoying robust version control and bidding adieu to issues caused by code conflicts and change tracking.
How Shopify CLI stands to benefit you
Let’s now delve into the four primary ways the Shopify CLI tool will help you enhance the speed of your development process.
- Creating a new theme
In order to create a new Shopify theme, enter the following command in your command line;
bash
shopify theme init [THEME-NAME]
2. Open an existing theme
In case you need to pull out an existing theme that you need to work on, then enter the following command;
bash
shopify theme pull
You can now start working on the theme files downloaded from your Shopify store.
3. Launching development server
In order to launch a development server with live reloading, enter the following Shopify CLI command;
bash
shopify theme deve—store YOUR-STORE-NAME.myshopify.com
The fun thing about this is that you can see the changes playing out in real-time in your browser, which makes the dev process super fast and error-free.
4. Launching your theme
When satisfied with your Shopify theme, you may launch it using the following Shopify CLI command;
bash
shopify theme push
In order to make it live and hit the waves, enter the following command;
bash
shopify theme publish
In summary, here are some useful Shopify CLI commands for Shopify themes;
| Shopify theme init ~ To create a new theme Shopify theme pull ~ For downloading the existing theme Shopify theme dev ~ To start the development server Shopify theme push ~ For uploading all the changes to Shopify Shopify theme publish ~ To make your themes live. |
Working on themes locally using Shopify CLI made easy ~ A step-by-step guide
We will now step into the world of working on themes locally seamlessly by deploying the Shopify CLI in a guided endeavour.
- Pre-requisites that one must take care of
Before getting ready to implement the steps that follow, it is essential to ensure that you have the following in place;
| Node.js: 18.20+, 20.10 or higherA Node.js package manager: npm, Yarn 1.x, or pnpm.Git: 2.28.0 or higher |
2. Installing Shopify CLI globally
To install Shopify CLI, you need to paste the following command into your terminal;
npm install -g @shopify/cli@latest
3. Get the theme on which you want to work locally
Once you are done installing the Shopify CLI, we recommend using the following command to pull the needed theme files to your local system,
shopify theme pull –store store_name_here.myshopify.com
After this, you will be redirected to the browser for login verification.
In your terminal, you should be able to view a list of theme files that are currently in your store. You will need to choose the specific theme you want to work on from the list.
Post selection, the CLI will begin downloading the theme files to your local system.
Once the download is complete, you should be able to access all the requested theme files in your local directory.
4. Leverage the Shopify theme dev in order to preview changes while working on the theme locally
Make use of the following command in order to preview changes while working on your theme locally;
shopify theme dev
5. Deploy the Command Theme Push to push the changes from local to the store
Once you are done with making all the changes, make use of the command below;
shopify theme push
Then, select the theme file to which you want your changes to reflect on.
After confirmation, the Shopify CLI will begin uploading files to the store.
Upon completion, the terminal will display a notification indicating successful completion.
And, voila! The changes you have made should now be reflected in the theme or the live website to which you pushed your code.
Some practical advice when using Shopify CLI
Now that we are familiar with the workflow, let’s get into some real-world best practices to help you stay on top of your dev game.
- Remember to duplicate the theme before development
It’s a good practice to treat the live-theme as read-only and instead work on a duplicate. Here’s how you do that!
Production theme
Staging or dev theme
Local copy
2. Make it a point to use branches, even if you work alone!
A one-dev team is also prone to mistakes, and that is where branches protect your work.
3. Commit in small chunks
Remember that it’s faster to revert a 10-line change than a day’s worth of edits!
4. Don’t push without pulling first
Shops change a lot more than you think, taking into account App blocks, metafield mappings, settings_schema updates, etc.
Therefore, it’s always a good idea to pull → dev → push → publish.
5. Stick to clean names for themes
Instead of generic, meaningless names such as “Copy of Dawn” or Theme2, make it a point to render more meaningful names to your themes, for example, store-live, store-dev, or store-redesign-january.
6. Ensure that you clean as you go!
Unused snippets and assets have a tendency to pile up quickly, much like that heap of unwashed clothes on that chair in the corner of your room. Therefore, CLI makes deleting them safe, because hey, you always have version history to fall back on!
Why Shopify CLI matters increasingly every year
Nowadays, Shopify stores rely on App embeds, metafields, JSON templates, dynamic blocks, language files, and app-injected scripts.
And with this level of complexity, you run the risk of a single wrong deletion breaking multiple pages, conditional logic becoming harder to track, and teams needing shared context.
In such scenarios, Shopify CLI offers the structure that’s very much needed, and it goes way beyond being just a convenient shortcut.
This gives developers the room to work without the fear of breaking something live. More importantly, it’s aligned with how modern sites are built everywhere else, replete with local coding, version control, testing before deployment, and clear release steps.
An insight into who should absolutely adopt Shopify CLI
Wondering if Shopify CLI is the ONE for you? Well, if you meet any of the following criteria, it’s probably worth a shot!
~ Shopify agencies that juggle multiple stores
~ Freelancers
~ In-house teams collaborating on a single codebase
~ Stores running seasonal redesigns
~ Businesses scaling into new markets or languages
~ Anyone customizing beyond basic drag-and-drop
If you’re making more than two or three edits a month, CLI is worth the switch.
Pitfalls that Shopify CLI helps you avoid, but you still need to keep an eye on!
Using Shopify CLI takes away a huge amount of risk, but there are still a few habits worth cultivating so you don’t accidentally shoot yourself in the foot.
- Accidentally pushing to the live theme
At this point, it’s imperative to let you know that CLI doesn’t prevent you from uploading to the live theme. It politely asks and presumes that you know what you are doing!
Therefore, before you hit Enter, remember to pause, read the prompt and confirm the theme you are pushing to, whether it’s the test theme or the live production theme, and whether this change needs to go live now.
2. Forgetting to pull the latest changes
If other teammates are also working on the same theme, or even if your store is installing apps that add blocks, the theme may change on the Shopify side without you realizing it.
Therefore, make it a habit to always pull, work, and then push.
Skipping that first step is how overwritten code and lost work happen.
Signing off!
On that note, we hope to have helped you gain clarity on how to leverage the Shopify CLI to streamline your theme development workflow.
If you’d like to partner with Mavlers to outsource your Shopify needs, we recommend reading “How can Mavlers help address your Shopify needs?“
