Hey all! So this is my first year developing in Liquid as an experienced headless ecom dev (using the Shopify API). I notice some limitations in Liquid, but a huge one is not being able to create blocks within blocks. I have come up with a shape system for blocks that is the following:
Block guide: □ and ■ are blocks. ○ and ● are blocks nested within a block. Outlines can be reordered, filled are fixed.
My use case is this: I have a header section with movable header blocks (Menu , Logo , and Actions ). A user can also add Menu Image blocks (as much as they want) and move them in any order.
The implementation looks like this so far (I haven’t added in locked blocks yet, but those exist on my footer):
Haha idk, I thought shapes would be a good idea for visual clarity. Any feedback would be great!
Hey @rylanharper - thanks for sharing this!
Just confirming, this is expected if you’re working with regular section-defined blocks. Those are flat, so you can’t create true “blocks inside blocks” with that section block structure.
Depending on your use case, theme blocks from the /blocks directory might be what you’re looking for if you haven’t looked into these yet. You could have the parent block render its children with {% content_for ‘blocks’ %}, for example. I’d probably structure it like:
- Header section accepts Menu, Logo, and Actions theme blocks.
- Menu theme block accepts Menu Image child blocks.
- Any fixed pieces like logo/actions can be handled as static blocks if you want them customizable but not removable/reorderable.
Docs here: Quick Start
Static blocks: Static blocks
If you need everything to be reorderable in one shared header list, then your flat shape system is a valid workaround. I’d just be careful not to make the symbols do too much of the UX work, since clear block names like Menu image, Main menu, Logo, and Actions will probably be easier for merchants to understand long-term (and are more aligned with accessibility standards).
Hope this helps!
