Sections overview

How sections work

Open a template in the editor from Online Store → Themes → Customize (the Home page template is selected by default). The left-hand sidebar lists every section on that page. From there you can:

Add a section. Click Add section and pick from the catalog. The picker uses the same eleven categories as this documentation, in the same order: Hero, Banners, Collections, Products, Gallery, Hotspot, Layout, Promotions, Storytelling, Tables and Testimonials. If you cannot spot one, type its name into the search box at the top of the panel.
Reorder. Drag a section up or down, or use its menu. Section order on the page matches the order in the sidebar.
Configure. Click a section to open its settings on the right. Sections that hold repeating items, such as slides, cards, columns or rows, expose those as blocks you add, reorder and remove inside the section.
Hide or remove. Use the section’s menu to hide it temporarily, or to delete it.

The conventions every section shares

Most sections share the settings below, so they are described here once. The individual pages restate them only where a section’s behavior or default differs from the norm.

Setting	What it does	Where
Color scheme	Applies one of your saved color schemes to that section, covering background, text, headings, buttons and hairlines. Alternating schemes down the page is how Lapels builds rhythm without adding boxes or borders.	The section’s settings, at the top
Section spacing	The space above and below the section, 0 to 200px. Desktop and mobile keep separate values. The Device select switches which pair the Top and Bottom sliders are editing. Defaults are 96px on desktop and 56px on mobile.	Under Section spacing
Heading, Heading width, Heading alignment	The section title. Headings are inline rich text, so you can italicize part of the line. Italics print in the emphasis font, which is how Lapels draws two voices into one heading. Heading width sets how far the line runs before it wraps: Narrow, Normal, Wide, or Full width. Clear the heading to hide it.	Under Heading contents
Subheading and Intro text	The small label above the heading, and the line under it. Clear either to hide it.	Under Heading contents

Every built-in section is responsive, keyboard operable, meets WCAG 2.1 AA, honors a visitor’s reduced-motion preference, and supports right-to-left languages.

Sections with no fixed content

Three sections carry no copy of their own. Instead you stack content blocks into them in whatever order you like: a heading, a paragraph, a button, a picture, a countdown.

Media hero. The blocks sit over a full-bleed photograph or film.
Image with text. The blocks sit beside a picture.
Rich text. The blocks sit on a plain ground.

The same blocks build a Page template, and Multicolumn puts them into columns. They are all documented on one page: Content blocks.

The catalog

Hero. The page-openers.

Banners. A band across the page.

Collections. Ways into the departments.

Products. Things to buy.

Gallery. Pictures and film.

Hotspot. Annotated photographs.

Layout. Frames you fill yourself.

Promotions. Asking for something.

Storytelling. The longer form.

Tables. Structured facts.

Testimonials. Other people’s words.

Sections that are not added to a page

Four sections live in the theme’s header and overlay areas rather than on a template, so they do not appear in the Add section catalog above:

Announcement bar. Added in the header area.
Newsletter popup, Age verification and Mobile navigation bar. These are overlay sections. They appear over the page rather than in it.

The cart drawer, search drawer and quick view are always present and are configured rather than added.

Overlay sections are the one group that cannot be dropped onto a page, and ordinary content sections cannot be added inside the overlay group either.

Related: Content blocks · Homepage · Colors · Layout · Lapels support replies within 12 hours.