3 min read

Shopify’s AI push brings storefronts back to HTML

Shopify is replacing JSON-heavy theme architecture with HTML and Liquid, cutting its new theme by 93% and making it easier for humans and AI agents to modify.

Image: The Register

Shopify is redesigning its storefront foundation around a deceptively old idea: source code should be readable. The e-commerce company is developing an unnamed theme that replaces much of Horizon’s JSON-heavy structure with ordinary HTML and Shopify’s Liquid templating language.

Shopify says the new theme has 93% fewer lines of code than Horizon. Its templates will be plain-text files that developers can inspect, modify, and extend without decoding long serialized configuration files. The company is presenting the theme in developer forums as a likely successor to Horizon, while continuing to support existing Liquid themes through a “forever API.”

Why Shopify is moving away from JSON

The shift follows a decade of expanding customization. Shopify’s Online Store Editor gave merchants increasingly fine-grained control over pages and reusable “block” components, but that flexibility came with a cost: template instructions were eventually represented as JSON.

“That trade-off gave merchants far more control, but it came with a developer-experience cost: you could no longer understand a page by reading one file.”

Ben Sehl, Shopify product director for storefronts

Shopify’s Sidekick assistant has made the trade-off more pressing. The tool lets merchants describe changes in natural language rather than remember implementation details such as the HTML color value #0000FF. This year, 20% of Shopify merchants are using Sidekick to edit themes, generating 25 million edits so far.

Recommended reading

Three professionals set to thrive in the AI agent era

Shopify concluded that AI agents need many of the same properties developers do: readable code, explicit contracts, and useful feedback. Sehl argued that the problem is not JSON itself, but the constrained vocabulary of serialized configuration.

“Every leading model already understands HTML. It is expressive, local, and token-efficient.”

Ben Sehl, Shopify product director for storefronts

Liquid gets composable blocks and partial updates

The new architecture adds a revised Liquid syntax and parser for more complex back-end instructions, while keeping the user-facing code close to standard HTML. Each theme receives a dedicated directory and files that describe how related artifacts should be generated. An expanded documentation tag provides examples and instructions for contracts and snippets.

Key additions include:

  • Composable blocks with nested parameters for values, configurations, overrides, and other instructions.
  • Partials that update a specific page region without re-rendering the entire page.
  • Standard actions for events such as updating a shopping cart.
  • 20 new rules covering contracts, structure, validation, complexity, nesting, and file-size limits.

The composable blocks may feel familiar to React developers, whose props serve a similar role, but Shopify’s implementation does not require a virtual DOM. Shopify says standard actions could remove thousands of lines of reactivity code from Horizon.

Liquid will also support Boolean expressions, infix operators with precedence, and literal arrays and objects. Shopify plans to support the Tailwind CSS framework at some point in the future.

The practical difference is that merchants can add elements directly in HTML as their designs evolve. In a settings-driven architecture, a developer may need to anticipate the number of buttons before laying out a page; with HTML, additional buttons can simply be wrapped in a div.

Shopify’s approach reflects a broader shift in how developers think about code for language models. Dense, symbolic-heavy formats are not always the easiest for models to process, while semantically rich text—and even formats such as XML, which Anthropic recommends for prompting—can be more effective. For Shopify, optimizing themes for agents has also produced a simpler surface for humans.

Marcus Vance

Enterprise Editor

Marcus follows the money. He covers enterprise software, cloud architecture, and the tectonic shifts in Big Tech strategy. He translates dense earnings calls and complex M&A activity into actionable insights about where the industry is actually heading. If a tech giant makes a silent pivot, Marcus is usually the first to notice.

via The Register

/ Keep reading