How AI drove Shopify back to clean code

E-commerce platform Shopify wants to make reading source code a thing again. And it has an unlikely ally for its back-to-the-roots approach: AI agents. 

The company is launching a new storefront theme for its customers, aka “merchants,” that it claims is completely understandable by anyone with even a smidgen of HTML knowledge. It is designed to be simpler for both people and machines to digest and hack against. 

Shopify hasn’t named this new theme yet, but is unveiling it in developer forums as the probable successor to Horizon, its current JSON-heavy base theme, which customers use to customize their own Shopify pages. 

The new code is mostly HTML, interpolated by the company’s own block-based Liquid templating language, which is also fairly easy on the eyes. 

When merchants peek into the templates directory of this new theme, they will see plain-text files of easy-to-parse code, not long strings of inscrutable JSON. This theme has 93% fewer lines of code than Horizon. 

The company’s increasingly popular AI service is driving this rearchitecture redesign. 

“Every leading model already understands HTML. It is expressive, local, and token-efficient,” wrote Ben Sehl, Shopify product director for storefronts, in a missive on X. And Shopify’s Liquid template language meshes perfectly with HTML. 

From merchants to merchandisers

In his post, Sehl recalled a decade ago, when he was a merchant himself, and Shopify only offered a basic template. It was easy for Sehl, then a novice web coder, to modify with a third-party starter kit. 

Over time, Shopify enriched the templating, allowing users to become full-fledged designers. The Online Store Editor gave them more control over how a page and its various “block” components would look like. Every button and knob could be customized.

Flexibility begets complexity, however. The user template instructions were converted to 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,” Sehl wrote. 

“The moment templates became JSON, they stopped being a great developer surface. They became an auto-saved output,” Sehl wrote. 

Good for the bot, good for the human

Recently, Shopify added an AI assistant called Shopify Sidekick, which gave users even more control over how they designed their pages. No longer would they have to remember that #0000FF means ‘Blue’ in HTML speak. They just “declare” the background color to be blue and the agent will make it so. 

This year, 20% of Shopify merchants are using Sidekick to edit their themes, making 25 million edits this year alone. 

Consequently, Shopify faced the task of simplifying things for the AI agent itself. 

It turns out that agents want the same things as humans: code that is easy to read, explicit contracts, and constructive feedback. So the company has reorganized its theme architecture using these qualities as first principles (while maintaining existing Liquid themes in a “forever API”).

While these changes better support our new AI overlords, the underlying code also became more readable to humans as well. 

“The deeper problem with serialized configuration isn’t that JSON is inherently bad. It’s that configuration has a constrained vocabulary,” Sehl explained.

Reveal source code

For this new base theme, Liquid gained a new syntax and parser, built with some additional discipline to execute more complex instructions on the back-end. What the user sees, however, are composable, typed blocks that fit easily alongside ordinary HTML.

In this new approach, each user-designed theme is given a special directory and files with instructions and pointers of how additional artifacts should be generated. Furthermore, an expanded doc tag contains examples and instructions on handling contracts and snippets.

Key to the new theme is a new composable block tag, which contains a set of nested parameters describing page components that the developer can feed with values, configurations, overrides, and other instructions. 

React devs will recognize parameters as doing a similar job to React’s props, but without the need to create a virtual DOM.  Also familiar to React users will be the new partial primitive, which allows a specific region of a page to be updated without needing to re-render the entire page. 

The team also added standard actions, a collection of event triggers for the site, such as, say, updating the shopping cart. “This one primitive will let us remove thousands of lines of reactivity code from Horizon,” Sehl wrote. 

Shopify also developed 20 new rules to ensure generated themes meet the company’s policies around contracts, structure, validation, complexity, nesting, and file-size limits.  

And if the user wants to get fancy, Liquid now allows for logical capabilities such as Boolean expressions, infix operators with precedence, and literal arrays and objects. At some point in the future, the Tailwind CSS framework will even be supported.  

All these improvements should simplify things for the merchant at home, trying to assemble a customized storefront.

For instance: In a declarative, settings-driven architecture, the developer must anticipate how many buttons they plan to use before they start the layout. With HTML, when the merchant discovers they need additional buttons, they just wrap them all in an HTML div tag.

Palatable for AI

AI experts are slowly coming around to the idea that the best diet for AIs is not dense, symbolic-heavy code — at least for non-coding tasks. Like humans, LLMs seem to do better on a diet of more easily-understandable prose (LLMs were, after all, trained on human language). 

One developer, for instance, found that SQL was easier to process compared to the Domain Specific Languages (DSLs) of 17 different tools. For prompting, Anthropic recommends the semantically-rich XML, whereas a decade ago that format was largely cast aside by the industry for the leaner, less-verbose JSON. 

Perhaps Shopify’s efforts to appease AI may lead not to more slop but to a movement for more readable code. ®