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.