Getting Started with AI Blocks in Shopify’s Horizon Theme
A hands-on look at how AI blocks work, how they’re structured, and how to use them beyond Horizon.
It’s been just over a month since Shopify’s Editions.dev conference, and I’m finally taking a closer look at the new theme that was launched - Horizon. The headline feature is AI-generated blocks, which let non-developers create custom layouts directly from the theme editor. I gave it a quick spin when it first dropped - tested a few blocks, played around - but now it’s time to dig deeper. I want to understand what’s really changed under the hood, and where the limitations of AI blocks start to show.
A New Layer in the Stack
The first thing I noticed when opening Horizon in my editor was a brand new top-level folder called “blocks”. Whoa! That’s a big deal - Shopify’s core theme structure has barely changed in years. Even when major features like Online Store 2.0 were introduced, the main folders stayed the same. The concept of theme blocks was teased at last year’s conference, but Horizon is the first time we’re seeing them go live. It makes sense that theme blocks now have their own place in the hierarchy - they can be used globally, and can even be nested inside other blocks. Still, the fact that Shopify added a new top-level folder speaks volumes about how central this change is to the future of theme architecture.
Looking at the block file names, many are prefixed with an underscore - similar to how partials are named in Rails. It’s a convention that signals these blocks aren’t meant to stand alone; they’re cogs in a larger machine, used inside other blocks or sections. Some files - like “add-to-cart.liquid” or “button.liquid” - don’t use the underscore at all. This suggests the convention isn’t required by Shopify, just a way for developers to keep the blocks folder tidy and make the purpose of each file more immediately obvious. Something to note for best practices moving forward.
Behind the Scenes of AI Block Generation
By default, there are no AI-generated blocks in the theme. When I created one from the theme editor, it didn’t show up in my local files either. I had to do a pull from my development theme in order to get the block into the codebase. This is not ideal, as it means also pulling in other code that I may only want during development, such as settings choices for a section I’m testing. Another consideration is that if a production theme with AI blocks isn’t synced to the codebase before a release, those blocks could easily be overwritten during the process.
My prompt for the AI block was, “I would like a block with a party parrot emoji dancing around.” When the block was pulled into my theme files, I was expecting something like “party-parrot.liquid”. Instead, I got “ai_gen_block_3c97e08.liquid”. Catchy! Fortunately, renaming the file didn’t affect functionality, but it’s easy to imagine how things could get messy if AI-generated blocks aren’t renamed right away. Inside the file, the original prompt is saved at the top using the new LiquidDoc format. This is strictly for documentation purposes - the prompt itself is not used again once the block is generated.
Getting AI Blocks to Work Outside Horizon
One of the first questions I had when Horizon launched was whether AI-generated blocks would work in older themes or existing projects. Are they tied to something in the schema? Or is there a deeper dependency unique to Horizon? At first glance, it’s not obvious what enables the “generate” option to appear in the theme editor. Is it a feature of the theme’s architecture, or something Shopify selectively enables only for Horizon?
The first thing I tried was creating a new section in Horizon, by duplicating an existing section that does have AI blocks, and changing the name so there would be no conflicts. That worked, as long as the “@theme” block type was included in the schema. Once it was removed the “generate” button disappeared from the editor.
I also tried adding the theme block type to the footer section, which previously did not have the “generate” button. This also worked, so it seems - in Horizon at least - that adding the theme block type to a section unlocks the AI generation. But what about themes apart from Horizon? Time to try it out.
Following our previous example, I opened an older theme using the 2.0 architecture - Spotlight - and tried adding the theme block type to the schema for the footer section. This unfortunately showed the error message, “Theme blocks and section-defined blocks can not be used together”. Okay, good to know. I deleted all block types except for “@app” and “@theme”, as well as all references to them in the code, and headed back to the theme editor. Would I see the “generate” button in the footer? I did - it worked!
So it appears all you need to do to add AI blocks to a 2.0 theme is add the “@theme” block type, and make sure there are no block types that are only defined in the section. This is cool, but means theme blocks are only really useful for new sections, or sections you are willing to refactor using the available block types, deleting your previous block definitions.
After this I went and read the updated documentation on blocks, which would have saved me some time, but hey, sometimes I like to do things the hard way. 🤷
What This Means for Theme Developers
Horizon isn’t just a new theme - it’s a signal. Shopify is moving toward a more modular, composable architecture where blocks are the primary unit of layout and customization. The addition of AI generation is just the surface layer; the real shift is in how themes are structured and extended.
If you’re building or maintaining themes, understanding theme blocks - and when to use them instead of traditional section-defined blocks, or snippets - is now essential. And if you’re a merchant or designer, this unlocks a lot more flexibility, especially as Shopify’s AI gets better at generating usable, brand-aligned components (and better dancing parrots).
For now, theme blocks and AI generation work best in a fresh, Horizon-based context, but with a bit of effort, you can start using them in 2.0 themes too. Whether that’s worth it for your use case depends on how modular you want your theme to be going forward.