> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt
> Use this file to discover all available pages before exploring further.

# Development Environment Setup

> Set up your local development environment for Horizon theme development

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

<Steps>
  <Step title="Clone Horizon">
    Clone the Horizon repository to your local machine:

    ```bash theme={null}
    git clone https://github.com/Shopify/horizon.git
    ```

    This creates a local copy of the theme in a directory called `horizon`.
  </Step>

  <Step title="Navigate to the theme directory">
    ```bash theme={null}
    cd horizon
    ```
  </Step>
</Steps>

<Note>
  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.
</Note>

## Install Shopify CLI

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

<Steps>
  <Step title="Install Shopify CLI">
    Follow the [Shopify CLI installation guide](https://shopify.dev/docs/storefronts/themes/tools/cli) for your operating system.

    Verify the installation:

    ```bash theme={null}
    shopify version
    ```

    You should see output similar to:

    ```
    Shopify CLI 3.x.x
    ```
  </Step>

  <Step title="Authenticate with Shopify">
    Connect your CLI to your Shopify store:

    ```bash theme={null}
    shopify auth login
    ```

    This opens a browser window to authenticate with your Shopify Partner account.
  </Step>
</Steps>

## Install Development Tools

### VS Code Extensions

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

<Steps>
  <Step title="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:

    * [Theme Check VS Code](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode)

    This extension provides real-time linting and validation for your Liquid code.
  </Step>
</Steps>

### Theme Check CLI

Theme Check can also be run from the command line:

```bash theme={null}
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

<Steps>
  <Step title="Initialize the theme">
    From your theme directory, connect to your development store:

    ```bash theme={null}
    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
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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

<CardGroup cols={2}>
  <Card title="Development Workflow" icon="code" href="/development/workflow">
    Learn the development workflow and best practices
  </Card>

  <Card title="Shopify CLI" icon="terminal" href="/development/shopify-cli">
    Explore Shopify CLI commands and usage
  </Card>

  <Card title="Theme Check" icon="check" href="/development/theme-check">
    Understand theme validation and linting
  </Card>

  <Card title="Theme Architecture" icon="sitemap" href="/architecture/overview">
    Explore Horizon's theme structure
  </Card>
</CardGroup>

## Troubleshooting

### CLI Authentication Issues

If you encounter authentication errors:

```bash theme={null}
shopify auth logout
shopify auth login
```

### Port Already in Use

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

```bash theme={null}
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