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:
- Create a page in Online Store › Pages (for example "Compare") and set its theme template to
page.compare. - In Theme settings › Product cards, turn on Show compare checkbox and choose that page as the Comparison page.
- 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.