Intro to sections

Add, rearrange, and customize the building blocks of every page in your theme.

Last updated About 7 hours ago

Sections are the stacked pieces you see in the theme editor sidebar — hero banners, product grids, footers, and everything in between. Open Online Store > Themes > Customize, pick a template from the top menu, and you'll work with sections there.

Add a section

  1. In the theme editor, select the template you want (Home page, Product, Collection, etc.).
  2. Click Add section (or the + icon between existing sections).
  3. Pick a section type and configure it in the sidebar.
  4. Click Save.

Drag the ⋮⋮ handle next to a section name to reorder it.

Edit or duplicate a section

Click any section to open its settings. Use the ... menu beside the section name to Duplicate when you want a copy to tweak — handy for device-specific banners with Visibility settings.

Click the eye icon to hide a section temporarily, or Remove to delete it. Hidden sections stay in the editor but don't show on the live store until you bring them back.

Adjust spacing, width, and visibility

Most sections share a few setting groups at the bottom of the sidebar:

  • Padding settings — Default uses your store-wide spacing from Theme settings > Layout; Custom sets top and bottom padding just for this section. See Padding settings.
  • Width settings — Use theme setting or a fixed max width, or No max for full-bleed layouts. See Width settings.
  • Visibility settings — show on desktop, mobile, or both. See Visibility settings.

Sections that display grids or carousels also include Layout settings and, when set to slideshow, Slideshow settings — see Layout settings and Slideshow control settings.

Find the right section article

Each major section has its own help article — Navigation, Featured collection, Slideshow, Page content, and others. Use the help center search or browse the Sections collection when you need step-by-step guidance for a specific section type.

Other settings

Some sections include Color scheme, Header settings (icon, heading, button), or section-specific options like Section height on banners and slideshows. Blocks inside a section are covered in Intro to blocks.