Shopify Store - Milan Pithadiya

Shopify CLI Theme Development Guide

Your go-to resource for local Shopify development with and without theme IDs

Introduction

Shopify CLI is an essential tool for developers, streamlining the process of creating, testing, and deploying themes locally. This guide provides separate instructions for workflows with and without theme IDs, ensuring clarity and ease of use.

Installing Shopify CLI

Before starting, ensure you meet these prerequisites:

• A Shopify Partner account
• Node.js: Install it from Node.js official website (version 16.x or higher).
• A package manager like npm or yarn
• Git: Make sure Git is installed. You can download it from Git official website.

Installing Shopify CLI command :

npm install -g @shopify/cli@latest

Development Without Theme ID

For creating new development themes or syncing unnamed themes, follow these steps:

Step 1: Authenticate with Shopify

Login to your Shopify store:

shopify login

Step 2: Initialize a new theme using Dawn

Initialize the theme:

shopify theme init

Step 3: Create a New Development Theme

Create a new development theme:

shopify theme dev --store {store-name}

Step 4: Pull the Theme Locally

Fetch theme files to your local machine:

shopify theme pull --store {store-name}

Step 5: Serve the Theme Locally

Start a local development server:

shopify theme dev

Step 5: Push Changes to Shopify

Deploy your changes:

shopify theme push

Pro Tip: Run shopify theme check to validate your theme files before deploying.

Development With Theme ID ( sync with existing theme )

To work on an existing theme by its theme ID, follow these steps:

Step 1: Authenticate with Shopify

Log in to your Shopify store:

shopify login

Step 2: Pull the Existing Theme

Fetch a specific theme by its ID:

shopify theme pull --theme={theme-id} --store {store-name}

Step 3: Serve the Theme Locally

Start a local development server for the selected theme:

shopify theme dev --theme={theme-id} --store {store-name}

Step 4: Push Changes to Shopify

Deploy updates to the specified theme:

shopify theme push --theme={theme-id} --store {store-name}

Pro Tip: Use shopify theme open to preview the theme directly in your browser.

Additional Tips

• Use git for version control to track and manage changes effectively.
• Optimize theme performance with image compression and code minification.
• Test your theme across multiple devices and browsers for compatibility.

Conclusion

Shopify CLI simplifies theme development, whether you’re creating a new theme or customizing an existing one. Follow the steps outlined here to set up your environment and streamline your workflow.

Explore Shopify CLI Docs