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:
This creates a local copy of the theme in a directory called horizon.
2

Navigate to the theme directory

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:
You should see output similar to:
2

Authenticate with Shopify

Connect your CLI to your Shopify store:
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:
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:
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:
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:

Port Already in Use

If port 9292 is already in use, you can specify a different port:

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