Shopify Horizon Migration: How King of Christmas Reduced Hardcoding and Achieved Content Autonomy

We joined the project as an embedded development partner, providing a dedicated senior engineer for day-to-day store support and scaling. Initially, the platform ran on Shopify’s standard Dawn theme. Over years of active sales, previous developers had extended it with numerous custom templates, sections, and large amounts of hardcoded logic. As a result, the store became extremely fragile: even changing a link, color, or button label required developer involvement and carried the risk of breaking the layout.

The client seriously considered a headless rebuild. However, after assessing the risks and timeline, our engineers proposed an alternative – migration to Shopify’s new, flexible Horizon theme. A headless architecture would have required hundreds of development hours from scratch. Horizon met the required performance and flexibility goals and supported the Shopify-native structures needed for the client's bundle implementation.

We rebuilt the storefront architecture around the Horizon theme. Our strategic goal was not simply to transfer the old design onto a new framework, but to fundamentally rethink the customer journey at the most important conversion points – product pages, the cart, and collection pages.

Key reusable content elements were migrated to Shopify Metaobjects, Metafields, and modular theme sections, allowing the client to manage routine storefront content directly through the Shopify admin panel.

Moreover, we developed solutions that enabled advanced marketing functionality – such as combining related products into unified listings – using Shopify’s native platform and theme capabilities.

1. Engineering Journey

Legacy Limitation (Rigid Hardcoding and Dependency)

In the old Dawn theme, the mega menu and collection pages were implemented through a complex chain of conditional statements in Liquid. Any content update could trigger cascading navigation display errors, preventing content managers from working independently.

Engineering Solution (Dynamic Modular Architecture)

We developed a flexible navigation system based on Horizon’s native menu blocks and connected them to metaobjects. This made every mega-menu element – including custom headings, descriptions, images, and buttons – fully manageable directly through the Shopify Theme Customizer.

The most delicate task was integrating the official Combined Listings app for seamless switching between related products – such as Christmas trees in different colors or heights – without reloading the page. We had to fully synchronize its logic and visual styling with the Horizon theme.

An issue emerged with the popular Judge.me review plugin: when switching between related products through Combined Listings, the review widget did not update automatically. Our team initiated a collaboration with Judge.me technical support and the Combined Listings developers. As a result, Judge.me implemented proper support for this scenario on its side, which we successfully integrated into the store, avoiding fragile custom workarounds.

2. Custom Solutions

To maximize conversion and improve the customer experience, we developed several custom engineering solutions:

• Metaobject-powered mega menu: a modular navigation system where every menu item, banner, or button can be configured individually in the admin panel without modifying template code.

• Sales system: a promotional page with a countdown timer operating across three time-based states. A custom JS script determines the current phase (pre-sale / live-sale / post-sale) and automatically switches templates to display the appropriate banners and promotional product bundles.

• Recently Viewed section: a custom module that stores IDs of products viewed by the user in session and cart properties, allowing customers to quickly return to selected products from any page of the store.

• Cart savings calculator: a solution that goes far beyond Shopify’s standard discount display. The script combines discounts, compare-at-price differences, and a configured shipping value from metafields into a single, easy-to-understand savings summary for the customer.

3. Technology Stack and Specific Tools

• Core Stack: Shopify Horizon theme, Liquid, JavaScript, HTML5.

• Content Management Tools: Shopify Metaobjects & Metafields, Matrixify.

• Marketing and Communications: Omnisend, Gobot, Consentmo.

• Analytics and Monitoring: Microsoft Clarity.

• Product & UX Integrations: Combined Listings, Judge.me, Shopify Search & Discovery. 

The result is a flexible, scalable Shopify architecture that eliminates fragile hardcoded dependencies while giving the marketing team full control over content and promotions. At the same time, custom integrations ensure a seamless customer experience without compromising store stability. 

Before

• Content bottleneck: even the smallest changes to button copy, banner colors, or navigation links required a developer to edit the source code.

• Broken navigation: cascading menu logic meant that changing one item could cause other sections to disappear.

• Slow campaign launches: sales and promotional banners had to be configured manually in the code, making it impossible to respond quickly to market trends.

• Dawn theme limitations: the client’s heavily customized Dawn implementation did not support the Combined Listings functionality required for seamless switching between related products.

After

• Content independence for routine updates: the marketing team can manage text, buttons, links, colors, and other routine content directly through the Theme Customizer without developer involvement.

• Stable and reliable navigation: the new metaobject-powered mega menu works reliably, allowing promotional banners and links to be edited separately for each menu item.

• Automated promotional toolkit: the custom timer system and cart savings calculator simplified holiday campaign execution and presented promotional savings more clearly to customers.