Part 4: How to Build Custom Product Blocks in Horizon (Without Breaking the Theme)

Brandon Landgraff

How to Build Custom Product Blocks in Horizon (Without Breaking the Theme)


If you’ve worked with Shopify’s new Horizon theme, you’ve probably noticed it comes packed with product page flexibility — but also a fair bit of complexity.


In this post (and accompanying video), I’ll show you how to take control of your product blocks using Horizon’s built-in tools, a few app blocks, and just a little bit of custom code. Whether you’re freelancing or building for a large brand, this workflow will help you make scalable, update-safe customizations.


Use the Group Block to Stack Existing Elements


Horizon’s Group Block is one of the most powerful (and underutilized) tools in the theme. You can use it to combine text, images, icons, and buttons into flexible product blocks — all without writing a line of code.


Example use cases:

  • Build a 3-feature icon block using existing image and text blocks
  • Stack ingredients, specs, or size charts using dynamic sources
  • Create grid layouts for product highlights


For many merchants, that’s enough. But if you want more control or want to ship reusable components, it’s time to reach for app blocks.


Why App Blocks Are a Great Alternative


If you’re building a theme app extension (like Flexi does), app blocks give you full control over layout, schema, and logic — all while staying theme update–safe.


App blocks:

  • Are scoped and modular
  • Persist across theme updates
  • Can pull data from the product, variant, or metafields
  • Support custom settings and logic via Liquid + schema


This makes them perfect for reusable product blocks like:

  • Feature callouts
  • Ingredient breakdowns
  • Subscription widgets
  • Badge or trust icons


Both App Blocks and AI Blocks Work with Theme Updates


One of the common questions I get:


“Will these custom blocks survive when a merchant updates the theme?”


Short answer: yes, if you’re using app blocks or Shopify’s AI-generated blocks, you’re in safe territory. Both are managed outside the theme code itself and won’t get overwritten during a theme update.


On the other hand, hardcoding sections inside the theme — especially in main-product.liquid — is risky long-term. That’s why I always lean on app blocks when working in Horizon.

 

Create Your Own Product Block (with a Tiny Bit of Code)

 

In the video, I walk through building a custom product block with:

  1. A simple text title
  2. Schema setting to adjust color
  3. Range slider to adjust font size
  4. Hardcoded metafield data

 

At the end of the video, you'll have a rough understanding of how to build your first product block in Horizon.

 

Final Thoughts

 

It's best to build custom blocks by using the group block in combination with basic blocks in Horizon. If more functionality is needed, app blocks or building custom blocks are the way to go.

Back to Resources