# Sections

Chapter 4 of the Roast user guide.

Add a section with **Add section** in the theme editor's left column. Most sections have a **Kicker** (the small line above the heading), a **Heading**, and a **Background**: Page, Kraft (the product-well color), Dark band, Accent or Label 1 to 4 (the choices vary by section). Sections without content hide from shoppers rather than leaving a gap; in the editor they show a note.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| Hero | The first screen (home page only) | **Style**: Split block (text on a colored block beside the image, with a turning ring stamp and its **Ring text**), Image with label (a card over the image) or Centred (three tile images and a stamp). Kicker, Heading, Text, two buttons, **Show the next roast** (chapter 8), Image and Mobile image. Up to three **Stat** blocks ("2014", "Roasting since") show when the next roast is off. |
| Slideshow | Rotating image-and-text slides (home, pages, collections) | Media position, Rotate slides automatically (off; shoppers get a pause button), Change slides every (7 s, 5 to 10). Up to six **Slide** blocks: Image, Kicker, Heading, Text, Button label, Link. |
| Icon row | Promises in a row | Heading, Columns on mobile (1 or 2). Up to six **Item** blocks: Icon (Flame, Coffee bean, Leaf, Truck, Repeat, Calendar, Clock and more), Heading, Text, Link. State only terms you offer. |
| Featured collection | A row of product cards | Collection, Products to show (4, 2 to 8), Columns on desktop (3 or 4), **Quick filters** (up to four collections as chips beside the heading), Link label and Link |
| Collections grid | Collection tiles on label colors (home and the collections list page) | Body, Collections (empty lists them all), Collections per page (12, 2 to 24), Columns on desktop (3, 4 or 5), Count word ("14 coffees"), Show product count, Link label and Link |
| Featured product | One product with its buy box | Product, Enable image zoom, the pre-order settings (chapter 6). Blocks: Origin line, Title, Tasting notes, Vendor, Price, Freshness, Inventory, Variant picker, Description, Buy buttons, Assurance rows, Product link, plus theme and app blocks. |
| Subscription builder | Build-your-own subscription card | Chapter 9 |
| Brew guide | Recipes with a timer | Chapter 10 |
| Image with text | A story with a photo, or a producer profile | **Content**: This section's settings, or **A producer** (fills it from the Producer metaobject, chapter 7). **Producer**, Image, Media position, Kicker (Meet the producer), Heading, Quote, Text, **Facts** (up to six lines written `Label: value`, such as `Altitude: 2,100 m`), Stamp word (Buying since) and Stamp value, Link label and Link |
| Gift boxes and bundles | Gift boxes, hampers and kits | Body. **Box** blocks: Box label (Gift box), Product, Title (shown instead of the product's name; a box without a product shows its title and contents with no button), Tagline, Kit contents (one item per line), Button label (Add box to bag) |
| Shop the brew bar | A photo with hotspots, such as your brew bar or a gift box | Image (shown uncropped so hotspots stay put), Kicker, Heading, Text. Up to 20 **Hotspot** blocks: Label, Horizontal and Vertical position (%), Product (shows its price and stock and links to it), Detail |
| Logo list | Stockists, press or cafés that serve you | Logo colors (Original or Monochrome), Logo height (40px, 24 to 96), Layout on mobile (Wrap or Scroll). Up to 12 **Logo** blocks: Image, Company name (required: read by screen readers, and a logo without one isn't shown), Link, Quote |
| Blog posts | Latest articles | Blog, Articles to show (3, 2 to 12), or pick **Articles** by hand, Link label (Read the journal) and Link |
| FAQ | Questions and answers | Body, **Collapsible row** blocks (Heading, Content, Open by default) |
| Newsletter | Email sign-up band | Kicker, Heading, Body. Default background Kraft. |
| Rich text | Free text | Alignment (Start or Centre). Holds Kicker, Heading, Text, Button and other theme blocks. |
| Section | An empty section for any theme or app blocks | Background |
| Custom Liquid | App snippets or your own code | Liquid |

## Product page sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| Product | The gallery and buy box | Chapter 6 |
| Cupping notes | Flavour profile, roast and brew, origin and producer (product pages only) | Kicker (Cupping notes), Heading (What's in the cup), Text, Background (default Kraft). Up to four blocks: **Flavour profile** (Title, Show the lot, Show the scores), **Roast and brew** (Title, Show best for, Show the grind, Rest note), **Spec table** (here titled Origin, with six Spec rows), **Producer** (Link label). Chapter 7 lists the data each one reads. |
| Product recommendations | "You might also like" (product pages only) | Kicker, Heading, Link, **Recommendation type** (Related products or Complementary products, which you set in Shopify's Search & Discovery app), Products to show (4, 2 to 10) |
| Wholesale order | A quick order table of every variant (product pages only) | Heading, Variants per page (25, 10 to 50), Show SKU. Shows volume pricing and quantity rules from B2B catalogs. |

## Page sections

These sit on their own templates: **Collection** (Show breadcrumbs, Show collection image, Show description, Enable filtering, Enable sorting, **Quick filters**: up to four filter values as chips, such as `Filter, Espresso, Decaf`, Products per page 12, 8 to 36), **Search** (Show breadcrumbs, Enable filtering, Enable sorting, Results per page), **Cart** (Show order note on the cart page), **Cart drawer** (Show order note, the empty bag's two buttons), **Blog** (Show breadcrumbs, Body, Show featured entry, Show tags, Articles per page 13), **Article** (blocks: Breadcrumb, Title, Byline, Featured image, Content, Tags, Share and How to brew it), **Page** (Show breadcrumbs, Kicker, Facts heading and **Fact** blocks for an "At a glance" box), **Contact form** (Show breadcrumbs, Kicker, Show order number field, and **Menu column**, **Text** and up to two **Visit** blocks), **404 page** (Heading, Body, Show the requested address) and **Password** (Heading, Body, Show newsletter form).

## Compare

**Compare** shows up to three products side by side with their price, availability and the rows of its **Spec table** (add Spec rows to compare metafields such as `custom.origin` or `custom.process`). To use it, create a page in **Online Store › Pages**, set its **Theme template** to **page.compare**, then choose that page in **Theme settings › Product cards › Comparison page** and turn on **Show compare checkbox**.