# Sections

Chapter 4 of the Sprinkle user guide.

Add a section in the theme editor with **Add section**. Most sections share a left-aligned section heading: an **Eyebrow** after a small three-sprinkle mark (when **Show sprinkles** is on), a **Heading** in the heading font and a **Body** (or **Text**) under it. Headings only centre in the hero and the newsletter.

## Bands and the piped edge

Sections stack like the layers of a cake. Most have three settings for that:

| Setting | Options | What it does |
| --- | --- | --- |
| Background | **Page**, **Surface**, **Icing** or **Colour block** | The section's ground. Page is the vanilla page, Surface a slightly deeper wafer band, Icing the pale band, and Colour block the big colour field. Text, buttons and focus rings change with the ground on their own, so everything stays readable. The Featured product and Mix-and-match box sections offer the first three. |
| Show piped edge | On or off | A double row of piped icing along the section's top edge, with a bead of light on every lobe. The front row takes this section's colour, so the section appears to rise in lobes. |
| Piped edge back row | **Icing**, **Colour block**, **Block accent** or **Accent** | The second colour behind the lobes, showing between them |

Choosing the back row is the one thing to think about. When the two grounds are both pale, the front lobes nearly vanish and the back row has to carry the edge:

| The ground above → this section | Use this back row | Why |
| --- | --- | --- |
| Dark → light (a colour block, then the page) | Icing | The front lobes read on their own; the back row adds a second colour |
| Light → light (page to surface, page to icing, icing to page) | Colour block | The front lobes vanish, so the back row must be dark |
| Light → colour block | Block accent or Icing | The front lobes read; butter on Strawberry looks best |

The edge is drawn with a mask rather than an image, so it always ends on whole lobes at every screen width, and it follows your palette. The hero draws its own edge, so the section after it doesn't need one, and the header's hem covers the top of the first section. If two sections in a row share a ground, turn the edge off on the second and they read as one.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The big opening block (home and page templates) | See below |
| **Slideshow** | Several banners in turn (home, page and collection templates) | **Media position** (Left or Right, default Right), **Image ratio** (Adapt to first image, Wide 16:9, Standard 4:3, or Square 1:1, the default), **Rotate slides automatically** (off), **Change slides every** (7s, 5 to 10), Background (Colour block), Show piped edge (on) and Piped edge back row (Block accent). Up to six **Slide** blocks: **Image**, **Eyebrow**, **Heading**, **Text**, **Button label** and **Link**. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| **Mix-and-match box** | A box shoppers fill flavour by flavour | Chapter 10 |
| **Featured collection** | A row of products on the display shelf | **Eyebrow**, **Heading** ("Best sellers"), **Body**, **Collection**, **Products to show** (8, 2 to 16), **Button label** ("Shop all treats", linking to the collection), **Show dietary chips** (on), **Dietary filter** (`custom.dietary`), Background (Surface), Show piped edge (on) and Piped edge back row (Colour block). **Dietary chip** blocks each have a **Label** ("Gluten free") and a **Collection** (chapter 13). With no collection chosen, shoppers see placeholder cards; a chosen collection with no products shows nothing. |
| **Featured product** | One product with its buy box, or the cake builder on the home page | **Product**, Background (Page, Surface or Icing, default Page), Show piped edge (off), Piped edge back row (Icing), **Enable image zoom** (on) and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Product link, Cake builder, Lead time note, Allergens and dietary, the theme blocks of chapter 5 and app blocks. With no product chosen, shoppers see nothing (the theme editor shows a placeholder). A product with the Mix box tag shows **Choose flavours**, a link to its page, in place of the buy buttons. |
| **Collections grid** | Dietary tiles, a cake gallery, or your collections | **Eyebrow**, **Heading** ("Collections"), **Body**, **Tile style** (**Cookie**, the default, or **Scalloped frame**), **Collections** (leave it empty to list every collection), **Collections per page** (12, 3 to 24), Background (Page), Show piped edge (off) and Piped edge back row (Icing). Add **Tile** blocks to name and link each tile yourself: **Tile label** ("Gluten free"), **Collection**, **Image** and **Link** (use this for a filtered link; leave it empty to link to the collection). With no tiles, the section lists the collections above. |
| **Image with text** | A cake promo, a story, or pickup details with hours | **Image**, **Image style** (**Cookie**, **Plate on a doily**, **Scalloped frame**, the default, or **None**), **Media position** (Left, the default, or Right), **Eyebrow**, **Heading** ("Celebration cakes, your way"), **Body**, **Button label** and **Link**, Background (Page), Show piped edge (on) and Piped edge back row (Icing). Up to eight blocks: **Fact** and **Opening hours row** (chapter 5). Facts sit in a row, and up to three read well. Hours rows sit in one panel. |
| **Ready-made boxes** | Boxes you've already filled, sold as products | **Eyebrow** ("Ready-made boxes"), **Heading** ("We picked the flavours for you"), **Body**, Background (Surface), Show piped edge (on) and Piped edge back row (Colour block). Each **Box** block is one product: **Label** ("Small box"), **Product**, **Tagline**, **What's in the box** (one item per line, or a metafield as a dynamic source) and **Button label** ("Add box to bag"), which adds the product without leaving the page. A product with the Mix box tag reads **Choose flavours** and links to its page instead. A Box with no product shows only in the theme editor. With no Box blocks, shoppers see nothing. |
| **Shop the table** | A photo of a dessert table with hotspots on the treats | **Image** (shown uncropped, at its own shape, so hotspots stay on the treats they mark at every screen size), **Eyebrow**, **Heading** ("Shop the table"), **Body**, Background (Page), Show piped edge (on) and Piped edge back row (Icing). Up to twenty **Hotspot** blocks: **Label** ("Treat name"), **Horizontal position** and **Vertical position** (50%, 0 to 100, measured from the image's left and top edges), **Product** (optional: shows the product's price and stock, and links to it) and **Detail** (a short line, such as Serves 12; connect a metafield of the chosen product as a dynamic source). |
| **Icon row** | "How ordering works" as numbered steps, or trust icons | **Style** (**Numbered steps**, the default: a big number in a fluted round in place of the icon; or **Icons**), **Eyebrow**, **Heading** ("How ordering works"), **Body**, **Columns on mobile** (1 column, the default, or 2 columns, Icons only), Background (Page), Show piped edge (on) and Piped edge back row (Icing). Up to six **Item** blocks: **Icon** (None, Calendar, Clock, Pickup, Delivery, Box, Cake, Cookie, Leaf, Wheat, Gift, Heart, Return, Shield, Headset, Chat, Store, Lock, Card, Globe or Check mark), **Heading**, **Text** and **Link**. State only terms your store actually offers. |
| **As seen in** | Up to twelve press or stockist logos | **Heading** ("As seen in"), **Logo colours** (**Monochrome**, the default: every logo in one flat colour that suits the palette; or **Original**. Use logos with transparent backgrounds), **Logo height** (40px, 24 to 96), **Layout on mobile** (Wrap or Scroll), Background (Page), Show piped edge (off) and Piped edge back row (Colour block). Each **Logo** needs a **Company name** (read by screen readers; a logo without a name isn't shown), with an **Image**, an optional **Link** and a **Quote**. |
| **Rich text** | Free text and buttons, or testimonials | Background (Page), Show piped edge (on) and Piped edge back row (Colour block). Add Eyebrow, Heading, Text, Button and **Quote** blocks (chapter 5): quotes sit three across, and every other block spans the row. **Add section** offers **Rich text** (an eyebrow, heading and text) and **Quote** (a heading and three quotes on Icing, with an Accent back row). Replace the sample quotes with real ones. |
| **FAQ** | Questions and answers | **Eyebrow**, **Heading** ("Good to know"), **Body**, Background (Page), Show piped edge (on) and Piped edge back row (Colour block). Add **Collapsible row** blocks, one per question. How far ahead to order, how to change a date, whether you deliver and what to do about allergies are what bakery shoppers ask most. |
| **Newsletter** | An email sign-up, centred on a colour block | **Heading** ("First dibs on the weekend bake"), **Body**, **Button label** ("Sign me up"), Background (Colour block), Show piped edge (on) and Piped edge back row (Icing). Sign-ups are tagged `newsletter`. |
| **Blog posts** | Your latest articles | **Eyebrow**, **Heading** ("From the kitchen"), **Blog** (shows its newest articles and adds a link to it), **Articles to show** (3, 2 to 12, when no articles are picked), **Articles** (overrides the blog: articles appear in the order you pick them), Background (Page), Show piped edge (on) and Piped edge back row (Colour block) |
| **Contact form** | A contact or enquiry form on any page | Under Page sections, below |
| **Section** | An empty section you fill with blocks | Takes any theme block and app blocks |
| **Custom Liquid** | App snippets or your own code | **Liquid** |

> **Note:** After a shopper signs up, the newsletter says "You're on the list." The theme doesn't send anything itself: "One email on Tuesday" is a promise you keep. Write the emails in **Marketing** (Shopify Email or your email app) and send them to customers who accept marketing, or change the heading and body.

### The Hero

The **Hero** section has two layouts, chosen in **Layout**:

* **Display case** (the default): a full-width colour field lit from the top, with your words centred on it, and up to three treats in fluted cookie rounds standing on the edge where the field meets the page. **Centre image** is the big round on its doily, with **Left image** and **Right image** overlapping it. With one image, it stands alone in the centre, whichever picker you used.
* **Banner**: for one great photo. Text on the left of the colour block, and your **Centre image** on the right in a scalloped frame.

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow | Empty | The small line above the headline |
| Heading | "Baked fresh, made to order" | The page's main headline. Left blank, your shop name stands in. |
| Body | Empty | The lede under the headline |
| Primary button label | "Order cookies" | With **Primary button link** (blank: all products) |
| Secondary button label | Empty | With **Secondary button link** (blank: all products) |
| Show next pickup line | On | "**Next pickup Fri 6 Nov.** Order by 2 pm today.", worked out live (chapter 8). Hidden while order ahead is off. |
| Ground under the images | Page | Page, Surface or Icing. In the Display case layout, set this to match the section that follows, so the rounds stand on one continuous ground. |

Good hero photos are square and top-lit, on a plain tinted backdrop (butter, rose, pistachio), with the treat filling the middle: the round crops the corners. Text never sits on a photo in Sprinkle, so there's no need to leave room for it. With no image at all, the theme editor shows sample art, and shoppers get the colour field ending in a plain piped edge.

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery, the buy box, and the Allergens and dietary panel (chapter 6) |
| **Product recommendations** | A row of cards on the shelf. Product templates only. **Heading** ("Goes well with"), **Recommendation type** (**Related products**, the default, are similar; **Complementary products** pair with this one) and **Products to show** (4, 2 to 10). The presets' product page has two: "Goes well with" (Complementary) and "You may also like" (Related). |
| **Quick order list** | Product templates only. For B2B customers such as cafés buying wholesale: every variant of a product in a table with quantity fields. **Heading** ("Quick order"), **Variants per page** (25, 10 to 50) and **Show SKU** (on). |

To pair products for **Complementary products** (the candles that go with a cake, the jam that goes with the scones): install Shopify's free **Search & Discovery** app, open **Recommendations**, search for a product and add its complementary products. They can take a little while to appear after you save. A section with nothing to recommend shows nothing.

## Page sections

* **Page**: your page's content, with **Show breadcrumbs** (on), an **Eyebrow**, Background (Page), Show piped edge (off) and Piped edge back row (Icing). **Fact row** blocks (a **Label** and a **Value**, such as Serves: 10 to 40) sit under a **Label** ("At a glance").
* **Contact form**: **Show breadcrumbs** (on), **Eyebrow**, **Heading**, **Body**, **Show order number field** (on), **Show event date field** (off), **Show guest count field** (off), **Button label**, Background (Page), Show piped edge (on) and Piped edge back row (Icing), with **Menu column** blocks (**Heading**, "Quick links", and **Menu**) and **Text** blocks (**Heading**, "Before you write", and **Text**) beside the form. Messages arrive at your store's sender address, with the event date and guest count in them. **Add section** gives you an enquiry form: "Tell us about your day", with the event date and guest fields on, the order number off, a **Send enquiry** button and a colour block ground. That's the form on the Tier home page.
* **Collection** and **Search**: chapter 13.
* **Collections grid** is also the collections list page (`/collections`), where its heading is the page's title.
* **Blog**: **Show breadcrumbs** (on), **Body**, **Show featured entry** (on), **Show tags** (on), **Articles per page** (10, 6 to 30), Background (Page), Show piped edge (off) and Piped edge back row (Icing).
* **Article**: blocks for breadcrumb, title, byline (**Show author**, on), featured image, content, tags and share, plus the theme blocks of chapter 5.
* **404 page**: **Heading** ("This page didn't rise."), **Body** and **Show the requested address** (on: prints the address the visitor tried to open).
* **Password**: your "opening soon" page, with **Heading** ("Back in the oven"), **Body** and **Show newsletter form** (on).

## Compare

Turn on **Show compare checkbox** in Theme settings › Product cards, create a page with the `page.compare` template and choose it as the **Comparison page**. Shoppers tick up to three products; a tray at the bottom of the screen shows them with a **Compare now** button. The **Compare** section (**Show breadcrumbs**, on) shows them side by side: price and availability, then **Dietary**, **Allergens**, **Servings** and **Lead time** from your metafields, then the rows of its **Spec table** block. Allergens always print, and a product with none listed shows your **When no allergens are listed** line rather than an empty cell. A ≠ marks rows where the products differ, and shoppers can show only those. Add **Spec row** blocks to the Spec table to compare your own metafields (chapter 6). In the theme editor, the first product in your catalogue previews the rows.