Skip to main content
This guide walks you through setting up your development environment to work with the Horizon Shopify theme.

Prerequisites

Before you begin, ensure you have:
  • Git installed on your machine
  • A Shopify Partner account or access to a development store
  • Node.js and npm (for Shopify CLI)
  • A code editor (VS Code recommended)

Clone the Repository

1

Clone Horizon

Clone the Horizon repository to your local machine:
git clone https://github.com/Shopify/horizon.git
This creates a local copy of the theme in a directory called horizon.
2

Navigate to the theme directory

cd horizon
The main branch may include code for features not yet released. You may encounter Liquid API properties that are not publicly documented, but will be when the feature is officially rolled out.

Install Shopify CLI

Shopify CLI is essential for theme development. It helps you build themes faster and automates your local development workflow.
1

Install Shopify CLI

Follow the Shopify CLI installation guide for your operating system.Verify the installation:
shopify version
You should see output similar to:
Shopify CLI 3.x.x
2

Authenticate with Shopify

Connect your CLI to your Shopify store:
shopify auth login
This opens a browser window to authenticate with your Shopify Partner account.

Install Development Tools

VS Code Extensions

If you’re using Visual Studio Code, install the recommended extensions:
1

Install Theme Check VS Code extension

Horizon includes Theme Check in its list of recommended VS Code extensions. When you open the project in VS Code, you’ll be prompted to install:This extension provides real-time linting and validation for your Liquid code.

Theme Check CLI

Theme Check can also be run from the command line:
shopify theme check
This validates your theme files and reports any issues according to Shopify’s theme development best practices.

Connect to a Development Store

1

Initialize the theme

From your theme directory, connect to your development store:
shopify theme dev
You’ll be prompted to:
  • Select a store (if you have multiple)
  • Choose whether to create a new theme or use an existing one
2

Access the preview

Once connected, Shopify CLI provides a preview URL:
Serving your theme preview at:
http://127.0.0.1:9292

Synced to development theme #123456789
https://your-store.myshopify.com/?preview_theme_id=123456789
Open this URL in your browser to see your theme in action.

Verify Your Setup

To confirm everything is working:
  1. Make a small change to a template file (e.g., layout/theme.liquid)
  2. Save the file
  3. Check your browser - the change should appear automatically
  4. Run shopify theme check to validate the theme

Next Steps

Development Workflow

Learn the development workflow and best practices

Shopify CLI

Explore Shopify CLI commands and usage

Theme Check

Understand theme validation and linting

Theme Architecture

Explore Horizon’s theme structure

Troubleshooting

CLI Authentication Issues

If you encounter authentication errors:
shopify auth logout
shopify auth login

Port Already in Use

If port 9292 is already in use, you can specify a different port:
shopify theme dev --port 9293

Theme Not Syncing

If changes aren’t appearing:
  1. Check the CLI output for errors
  2. Restart the development server
  3. Clear your browser cache
  4. Ensure hot reload is enabled in your browser

Build docs developers (and LLMs) love