DEV Community

Cover image for Local environment for Shopify theme development
Morten Hartvig
Morten Hartvig

Posted on

Local environment for Shopify theme development

Making code changes directly on your published theme in production is seldom a good idea as it introduces the risk of downtime in case of errors and typos. Luckily, using the Shopify CLI, getting a local instance of your theme up and running has never been easier.

Shopify CLI is a command-line tool that allows you to work with- and generate themes, apps and storefronts using a simple command-line interface.

Depending on the project and its complexity you might have various CI/CD solutions in place. This article will not cover those kinds of setup - merely the CLI to help you get started with local development.

Prerequisites

Cf. Shopify's own documentation, in order to use the CLI you will need to have installed:

  • Node 18.20+, 20.20 or higher
  • npm (although Yarn and pnpm is also supported)
  • Git

Setting up a local environment

Firstly install Shopfy CLI globally using your package manager of choice (in this case npm).

npm install -g @shopify/cli @shopify/theme
Enter fullscreen mode Exit fullscreen mode

Create a development folder for your theme.

Creating a project folder in the terminal

Pull your theme using the command below.

shopify theme pull --store=your-store-name.myshopify.com
Enter fullscreen mode Exit fullscreen mode

Pulling a Shopify theme using the CLI

Note that if this is the first time using the CLI for this particular store you will be promoted to authenticate.

Shopify authentication

Start developing by running the command:

shopify theme dev
Enter fullscreen mode Exit fullscreen mode

... which will start up a local instance:

Running Shopify theme

Shopify will provide you with three different URLs:

  • [1] View your theme locally
  • [2] Make changes to your development theme in the Theme Editor
  • [3] Share a preview to your development theme

Especially [3] can be useful if you want to live demo a local, pending change to your client.

If you visit 127.0.0.1:9292 you will be able to see a 1:1 copy of your published, production theme:

Local Shopify webshop

Publishing a change

Now that you have a copy of your theme running locally open the project folder created earlier in your editor of choice, such as Visual Studio Code.

As a humble example, try and add the current year next to your stores logo:

Code change in Visual Studio Code

127.0.0.1:9292 will automatically refresh and display the change.

Updated local Shopify webshop

To implement the change in production simply run:

shopify theme push
Enter fullscreen mode Exit fullscreen mode

Pushing a local change to production

Visit your production environment and you will see the change.

Updated production theme

Having your theme locally, you can also push it to your favourite Git platform allowing you to - among other things - create pull requests for your colleagues to review before deployment to production.

Oh.. and did you know that Shopify has its own Github integration?

Top comments (0)