Skip to content
Help
English
Storefront builder

Sections and blocks: how do I add, reorder, duplicate, and delete them?

Understand sections versus blocks, global versus per-page sections, and how to add, reorder, duplicate, hide, and delete them in the storefront builder.

Sections versus blocks

A section is a full-width horizontal row on a page, for example a hero banner, a product grid, or a footer. Sections stack vertically and you control their order. A block is a piece of content placed inside a section: a text block, an image, a button, a divider, or a layout group. Some sections hold a fixed set of blocks (the header always has logo, menu, search, cart, and localization), while others let you add, remove, and reorder blocks freely (the footer, the hero, the newsletter).

You edit both the same way: click a section or block in the preview, or pick it from the layers list, and its settings open in the control panel on the left.

Global versus per-page sections

The builder lets you design each page type separately. The editable pages are Home, Product, Landing, Collection, Search, Cart, Checkout, Thanks (order confirmation), Contact, Policy, and 404.

  • Global sections: the Header, Footer, and Announcement bar appear on every page type. Each page keeps its own copy, so an edit applies to the page you are on. Use the Apply to all pages action on one of these sections to copy its design onto the same section across every other page.
  • Per-page sections belong to specific page types. The Hero, Slideshow, Indicator, and Collections sections only exist on the home page. Product info only exists on the product page, Landing info only on the landing page, and so on.
  • Any-page sections can be added to every page type. These are Text, Image, Divider, Custom code, and the standalone Social media icons section.

For the full catalog of what each section does and its settings, see Home page sections, Product and landing page sections, Global sections, and Shared and system page sections.

Adding a section or block

  1. Open the builder and switch to the page you want to edit using the page selector.
  2. Use the Add section button (or the plus control that appears between sections in the preview) to open the picker.
  3. Pick a section type. Only sections allowed on the current page appear in the list, so you will not see Hero options on the contact page, for example.
  4. To add a block, select a section that accepts blocks, then use its Add block button. The plus controls labelled Add (item) before and Add (item) after let you insert a block at an exact spot.

Reordering sections and blocks

Drag a section or block by its handle to move it. Sections reorder vertically within the page; blocks reorder inside their parent section. Fixed-layout sections like the header keep their blocks in place, so you configure those blocks rather than move them. Reordering is a live edit: the preview updates as you drop.

Duplicating, copying, and pasting

  • Duplicate makes an exact copy of a section or block right next to the original, including all its settings and child blocks.
  • Copy and Paste move a whole section or block, even between pages: copy it on one page, switch pages, and paste it in.
  • Copy style only and Paste style only transfer just the look (colors, spacing, typography) from one element to another of the same type, leaving its content untouched.

Duplicating or pasting respects each section's per-page limit. If a page already holds the maximum of a section type, the action is blocked.

Hiding versus deleting

The eye icon toggles a section or block between Hide and Show. A hidden element stays in your layout and keeps all its settings, but it does not render on the live store, which is useful for seasonal content you want back later. Delete removes the element permanently.

Required sections and limits

Some sections are required on their page and cannot be deleted, only configured. Product info on the product page, Landing info on the landing page, Collection products on the collection page, Search products on the search page, the Cart, Checkout, Order confirmation, Contact, Policy, and 404 sections, plus the Header and Footer, all fall into this group. For these the delete control is disabled.

Most section types also cap how many copies a single page can hold (for example 1 header, 1 footer, 2 announcement bars, 2 slideshows, 2 indicators, 2 custom code sections, 3 text sections, 3 image sections, 10 dividers). When you hit a limit the section no longer appears in the Add picker for that page.

Saving and publishing

Every edit updates the preview instantly and is tracked in the builder's undo history, so you can step backward with undo. Changes go live to shoppers only after you save and publish the page.