Development

Shopify Local Development & Theme Dev Store Setup: Complete Guide 2026

Complete guide to Shopify local development: setup dev store, Shopify CLI, theme development, local testing, hot reload, and best practices for building Shopify themes locally.

What is Shopify Local Development? (Quick Answer)

Shopify local development allows you to build and test Shopify themes, apps, and functionality on your local machine before deploying to a live store. Using Shopify CLI, you can run a development server locally, edit theme files, and see changes instantly with hot reload.

This workflow significantly speeds up development and allows testing without affecting live stores. Local development requires a Shopify theme dev store (free with Partner account), Shopify CLI, and Node.js.

Need Help with Shopify Development?

We're Shopify development experts. Get help setting up your local development environment or building custom themes.

Fuentes y Recursos Externos

Why Use Local Development?

Benefits of Local Shopify Development

Key Advantages

  • β—‹ Faster development with instant hot reload (see changes immediately)
  • β—‹ No risk to live stores - test safely in dev store
  • β—‹ Free unlimited development stores with Partner account
  • β—‹ Better version control using Git
  • β—‹ Access to local debugging tools and IDEs
  • β—‹ Ability to work offline (syncs when online)
  • β—‹ Easier collaboration using Git workflows
  • β—‹ Professional development workflow
  • β—‹ Faster iteration - no upload delays
  • β—‹ Standard practice recommended by Shopify

Traditional vs Local Development

Traditional vs Local Development
AspectTraditional (Theme Editor)Local Development
Development SpeedSlow - upload each changeFast - instant hot reload
Version ControlManual, difficultGit integration
TestingLive store or draftDev store (safe)
DebuggingLimited browser toolsFull IDE debugging
CollaborationManual file sharingGit workflows
Offline WorkNot possiblePossible (with sync)
Best ForQuick editsProfessional development

Setting Up Shopify Local Development

Prerequisites

What You Need

  • β—‹ [Shopify Partner account](https://partners.shopify.com) - Free to create
  • β—‹ [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) - Official command-line tool
  • β—‹ Node.js v18 or higher - JavaScript runtime
  • β—‹ Git (optional but recommended) - Version control
  • β—‹ Code editor (VS Code, etc.) - For editing files
  • β—‹ Development store - Free with Partner account

Step-by-Step Setup

1

Create Shopify Partner Account

Sign up for a free [Shopify Partner account](https://partners.shopify.com). Partners get unlimited free development stores. This account is required for local development and accessing Shopify's development tools.

2

Create a Development Store

From your Partner Dashboard, create a new development store. Choose 'Development store' type. You can create unlimited dev stores for different projects. Dev stores have all Shopify features except live payment processing.

3

Install Node.js

Install [Node.js v18 or higher](https://nodejs.org/) on your machine. Shopify CLI requires Node.js to run. Verify installation with `node --version` in terminal.

4

Install Shopify CLI

Install [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) globally: `npm install -g @shopify/cli @shopify/theme`. Or use npx: `npx @shopify/cli@latest`. Verify with `shopify version`.

5

Authenticate with Partner Account

Run `shopify auth login` in terminal. This opens your browser to authenticate with your Partner account. The CLI stores your credentials securely for future use.

6

Create or Pull a Theme

Create new theme: `shopify theme init`. Or pull existing theme: `shopify theme pull`. This downloads theme files to your local machine.

7

Start Local Development Server

Run `shopify theme dev` in your theme directory. This starts the local dev server, connects to your dev store, and enables hot reload. Your dev store URL opens automatically in browser.

Shopify CLI Commands

Essential Commands

Shopify CLI Commands for Local Development
CommandDescriptionUse Case
`shopify theme dev`Start local dev server with hot reloadDaily development work
`shopify theme pull`Download theme from store to localGet existing theme
`shopify theme push`Upload local theme to storeDeploy changes
`shopify theme init`Create new theme locallyStart new project
`shopify theme check`Validate theme code (Liquid, JSON)Before deployment
`shopify auth login`Authenticate with Partner accountFirst-time setup
`shopify theme list`List all themes in storeView available themes
`shopify theme publish`Publish a theme to liveGo live with theme

Command Examples

Start development:

shopify theme dev
# Starts local server, opens browser, enables hot reload

Pull existing theme:

shopify theme pull --store=your-dev-store.myshopify.com
# Downloads all theme files to local

Push to store:

shopify theme push --unpublished
# Creates draft theme in store (safe for production)

Check for errors:

shopify theme check
# Validates Liquid syntax, JSON, and best practices

Development Store Setup

Creating a Shopify Theme Dev Store

A development store (dev store) is a free Shopify store used for testing and development. It’s different from a regular store:

Development Store Features
FeatureDevelopment StoreRegular Store
CostFree (unlimited)$29-$299+/month
PaymentsTest mode onlyLive payments
Duration90 days (extendable)Permanent
PurposeDevelopment & testingLive business
ThemesAll featuresAll features
APIsFull accessFull access
Best ForDevelopment, learningRunning business

Setting Up Your Dev Store

1

Create Dev Store from Partner Dashboard

Go to [Partners Dashboard](https://partners.shopify.com), click 'Stores' β†’ 'Add store' β†’ 'Development store'. Choose store name and purpose. Dev stores are free and unlimited.

2

Configure Store Settings

Set up basic settings: store name, timezone, currency. Add test products if needed. Configure payment methods (test mode) and shipping. These settings help test your theme properly.

3

Install Starter Theme (Optional)

Install Dawn, Debut, or any starter theme to begin with. Or start with a blank theme. You can always pull themes from other stores or create from scratch.

4

Connect CLI to Dev Store

When running `shopify theme dev`, CLI will ask which store to use. Select your dev store. The CLI remembers your choice for future sessions.

Local Development Workflow

Typical Development Process

Development Workflow

  • β—‹ Start local dev server: `shopify theme dev`
  • β—‹ Edit theme files in your code editor
  • β—‹ Changes sync automatically (hot reload)
  • β—‹ Preview changes in browser (dev store URL)
  • β—‹ Test functionality and responsive design
  • β—‹ Commit changes to Git (version control)
  • β—‹ Run theme check: `shopify theme check`
  • β—‹ Push to dev store when ready: `shopify theme push`
  • β—‹ Test in dev store thoroughly
  • β—‹ Deploy to production when approved

Hot Reload Feature

Hot reload automatically refreshes your browser when you save changes to theme files. This feature:

  • Updates instantly without manual refresh
  • Preserves scroll position and state
  • Works with Liquid templates, CSS, and JavaScript
  • Significantly speeds up development
  • Is enabled automatically with shopify theme dev

File Structure & Organization

Theme File Structure

Local theme files follow Shopify’s standard structure:

theme-name/
β”œβ”€β”€ assets/          # CSS, JavaScript, images
β”œβ”€β”€ config/          # Theme settings (settings_schema.json)
β”œβ”€β”€ layout/          # Layout templates (theme.liquid)
β”œβ”€β”€ locales/         # Translation files
β”œβ”€β”€ sections/        # Section files
β”œβ”€β”€ snippets/        # Reusable code snippets
β”œβ”€β”€ templates/       # Page templates
└── theme.liquid     # Main layout file

Version Control Best Practices

Git Best Practices

  • β—‹ Initialize Git repository in theme folder
  • β—‹ Create `.gitignore` for node_modules, .shopify, etc.
  • β—‹ Commit frequently with descriptive messages
  • β—‹ Use branches for features (feature/new-section)
  • β—‹ Never commit sensitive data (API keys, passwords)
  • β—‹ Keep commit history clean and organized

Common Development Tasks

Editing Liquid Templates

Liquid is Shopify’s templating language. Local development allows you to:

  • Edit .liquid files in your IDE
  • See changes instantly with hot reload
  • Use proper syntax highlighting
  • Debug with breakpoints
  • Test template logic locally

Styling with CSS

CSS development:

  • Edit CSS files in assets/ folder
  • Use modern CSS features
  • Organize with partials
  • See changes instantly
  • Test responsive design

JavaScript Development

JavaScript features:

  • Modern ES6+ syntax
  • Module system support
  • Local debugging
  • Hot reload for JS files
  • Integration with Shopify APIs

Debugging & Troubleshooting

Common Issues

Common Development Issues
IssueSolutionPrevention
CLI authentication failsRun `shopify auth logout` then `shopify auth login`Keep credentials updated
Changes not syncingRestart dev server: Ctrl+C, then `shopify theme dev`Check internet connection
Theme check errorsFix Liquid/JSON syntax errors shownRun `shopify theme check` frequently
Store not foundVerify store URL in CLI promptUse correct dev store
Node.js version errorUpdate to Node.js v18+Check version: `node --version`

Debugging Tools

Debugging Resources

  • β—‹ Browser DevTools - Inspect elements, console, network
  • β—‹ Shopify Theme Inspector - [Official tool](https://shopify.dev/docs/themes/tools/theme-inspector)
  • β—‹ Liquid documentation - [Shopify.dev Liquid reference](https://shopify.dev/docs/api/liquid)
  • β—‹ Theme check - Validates code automatically
  • β—‹ Console logs - Debug JavaScript in browser

Deployment Workflow

From Local to Production

1

Test Thoroughly in Dev Store

Ensure all features work correctly. Test responsive design, checkout flow, and all functionality. Fix any issues before deploying.

2

Run Theme Check

Run `shopify theme check` to validate code. Fix any errors or warnings. This ensures code quality and compatibility.

3

Push as Draft Theme

Use `shopify theme push --unpublished` to create a draft theme in production store. This lets you review before going live.

4

Review in Production Store

Preview the draft theme in your production store. Test all functionality again in the production environment.

5

Publish When Ready

Once approved, publish the theme from Shopify admin or use `shopify theme publish`. Monitor for any issues after going live.

Best Practices

Local Development Best Practices

Development Best Practices

  • β—‹ Always use local development for theme work (never edit in Theme Editor)
  • β—‹ Use Git for version control (commit frequently)
  • β—‹ Test in dev store before pushing to production
  • β—‹ Run `shopify theme check` before deploying
  • β—‹ Keep Shopify CLI updated (`npm update -g @shopify/cli`)
  • β—‹ Use meaningful commit messages
  • β—‹ Document complex Liquid logic
  • β—‹ Follow [Shopify theme development guidelines](https://shopify.dev/docs/themes)
  • β—‹ Test on multiple devices and browsers
  • β—‹ Keep local files organized and clean

Resources & Documentation

Official Shopify Resources

Key resources for local development:

Helpful Tools

Development Tools

  • β—‹ [Shopify Theme Inspector](https://shopify.dev/docs/themes/tools/theme-inspector) - Debug themes
  • β—‹ [Liquid Reference](https://shopify.dev/docs/api/liquid) - Liquid syntax reference
  • β—‹ [VS Code Shopify Extension](https://marketplace.visualstudio.com/items?itemName=Shopify.liquid) - IDE support
  • β—‹ Browser DevTools - Built-in debugging
  • β—‹ [Shopify CLI GitHub](https://github.com/Shopify/cli) - CLI source and issues

Summary: Shopify Local Development Setup

StepTool/ResourceCommand/Action
1. Create Partner Account[Shopify Partners](https://partners.shopify.com)Sign up (free)
2. Create Dev StorePartner DashboardAdd development store
3. Install Node.js[Node.js](https://nodejs.org/)Download v18+
4. Install Shopify CLI[Shopify CLI](https://shopify.dev/docs/apps/tools/cli)`npm install -g @shopify/cli`
5. AuthenticateShopify CLI`shopify auth login`
6. Pull/Create ThemeShopify CLI`shopify theme pull` or `init`
7. Start DevelopmentShopify CLI`shopify theme dev`
8. DeployShopify CLI`shopify theme push --unpublished`

Pro tip: Always test in dev store first! Never push directly to production without testing. Use `shopify theme check` before deployment to catch errors early.

Need Help with Shopify Local Development?

We're Shopify development experts. Get help setting up your local development environment or building custom themes.

FAQ

Preguntas Frecuentes (FAQ)

❓ What is Shopify local development? β–Ό

Shopify local development allows you to build and test Shopify themes, apps, and functionality on your local machine before deploying to a live store. Using [Shopify CLI](https://shopify.dev/docs/apps/tools/cli), you can run a development server locally, edit theme files, and see changes instantly with hot reload. Local development requires: A Shopify Partner account, A development store (dev store), Shopify CLI installed, and Node.js. This workflow significantly speeds up development and allows testing without affecting live stores.

❓ How do I set up a Shopify theme dev store? β–Ό

To set up a Shopify theme dev store: 1) Create a [Shopify Partner account](https://partners.shopify.com) (free), 2) Create a development store from your Partner Dashboard, 3) Install [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) on your machine, 4) Authenticate CLI with your Partner account (`shopify auth login`), 5) Create or pull a theme (`shopify theme dev`), 6) Start local development server. Development stores are free, unlimited, and perfect for testing. They have all Shopify features except live payments.

❓ What tools do I need for Shopify local development? β–Ό

For Shopify local development you need: [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) - Command-line tool for development, Node.js (v18+) - Required runtime, A Shopify Partner account - Free to create, A development store - Free unlimited dev stores, Git - Version control (recommended), A code editor (VS Code, etc.), and Local theme files. Shopify CLI handles authentication, file syncing, hot reload, and deployment. The CLI connects your local files to your dev store automatically.

❓ How does Shopify CLI work for local development? β–Ό

Shopify CLI connects your local development environment to your Shopify store. Commands: `shopify theme dev` - Starts local dev server with hot reload, `shopify theme pull` - Downloads theme from store, `shopify theme push` - Uploads theme to store, `shopify auth login` - Authenticates with Partner account, `shopify theme check` - Validates theme code. The CLI syncs changes between local files and the store, enables hot reload for instant preview, and handles authentication automatically. It's the official tool recommended by [Shopify](https://shopify.dev).

❓ Can I develop Shopify themes locally without a store? β–Ό

No, you need a Shopify store (development store) for local theme development. However, development stores are free and unlimited with a [Shopify Partner account](https://partners.shopify.com). You can create multiple dev stores for different projects. The local development server connects to your dev store via Shopify CLI. While you edit files locally, changes sync to the dev store and you preview them on the actual Shopify storefront. This ensures your theme works correctly with Shopify's Liquid engine and APIs.

❓ What are the benefits of local Shopify development? β–Ό

Benefits of local Shopify development: Faster development with instant hot reload, No risk to live stores while testing, Free unlimited development stores, Better version control (Git), Access to local debugging tools, Ability to work offline (with sync when online), Easier collaboration using Git, and Professional development workflow. Local development is the standard practice recommended by Shopify and used by all professional Shopify developers.

❓ How do I deploy changes from local development to production? β–Ό

To deploy from local development to production: 1) Test thoroughly in your dev store, 2) Use `shopify theme push --unpublished` to create a draft theme in production, 3) Review the draft theme in your production store, 4) Publish the theme when ready, or use `shopify theme push --live` to push directly (not recommended without testing). Always test in dev store first. Use version control (Git) to track changes. Consider staging environments for complex projects. The [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) handles deployment seamlessly.

Conclusion

Shopify local development is the professional standard for building Shopify themes and apps. Using Shopify CLI and a development store, you can develop faster, test safely, and maintain better code quality with version control.

Key takeaways:

  • Local development requires Shopify CLI, Node.js, and a dev store
  • Development stores are free and unlimited with Partner account
  • Hot reload makes development significantly faster
  • Version control with Git is essential for professional workflows
  • Always test in dev store before deploying to production
  • Shopify CLI handles authentication, syncing, and deployment automatically
  • Standard practice recommended by Shopify for all theme development

Our recommendation: Set up local development for all Shopify projects. The initial setup takes 10-15 minutes, but the productivity gains are enormous. Use Shopify CLI for the best experience, follow Shopify’s development guidelines, and always test thoroughly before deployment.

Ready to start local development? Follow the setup steps above and join thousands of developers using this professional workflow.

Ready to Start Local Development?

Get help setting up your Shopify local development environment or building custom themes.