Building layouts: Sections, Columns, and Groups

Every tile is built from a small set of layout elements. Once the vocabulary clicks, the whole editor makes sense.

The vocabulary

• Section: think of it as a row. It controls how many Columns sit inside and how they share the width.
• Column: a vertical slice of a Section. Spacing, padding, and appearance apply per Column.
• Group: the flow controller. A Group decides whether its contents sit side by side (inline) or stack vertically, and it is the only element with that switch.
• Box: the base container when you want to get granular.

You can rearrange elements with the swap control, duplicate them, or delete them from the tree.

Everything moves within its own level

Reordering happens inside the level you are on: two buttons in a Group can swap with each other, and a Group can move within its Column, but you cannot drag a nested element up into a higher level. It keeps layouts predictable.

Why you sometimes nest on purpose

Nesting an element inside a Group buys you settings the element does not have on its own. An image by itself has no display toggle, but a Group does; put the image in a Group and you can hide or show it per device (that trick is the heart of mobile and desktop layouts). StoCu builds on what Shopify's customer account platform exposes, so where a setting lives occasionally surprises you; the workarounds are built in, and nesting is the main one to know.