Part 3: How Horizon Theme Blocks Work

Shopify’s Online Store 2.0 introduced one of the most powerful developer features to date: theme blocks. But understanding how blocks — especially group blocks — actually work can feel a bit abstract until you see them in action.

In this video, we break it down from both a merchant-friendly and developer-focused lens, using the popular Horizon theme and Shopify’s Skeleton theme as our playground.

What Are Group Blocks?

Group blocks are like containers for other blocks. Imagine a layout where each row might have a heading, description, and image — and you want to reuse that group multiple times.

With Horizon (and Flexi), group blocks let you define entire content chunks in a clean, modular way. It’s how you go from a static section to something reusable, reorderable, and totally flexible — without extra markup clutter or rigid settings.

Part 1: Visualizing Group Blocks in Horizon

 

We started the video by exploring how Horizon implements group blocks. You’ll see:

• How nested content appears in the theme editor
• Why groups make it easier for merchants to customize layouts
• What it looks like when you add, remove, or reorder a group block

This part is great for merchants, designers, or developers looking to understand why blocks matter — not just how to build them.

Part 2: Building a Text Block with Shopify Skeleton

In the second half of the video, we opened up Visual Studio Code and got hands-on using the Shopify Skeleton Theme.

We created a simple text-block section using:

• type: block schema definitions
  
• Clean markup using {{ block.settings.text }} and block.shopify_attributes
• Presets to pre-fill demo content for a smooth onboarding experience

The goal was to show how simple it is to create modular content areas — and how Shopify’s block structure scales with you as you build out custom layouts.

Developer Tips from the Video

 

1. Use block.shopify_attributes to keep blocks compatible with drag-and-drop editing
2. Keep block types specific (text_block, image_row) to make your logic clear
3. Use presets to help users visualize content before they start customizing
4. Group blocks can be used recursively for complex layouts (e.g. FAQs inside tabs)