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