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.