Skip to main content
Horizon Theme

​
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, and represents a modern approach to theme development on Shopify.
Current Version: 3.4.0Horizon is actively developed by Shopify. The main branch may include code for features not yet released.

​
Core Principles

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

Web-Native

Leverages the evergreen web to its fullest. Built for modern browsers while maintaining support for older ones through progressive enhancement, not polyfills.

Lean & Fast

Every feature must justify its inclusion. Functionality and design defaults to “no” until it meets quality requirements. Code ships on purpose.

Server-Rendered

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.

Functional First

The web doesn’t require pixel-perfect rendering across browsers. Using semantic markup and progressive enhancement, Horizon remains functional regardless of browser.

​
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
snippets/section.liquid
{% 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:
assets/component.js
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();
  }
}
Components inherit from DeclarativeShadowElement, which provides automatic shadow DOM hydration for server-rendered content.

​
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
config/settings_schema.json
{
  "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:

Getting Started

Set up your local development environment and start customizing Horizon

Core Concepts

Learn about Horizon’s architecture, component system, and design patterns

Components

Explore the web components and Liquid snippets that power Horizon

Theming

Understand the theming system, color schemes, and typography

​
Important Notes

Theme Store RestrictionIf 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 instead.
Bleeding Edge FeaturesThe 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.

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us