A Developer’s Technical Breakdown of Shopify’s Horizon Theme

Like Dawn, Horizon follows the Online Store 2.0 format, but its structure is denser due to more visual and interactive features.

/assets
  app.css
  animations.js
  product-media.js
/blocks
  _card.liquid
  button.liquid
/config
  settings_schema.json
/layout
  theme.liquid
/locales
  en.default.json
/sections
  main-product.liquid
  hero-banner.liquid
/snippets
  account_actions.liquid
/templates
  index.json
  product.json

What’s different between Horizon and Dawn?

Well, there are more prebuilt hero, carousel, and animated media sections as well as an assets folder that includes dedicated JS for animations and Lottie or Scroll-based effects.

Pros:

• Rich components out of the box (hero banners, grid animations, sticky product blocks).
• Great for storytelling-based layouts or high-AOV brands.
• Still supports drag-and-drop editing and section blocks.

Cons:

• Heavier structure than Dawn — more files, more dependencies.
• Increased complexity for beginners, modifying layout or animations.

Best Practices with the file structure and architecture:

• Fork and modularise your changes. Avoid editing Shopify’s animated components unless you know how they work.
• Reuse snippets and avoid bloating templates with visual logic.

One of the defining characteristics of the Horizon theme is its heavy reliance on section blocks as first-class components, rather than treating blocks as simple repeatable content units. In Horizon, blocks are not just placeholders for text or images; they often represent self-contained UI components with their own animation logic, layout behavior, and styling rules.

Where Dawn uses blocks sparingly and predictably, Horizon pushes blocks much further.

In Horizon, blocks are commonly used for:

• Hero media layers (image, video, overlay text)
• Product storytelling elements (feature callouts, scroll-revealed copy)
• Editorial content (quotes, split layouts, image + narrative blocks)
• Animated UI fragments (fade-in text, parallax images, staggered lists)

A single section may support many block types, each with its own schema and behavior:

<div
  class="group-block color-{{ block.settings.color_scheme }}"
>
  {% content_for 'blocks' %}
</div>

{% schema %}
{
  "name": "Group",
  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
  "settings": [
    {
      "type": "header",
      "content": "Color"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    }
  ],
  "presets": [
    {
      "name": "Group"
    },
    {
      "name": "Column",
      "settings": {
        "color_scheme": "scheme-3"
      },
      "blocks": [
        {
          "type": "text",
          "settings": {
            "text": "<h3>Hello, world!</h3>"
          }
        },
        {
          "type": "text",
          "settings": {
            "text": "<p>How's it going?<\/p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}

In Dawn, sections typically control layout and blocks control content.

In Horizon, blocks control experience.

Blocks may:

• Trigger animations when entering the viewport
• Influence scroll behavior
• Modify layout density or spacing
• Enable or disable visual effects per component

This makes Horizon feel more like a design system than a traditional theme.

• Extreme flexibility: Merchants can rearrange complex layouts without requiring code changes.
• Granular control: Animations and visual effects can be toggled per block.
• Component thinking: Encourages developers to build reusable, isolated UI units.
• Editorial storytelling: Ideal for long-form product pages and brand narratives.

• Higher complexity: Blocks often depend on specific DOM structure and JS hooks.
• Schema bloat risk: Sections with many block types can become hard to maintain.
• Editor overwhelm: Too many block options can confuse non-technical users.
• Tighter coupling: Removing or restructuring blocks can break animations if not handled carefully.

1. Treat blocks like components
Design each block as a self-contained unit with clear responsibilities (markup, animation, settings).

2. Use block-level toggles
Always provide simple on/off toggles for animations or effects. This helps accessibility and performance tuning.

3. Keep block schemas focused
Avoid dumping every visual option into every block. Horizon works best when blocks have a clear purpose.

4. Test block combinations
Because merchants can stack blocks freely, always test edge cases:

• Multiple animated blocks in sequence
• Empty or disabled blocks
• Mobile vs desktop behavior

5. Respect reduced-motion preferences
Ensure block animations gracefully disable when prefers-reduced-motion is active.

If Dawn teaches you how Shopify themes should be structured, Horizon teaches you how far that structure can be pushed. Mastering Horizon’s block system means thinking less like a theme editor and more like a frontend architect, striking a balance between flexibility, performance, and usability.

Used carefully, Horizon’s block system enables some of the most compelling native storefront experiences Shopify has ever shipped — without relying on third-party page builders or heavy JS frameworks.

You can find out more about theme blocks by reading the Shopify documentation here:

https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/quick-start?framework=liquid

Horizon uses CSS custom properties like Dawn, but it leans more into animations and transitions. Expect rich visuals via @keyframes, scroll-tied effects, and media overlays.

Well base.css contains global styling, animations, and utility classes, but Horizon makes use of CSS animation layers for hero sections, transitions, and parallax scrolling. Another concept is the responsive layout tokens that are used and are based on container queries.

This innovative use of responsive layout tokens powered by container queries is a cutting-edge CSS feature that elevates responsive design beyond traditional viewport-based approaches.

What Are Responsive Layout Tokens?

Responsive layout tokens are design system variables representing key styling attributes such as spacing, typography, and sizing. Unlike fixed values, these tokens dynamically adjust based on the size of the component’s containing element. This enables components to respond not just to the overall screen size, but to the specific space they occupy, fostering a highly modular and adaptable UI.

The Role of Container Queries

Traditional responsive design relies heavily on media queries that adjust styles according to the viewport’s width. While effective, this method limits components to respond only to the screen size, regardless of their placement within the page. Container queries, on the other hand, empower components to adapt styles based on their own container’s dimensions. This paradigm shift allows for more granular control and improved flexibility in responsive layouts.

How Horizon Implements Responsive Tokens with Container Queries

Shopify’s Horizon theme defines layout tokens with multiple values tailored to different container widths. Using CSS @container rules, Horizon applies these tokens conditionally, updating their values as the container’s size changes. Components then consume these tokens via CSS custom properties, enabling seamless adjustment of padding, font sizes, and other layout features based on container context.

For example, a component’s padding token might increase as the container grows, ensuring consistent spacing whether the component is displayed in a narrow sidebar or a full-width main section. This approach centralises design decisions and promotes consistency across the theme.

Advantages of This Approach

By leveraging responsive layout tokens and container queries, Horizon achieves a context-aware design that enhances modularity and maintainability. Developers can move components across different sections without breaking their layout integrity, while designers maintain centralised control over styling through tokens. This technique also future-proofs the theme as browser support for container queries continues to expand.

Harnessing the power of responsive layout tokens in conjunction with container queries represents a significant step forward in building adaptive, robust Shopify themes. Horizon’s implementation serves as a model for designing components that truly respond to their environment, creating a seamless and engaging user experience.

Here’s a simplified example illustrating this approach:

/* Define the container */
.component-container {
  container-type: inline-size;
}

/* Base component styles use a CSS custom property */
.component {
  padding: var(--layout-padding, 12px);
  font-size: var(--font-size, 14px);
}

/* Container queries adjust token values based on container width */
@container (min-width: 400px) {
  .component {
    --layout-padding: 16px;
    --font-size: 16px;
  }
}

@container (min-width: 800px) {
  .component {
    --layout-padding: 24px;
    --font-size: 18px;
  }
}

In this example.component-container is designated as a container using container-type: inline-size;. The .component Inside uses CSS custom properties --layout-padding and --font-size to define its padding and font size. As the container width crosses 400px and 800px thresholds, the container queries update these tokens accordingly. This means the component’s spacing and typography adapt dynamically to the space available, independent of the overall viewport size.

Pros of the styling system:

• Highly visual, immersive, and fast-loading thanks to CSS-native transitions.
• No reliance on heavy frameworks like GSAP or jQuery.

By leveraging responsive layout tokens and container queries, Horizon achieves a context-aware design that enhances modularity and maintainability. Developers can move components across different sections without breaking their layout integrity, while designers maintain centralized control over styling through tokens. This technique also future-proofs the theme as browser support for container queries continues to expand.

Cons:

• CSS logic can be hard to follow — many sections rely on interaction states set by JavaScript.
• Harder to theme for minimal or B2B brands due to visual defaults.

Best Practices:

• Avoid overriding core animations directly — instead, disable via section settings or use alternate layout classes.
• Customise tokens using :root variables (colours, spacings, etc.).
• Use theme.liquid to inject additional styles in a scoped way.

Horizon goes beyond Dawn’s minimal JS approach. It includes scroll-triggered animations, sticky product behaviors, and even intersection observer-based effects.

• Modular components in /assets (e.g. media-gallery.js, sticky-header.js), the use of custom elements (<horizon-media>) and data attributes (data-animate-in) and it also implements requestAnimationFrame loops for buttery-smooth scroll transitions

Pros:

• Highly interactive — scroll reveals, fade-ins, sticky product summaries.
• JavaScript is cleanly scoped and tied to each section for modularity.
• Fast loading, even with complex visuals, due to minimal framework use.

Cons:

• Requires a deeper understanding of DOM APIs and performance tuning.
• More points of failure if you remove or alter scroll-tied components.

Best Practices:

• Test scroll performance on low-end mobile devices.
• Use section settings to toggle animations off instead of editing JS directly.
• Stick to the provided structure — each script assumes DOM conventions.

Horizon expands upon Dawn’s block-based design system. Each section comes with more configurable schema options, including:

• Parallax backgrounds
• Overlay color blending
• Scroll speed adjustment
• Block-level animations

{
  "type": "image",
  "settings": {
    "parallax": true,
    "speed": 0.3,
    "fade_in": true
  }
}

Pros:

• Extremely flexible layout builder — control media, spacing, and animation speed per block.
• Merchants get deep control without writing code.
• Supports long-form storytelling and product launches.

Cons:

• Complex schemas can feel overwhelming for clients.
• Requires more QA testing, especially across screen sizes.

Best Practices:

• Use logical schema defaults and provide short descriptions for each field.
• Don’t overconfigure — less is more.
• Group related settings into objects when extending.

Despite being more interactive, Horizon still targets high Core Web Vitals scores. Shopify has done a good job of minimising JS weight and optimising animation performance, as well as including accessibility features such as:

• ARIA roles on modals and menus
• Motion-reduction support (prefers-reduced-motion)
• Logical tab ordering and keyboard support on product modals

Pros:

• Great balance between animation and performance.
• Responsive across devices and screen sizes.
• Includes motion-safe defaults for accessibility compliance.

Cons:

• Some motion-heavy features may be overkill for performance-sensitive storefronts.
• Custom animations may require manual testing for screen readers.

Best Practices:

• Test with Lighthouse and Accessibility Insights regularly.
• Offer fallback layouts in case animations are turned off or fail to load.
• Avoid layering too many effects (e.g., parallax + video + scroll lock).

Horizon isn’t meant to be stripped down. If you don’t need visual storytelling, it may be overkill, but if you’re customising for a brand with rich photography, video, and editorial content, it’s an ideal option.

Customisation Tips for Horizon:

• Use the Shopify CLI (theme serve, theme pull) to version your changes.
• Add your own animated sections using Horizon’s animation schema structure. You don’t necessarily need to rework the out-of-the-box functionality.
• Use metafields and dynamic sources to personalise hero sections, video reveals, and testimonials.

Customisation Pros:

• Built for branded content and design flexibility.
• Easy to extend with modular JS and section blocks.
• Shopify’s Theme Editor supports all Horizon-specific features.

Customisation Cons:

• Theme updates may be harder to merge if you’ve modified core animated behavior.
• Requires attention to design hierarchy — visual overload is a risk.

Horizon is Shopify’s most ambitious reference theme to date. Where Dawn is minimal and general-purpose, Horizon is expressive, rich, and ideal for storytelling-driven stores. If you’re building a storefront for a premium brand with strong imagery, Horizon gives you the tools to craft immersive product experiences.

But with power comes complexity. Developers customising Horizon should be familiar with CSS animations, modular JavaScript, and advanced schema configuration. Done right, Horizon isn’t just a theme — it’s a branded platform in a box.