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
Clone Horizon
Clone the Horizon repository to your local machine:This creates a local copy of the theme in a directory called
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.Install Shopify CLI
Follow the Shopify CLI installation guide for your operating system.Verify the installation:You should see output similar to:
Install Development Tools
VS Code Extensions
If you’re using Visual Studio Code, install the recommended extensions: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:Connect to a Development Store
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
Verify Your Setup
To confirm everything is working:- Make a small change to a template file (e.g.,
layout/theme.liquid) - Save the file
- Check your browser - the change should appear automatically
- Run
shopify theme checkto 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:- Check the CLI output for errors
- Restart the development server
- Clear your browser cache
- Ensure hot reload is enabled in your browser