Shopify’s Theme Blocks are a revolutionary feature, allowing us to build complex, configurable sections from smaller, reusable components. The ability to nest blocks within blocks unlocks a new level of flexibility, promising a future where merchants can build almost any layout imaginable.
But with this great power comes a great risk. As one developer astutely noted after creating a deeply nested component structure, “It wasn’t until merchandising got in there that I learned I’d created a monster.”
Just because you can nest five levels of blocks to give a merchant control over every single element doesn’t mean you should. The art of great theme architecture lies in finding the balance between flexibility and usability. This guide will help you avoid building your own monster.
The Pitfall: The Road to “Block-ception”
Let’s consider a common component: a product slider. An inexperienced developer, eager to provide maximum control, might architect it like this:
- Section:
product-slider.liquid- Block:
slide(Repeatable for each product)- Nested Block:
product-image - Nested Block:
product-heading - Nested Block:
product-price - Nested Block:
product-rating - Nested Block:
quick-buy-button
- Nested Block:
- Block:
On the surface, this seems great. The merchant can reorder the heading, price, and image however they want! But in practice, you’ve created a nightmare. To edit a simple product slider, the merchant now has to click through multiple levels of nested blocks, making the entire experience slow, confusing, and overwhelming.
This is what we call “Block-ception.” It’s an architecture that prioritizes theoretical flexibility over real-world usability.
The Solution: Think in “Reusable Buckets”
A better approach is to think in terms of logical, reusable “buckets” of content. Instead of breaking every single element into its own block, group related elements into a single, more complex component.
For our product slider, a more sane architecture would be:
- Section:
product-slider.liquid- Has its own settings for the main heading and “Shop All” button.
- Uses a
collectionsetting to dynamically populate the slides.
- Snippet:
product-card.liquid- This single, reusable snippet contains the complete, pre-styled HTML for a product card (image, title, price, etc.). It is used here, on the collection page, in search results, and anywhere else a product card is needed.
In this model, the merchant has fewer controls, but the ones they have are more meaningful. They can choose the collection and set the title. They aren’t bogged down with the minutiae of reordering a product card’s internal elements—a task that should have been handled at the design stage.
A Framework for Deciding: Block vs. Setting vs. Snippet
When designing a new section, use this framework to decide how to structure it.
1. When should it be a Section Setting?
Use a section setting for high-level controls that apply to the entire component.
- The main heading or subheading.
- Background color or image.
- Layout options (e.g., “Image Left” vs. “Image Right”).
- Data sources (e.g., the collection to feature).
2. When should it be a Theme Block?
Use a Theme Block for components that are both reusable across different sections and need their own set of merchant-configurable settings.
- A
buttonblock (with settings for text, link, and style). - A
testimonialblock (with settings for author, quote, and image). - A
heading-lockupblock (with settings for eyebrow text, main heading, and subheading).
3. When should it be a Snippet?
Use a snippet for components that are reusable but do not need to be configured by the merchant in that specific context.
- The
product-card.liquidsnippet is a perfect example. Its content is dynamic (fed by theproductobject), but its structure is fixed. - An
icon.liquidsnippet that renders an SVG.
Final Thoughts: Empower, Don’t Overwhelm
Our goal as theme architects is to empower merchants, not to overwhelm them with an infinity of choices. Every setting and every block you add to the theme editor comes at a cost to usability.
By thinking in terms of logical, reusable buckets and making deliberate choices about what truly needs to be configurable, you can build themes that are not only powerful and flexible but also a genuine pleasure for your clients to use. Don’t build a monster.
❓ What’s your rule of thumb for deciding when to create a new Theme Block versus just using a Snippet?