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
Create a development folder for your theme.
Pull your theme using the command below.
shopify theme pull --store=your-store-name.myshopify.com
Note that if this is the first time using the CLI for this particular store you will be promoted to authenticate.
Start developing by running the command:
shopify theme dev
... which will start up a local instance:
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:
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:
127.0.0.1:9292 will automatically refresh and display the change.
To implement the change in production simply run:
shopify theme push
Visit your production environment and you will see the change.
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)