Working with blocks

Adding, moving, replacing and deleting blocks — and the rules about where a new one may land.

Esta página aún no está traducida. Se muestra en inglés; todo lo que describe funciona igual en tu idioma.

A page is a stack of blocks. Each one is a section of the storefront: a header, a hero, a product grid, a text-and-image row, a FAQ, a footer.

Adding a block

There are two ways, and they put the block in the same place:

Add block in the left block list puts it right below the block currently at the top of the preview. So scrolling the preview before clicking moves the spot — and the library then names the block the new one will sit under.
In Edit Mode, hovering between two blocks in the preview draws a line with a round + in its middle. That plus adds the block exactly at that seam.

Wherever it lands, a new block:

never goes above the header,
goes above the footer at the very bottom,
never splits a pair of half-width blocks.

While the preview has not yet said what it shows, a new block goes to the end of the page, above the footer.

The library offers the blocks that fit the page you opened it on. The four blocks that read the current product — product hero, product info, product details and product reviews — appear only on the product detail page, because anywhere else there is no product for them to show.

The same applies when the AI adds or replaces a block, and to a newly generated custom page.

Moving a block

Drag and drop in the left block list: grab the block's row (the three-line grip at its left marks it), drag it where it belongs, drop it. The preview and the block order follow at once.

It works in the block list only — not by dragging on the preview — and not on a phone, where the list is hidden. No block ever has to be deleted and rebuilt just to sit somewhere else.

Replacing a block

Replace swaps the variant while keeping the block's content and its place in the page. This is how you try a different hero without retyping the headline.

Header and footer

Header and footer are one shared block across every page. The block list offers Replace for them too — the block keeps its identity, so the new variant shows on all pages at once.

They can neither be deleted nor moved.

The footer's bottom row carries a seller-identity line the design cannot remove — "Seller: name, address" plus a link to your legal notice. You can swap the footer for another variant, but not delete the line; a page without a footer shows the same line as a slim bar of its own. It names who legally sells in your shop, which is a legal requirement rather than a design choice.

Half-width blocks

Any content block — never the header or footer — can be set to half width in the Style tab's Layout section (the Block Width chips: full / half).

Two consecutive half-width blocks sit side by side from tablet width up, and stack again on phones.
A half-width block with no half-width neighbour spans the whole row.
The two halves share one container: each takes half of its Container Width and sits against the middle seam, so they read as one block rather than two blocks each centred in its own column. They line up best when both have the same Container Width.

A common pairing is the product hero beside the product info on a product page.

Deleting

Delete from the block list; a short confirmation asks whether you really want to delete that block. Nothing is lost permanently either: the change lives in the draft, and Version History can roll the whole page back.