Sections overview

How sections work

Open the homepage in the editor from Online Store → Themes → Customize (the Home page template is selected by default). In the left-hand sidebar you’ll see the section list for the page. From there you can:

• Add a section — click Add section, then pick from the catalog. Sections are grouped into categories such as Banners, Collections, Products, Social proof, Storytelling, Media, Blog, Contact, and Advanced. (Newsletter, Contact form, and Contact info live under Contact; Custom Liquid lives under Advanced.) If you can’t spot a section under a category, use the search box at the top of the Add-section panel and type its name.
• 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 (cards, slides, columns) 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 delete it.

Nearly every section shares the three conventions below, so they are summarized here once. Individual section pages restate them only where a section’s default differs from the norm (for example a different default color scheme or padding), so you rarely need to cross-reference:

Setting	What it does	Where
Color scheme	Applies one of your saved color schemes (background, text, buttons, accent) to that section. Alternating schemes down the page creates visual rhythm.	The section’s settings, under Layout
Top padding / Bottom padding	Vertical space above and below the section, 0–120px.	The section’s settings, under Section padding
Heading	The section title shown above its content. Leave blank to hide it.	The section’s settings

Tip

Color schemes are defined once in Theme settings → Colors and reused across the store. See Colors for how to edit them. Picking a scheme per section is how you control each section’s background and text colors — you don’t set raw colors on the section itself.

All built-in sections render with vanilla CSS and JavaScript and require no third-party apps. They are responsive, keyboard-accessible (WCAG 2.1 AA), and support right-to-left languages.

In this section

The groupings below (Catalog, Bundles, Content & storytelling, Marketing, and so on) are editorial — they organize this documentation and don’t match the editor’s Add-section categories one-to-one.

Banners

• Hero banner
• Hero slideshow

Catalog

• Featured collections
• Featured products
• Featured product

Bundles

• Bundle builder
• Bundle promo

Content & storytelling

• Image with text
• Rich text
• Multicolumn
• Video section
• Timeline steps
• Before / after slideshow

Social proof

• Testimonials
• Reviews showcase
• Brand logo strip

Marketing

• Trust badges
• Countdown
• Newsletter

Also available (documented elsewhere)

A few addable sections are documented alongside the pages they are most often used with:

• Blog posts — see Blog & pages.
• Custom Liquid — add app snippets, third-party embeds, or your own Liquid/HTML to any page (under the Advanced category); see Blog & pages.
• Contact form and Contact info — see the contact page.
• Garage banner, Compare products, and Install difficulty guide — the Automotive sections.
• Marquee, Promo strip, and Service bar — added only in the header or footer area, so they’re documented under Header & footer.
• Newsletter popup, Age verification popup, and the Cart drawer — overlay sections, documented under Popups and drawers.

Related: Homepage · Colors · Torquex support replies within 12 hours.