# Sections

Chapter 4 of the Atelier user guide.

Add a section in the theme editor with **Add section** on any template. Most sections share two settings, so they are not repeated below:

* **Background**: Page, Stone or Paper; some sections also offer **Ink band** (one dark band per page is plenty). Inside an ink band the text, buttons and fields switch to light-on-dark automatically.
* **Remove top spacing**: use it when a section follows another on the same background, so the two read as one.

Many sections open with the theme's two-column head: a **Kicker** (the small line with a tick before it), a light **Heading** on the left, and a short **Text** with a **Link label** and **Link** on the right.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The first screen: a light display heading, a short body, two buttons and a large image with a wall label under it | **Layout**: Split (text left, image bleeding off the right edge) or Full width. Kicker, Heading, Body, **Primary button**, **Secondary link** ("Order free samples"; a blank link goes to your samples page). **Image** (blank uses the product's first image), **Image on mobile**, **Image ratio**. **Wall label**: **Product** (fills the label with title, materials, designer and price, and shows its material chips), **Wall label title** and **text**, **Materials line**. **Dimension annotation**: a dimension line drawn across the piece (chapter 9). Home page, pages and collections. |
| **Slideshow** | Up to six slides, each a hero with a wall label | **Image ratio**, **Rotate slides automatically** (off; shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion), **Change slides every** (7 s, 5 to 10). Each **Slide** has the hero's text, buttons, image and wall label. |
| **Icon row** | A trust row under the hero, or a numbered trade or service band | **Layout**: **Row** (icons) or **Numbered list** (a band with a heading and two buttons; the preset **Trade band** sets it up on the ink band). **Columns on mobile** (1 or 2). Up to six **Items**: **Icon** (18 furniture and service icons, or None), **Heading**, **Text**, **Link**. State only terms your store actually offers. |
| **Collections grid** | Your collections as image tiles, or as a typographic index | **Style**: **Tiles** or **Index** (a large typographic list of collection names with counts and an image peek on hover; the preset **Collection index**). **Collections** (up to 24; empty lists every collection), **Show the number of pieces** (on), **Count label** ("pieces"), **Columns on desktop** (3, 4 or 5), **Layout on mobile** (Wrap or Scroll), **Collections per page** (12; on the collections list page). |
| **Featured collection** | A grid of product cards from one collection | **Heading layout** (Split, Left or Centre), **Collection**, **Layout**: **Grid** or **Salon** (hangs the first piece twice the size of the rest), **Columns on desktop** (3 or 4), **Products to show** (8, 2 to 12). The preset **Product grid** is the same section. |
| **Featured product** | One product with its buy box, anywhere | **Product** and the pre-order settings (chapter 6). It takes the buy box blocks plus **Product link** ("View full details"). |
| **Image with text** | An image beside a story; with **Source: Designer** it becomes the designer story (chapter 7) | **Source**: Custom or Designer. **Designer** (blank on a product page uses the product's designer; on a designer page, that designer), Image, **Media position**, **Image ratio**, Kicker, Heading, **Role**, **Quote**, **Body**, three **Facts**, **Button label** (with a designer, blank gives "Explore Maren's work", linked to their collection), **Button style**. Your settings fill anything the designer leaves empty. The preset **Designer story** sets Source to Designer. |
| **Rich text** | Headings, text and buttons on their own | **Alignment** (Centre or Left), Background. Holds the general blocks (chapter 5). |
| **Logo list** | Press or stockist logos | **Logo colors** (Monochrome turns each logo one flat color that suits the palette), **Logo height** (32px, 24 to 96), **Layout on mobile**. Up to 12 **Logos**: Image, **Company name** (a logo without a name isn't shown), Link, Quote. |
| **Newsletter** | An email sign-up band | Kicker, Heading, Body, **Note** (a short line under the field). Background defaults to Ink band. |
| **FAQ** | Questions and answers | Kicker, Heading, Body, Link. A **Collapsible row** block per question. |
| **Blog posts** | The newest articles from a blog, or articles you pick | **Blog**, **Articles to show** (3, 2 to 12), **Articles** (overrides the blog, in the order you pick) |
| **Room sets** | Sets sold as one product, such as a dining table with chairs | Each **Set**: **Label** ("Set of 3"), **Product** (the set as one product, with its own price), **Title**, **Kit contents** (one item per line, or a metafield), **Button label** ("Add the set to cart") |
| **Section** | An empty section for the general blocks and app blocks | Background, Remove top spacing |
| **Custom Liquid** | App snippets or your own Liquid | **Liquid** |

## The signature sections

| Section | Chapter |
| --- | --- |
| **Material library**: material tiles with free sample buttons and the sample box | Chapter 8 |
| **Dimensions**: the drawing to scale, the measurement table, Will it fit and downloads (product pages) | Chapter 9 |
| **Shop the room**: a room photograph with rings on the pieces | Chapter 10 |
| **Contact form** in Trade enquiry mode | Chapter 12 |

## Product page sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Product** | The gallery and buy box | Chapter 6 |
| **Dimensions** | Drawn to scale, Will it fit, downloads | Chapter 9 |
| **Product recommendations** | Related or complementary products | **Recommendation type**: **Related products** (similar) or **Complementary products** (pair with this one; set them in the Search & Discovery app), **Products to show** (4, 2 to 10) |
| **Trade order** | A table of every variant with quantity fields, for trade and wholesale buyers ordering many finishes at once | **Heading** ("Trade order"), **Variants per page** (25, 10 to 50), **Show SKU** (on). Product templates only. |

## Page sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Page** | Your page's title and content, with an optional facts column | **Show breadcrumbs**, **Kicker**, **Facts heading** ("At a glance") and **Fact** blocks (label and value), such as Founded, Workshop or Showroom hours |
| **Contact form** | The contact page, or the trade enquiry form (chapter 12) | **Form**: Contact or Trade enquiry. **Show breadcrumbs**, **Kicker**, **Heading** (blank uses the page's title), **Show a phone field** (off), **Show order number field** (on; contact form only), **Button label**, **Note beside the button**. Side column blocks: **Detail** (label, value and link), **Menu column** and **Text**. Pages only. |

Collection, search, blog, article, cart, 404 and password pages each have their own section with page-level settings such as **Show breadcrumbs**, **Products per page** (12, 8 to 36), **Enable filtering** and **Enable sorting**. The **Article** section is built from blocks (Breadcrumbs, Title, Byline, Featured image, Content, Tags, Share), so you can reorder them. The **Blog** section adds a body, a featured first entry, tags and **Articles per page** (13, 6 to 30). The **404 page** reads "This room is empty", and the **Password** page has a heading, body and an optional newsletter form.

## Compare

The **Compare** section shows up to three products a shopper chose side by side, with their price, availability and the rows of its **Spec table** block. To set it up:

1. Create a page in **Online Store › Pages** (for example "Compare") and set its theme template to `page.compare`.
2. In **Theme settings › Product cards**, turn on **Show compare checkbox** and choose that page as the **Comparison page**.
3. In the editor, open the comparison page and add **Spec row** blocks to the Spec table, each pointing at a product metafield (Width, Depth, Height, Seat height, Material, Lead time). In the editor the first product in your catalog previews the rows.

Shoppers tick **Compare** on up to three cards; a tray at the bottom of the screen collects them and links to the page.