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

# Introduction

> Horizon is Shopify's flagship theme, built with modern web standards and progressive enhancement

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shopify-horizon/images/horizon-hero.svg" alt="Horizon Theme" style={{ borderRadius: '0.5rem' }} />
</Frame>

## Welcome to Horizon

Horizon is the flagship of a new generation of first-party Shopify themes. It incorporates the latest Liquid Storefronts features, including [theme blocks](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/quick-start?framework=liquid), and represents a modern approach to theme development on Shopify.

<Note>
  **Current Version:** 3.4.0

  Horizon is actively developed by Shopify. The `main` branch may include code for features not yet released.
</Note>

## Core Principles

Horizon is built on four fundamental principles that guide every aspect of its architecture and implementation:

<CardGroup cols={2}>
  <Card title="Web-Native" icon="globe">
    Leverages the **evergreen web** to its fullest. Built for modern browsers while maintaining support for older ones through **progressive enhancement**, not polyfills.
  </Card>

  <Card title="Lean & Fast" icon="bolt">
    Every feature must justify its inclusion. Functionality and design defaults to "no" until it meets quality requirements. Code ships on purpose.
  </Card>

  <Card title="Server-Rendered" icon="server">
    HTML is rendered by Shopify servers using **Liquid**. Business logic and platform primitives like translations and money formatting belong on the server, not the client.
  </Card>

  <Card title="Functional First" icon="check">
    The web doesn't require pixel-perfect rendering across browsers. Using semantic markup and progressive enhancement, Horizon remains functional regardless of browser.
  </Card>
</CardGroup>

## Key Features

### Modern Liquid Architecture

Horizon showcases the latest capabilities of Shopify's Liquid templating language:

* **Theme Blocks** for modular, reusable content components
* **Section Groups** for flexible header and footer structures
* **Dynamic Sections** with real-time rendering
* **Advanced Schema** definitions with conditional visibility

```liquid snippets/section.liquid theme={null}
{% liquid
  assign media_count = 0
  assign media_1 = 'none'
  assign media_2 = 'none'
  
  if section.settings.image_1 != blank and section.settings.media_type_1 == 'image'
    assign media_1 = 'image'
    assign media_count = media_count | plus: 1
  endif
%}
```

### Web Components Foundation

Horizon uses custom web components for interactive functionality, providing a clean separation between presentation and behavior:

```javascript assets/component.js theme={null}
export class Component extends DeclarativeShadowElement {
  /**
   * Base class that powers custom web components.
   * Manages references to child elements with `ref` attributes
   * and sets up mutation observers to keep refs updated.
   */
  refs = {};
  
  connectedCallback() {
    super.connectedCallback();
    this.#updateRefs();
  }
}
```

<Tip>
  Components inherit from `DeclarativeShadowElement`, which provides automatic shadow DOM hydration for server-rendered content.
</Tip>

### Progressive Enhancement

The theme is built to work without JavaScript and enhance when it's available:

* Core shopping functionality works with pure HTML and CSS
* JavaScript progressively enhances the experience
* Declarative event listeners using `on:` attributes
* Automatic component hydration for dynamic sections

### Theme Customization

Horizon provides extensive customization through the theme editor:

**Color Schemes**

```json config/settings_schema.json theme={null}
{
  "type": "color_scheme_group",
  "id": "color_schemes",
  "definition": [
    { "type": "color", "id": "background", "default": "#FFFFFF" },
    { "type": "color", "id": "foreground_heading", "default": "#000000" },
    { "type": "color", "id": "primary", "default": "#000F9F" }
  ]
}
```

**Typography System**

* Four font stacks: Body, Subheading, Heading, and Accent
* Automatic font face generation with `font_display: 'swap'`
* CSS custom properties for consistent typography

## Architecture Overview

Horizon follows Shopify's standard theme structure with enhanced organization:

```
source/
├── assets/          # JavaScript, CSS, and static assets
│   ├── component.js        # Base web component class
│   ├── cart-drawer.js      # Cart functionality
│   └── product-media.js    # Product galleries
├── blocks/          # Reusable theme blocks
│   ├── _card.liquid        # Card component
│   ├── _announcement.liquid
│   └── _blog-post-card.liquid
├── sections/        # Page sections
│   ├── header.liquid       # Header section
│   ├── hero.liquid         # Hero section
│   └── footer.liquid       # Footer section
├── snippets/        # Reusable Liquid snippets
│   ├── button.liquid       # Button component
│   ├── price.liquid        # Price display
│   └── product-card.liquid # Product cards
├── templates/       # Page templates
├── layout/          # Theme layouts
│   └── theme.liquid        # Main layout
├── locales/         # Translations
└── config/          # Theme settings
    └── settings_schema.json
```

## What's Next?

Ready to start building with Horizon? Here's where to go next:

<CardGroup cols={2}>
  <Card title="Getting Started" icon="rocket" href="/getting-started">
    Set up your local development environment and start customizing Horizon
  </Card>

  <Card title="Core Concepts" icon="book" href="/architecture/overview">
    Learn about Horizon's architecture, component system, and design patterns
  </Card>

  <Card title="Components" icon="cube" href="/components/sections/overview">
    Explore the web components and Liquid snippets that power Horizon
  </Card>

  <Card title="Theming" icon="palette" href="/customization/settings">
    Understand the theming system, color schemes, and typography
  </Card>
</CardGroup>

## Important Notes

<Warning>
  **Theme Store Restriction**

  If you're building a theme for the Shopify Theme Store, **do not use Horizon as a starting point**. Themes based on, derived from, or incorporating Horizon are not eligible for submission to the Shopify Theme Store. Use the [Skeleton Theme](https://github.com/Shopify/skeleton-theme) instead.
</Warning>

<Info>
  **Bleeding Edge Features**

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

## Resources

* [GitHub Repository](https://github.com/Shopify/horizon)
* [Shopify Theme Documentation](https://shopify.dev/docs/themes)
* [Liquid Reference](https://shopify.dev/docs/api/liquid)
* [Theme Check](https://shopify.dev/docs/themes/tools/theme-check)