Docs/Storefront/Adding & Reordering Sections

Adding & Reordering Sections

Add sections from the section library, drag them into the order you want, hide them, or remove them.

Sections are the building blocks of every page on your storefront. A section is a self-contained chunk of UI — a hero banner, a package grid, a testimonial slider, an FAQ list — with its own settings. You assemble each page by stacking sections, then configure each one until it looks the way you want.

The three zones

Every page is organized into three zones from top to bottom:

  • Header — the global top of every page. Logo, navigation, announcement bar.
  • Template — the body of the current page. This is where most of your editing happens.
  • Footer — the global bottom of every page. Links, social icons, copyright.

Header and footer sections show up on every page automatically — you only configure them once. Template sections are scoped to the page you're currently editing.

Adding a section

Each zone has its own + Add section button at the bottom of that zone in the section list. Click it to open the section library:

  1. The library shows only sections that fit the zone you clicked from — adding to the header shows you header-eligible sections, adding to the template shows template-eligible sections, and so on.
  2. Browse or use the search box at the top to filter by name.
  3. Click a section to insert it. It lands at the bottom of that zone, with default settings.
  4. The inspector opens with that section selected so you can start configuring immediately.
The available sections depend on your theme.Each theme ships with its own set of section types. If a section you need isn't in the library, you'll need to either switch to a theme that has it or build a custom section in the code editor.

Reordering sections

Hover over a section row in the list — a drag handle appears on the left. Click and drag the row up or down to reorder. The whole row is the drag target, so you don't need to grab the handle precisely.

Sections can only be reordered within their zone. You can't drag a header section into the template area, for example — header sections only render in the header zone.

Hiding vs. removing

Hide

Right-click a section (or open its menu from the row) and choose Hide. The section stays in your section list — its settings are preserved — but it stops rendering on the storefront. Hidden sections also don't show in the editor preview, so you'll see exactly what your customers see.

Hide is the right choice when you want to temporarily disable a section without losing its configuration. Common cases: pausing a seasonal sale banner, A/B-comparing two layouts by toggling between two heroes, drafting an unfinished section without exposing it.

To bring it back, open the same menu and choose Show.

Remove

Choose Remove from the section's menu to delete it. This drops the section and its settings entirely. There's no trash can — once removed and your draft is saved or published, the configuration is gone.

If you need to bring a removed section back, restore an earlier snapshot from Themes (see Saving, publishing & snapshots).

Hide first, remove later.If you're not sure whether you'll want a section back, hide it instead of removing it. Hidden sections cost nothing on the storefront and are trivial to bring back.

Sections don't carry across pages

Each page has its own template-zone section list. If you add a "Featured Packages" section to Home, it won't appear on the Store page automatically — you'd need to add a separate Featured Packages section there too.

Header and footer sections are the exception: they're global, shared across every page.

FAQ

Can I duplicate a section to copy its settings?

Yes. Right-click a section and choose Duplicate. The copy lands directly below the original with the same settings, and you can edit it independently from there.

What's the difference between a section and a block?

A section is the top-level unit on the page — a hero, a grid, a footer. A block is a repeating sub-unit inside a section. For example, a "Features" section might let you add multiple "Feature" blocks, each with its own icon, title, and description. See Working with blocks.

Yes — you can remove every section from a zone and the editor won't stop you. Your storefront will then render without a header or footer. Most stores keep at least one of each (the navigation lives in the header, your TOS / privacy links live in the footer), but it's not required.

Can I copy a section from one page to another?

Right-click the section and choose Copy, then switch pages and paste it from the same menu on the destination page. Settings come along with it.

Was this page helpful?Suggest an edit →

Updated recently