# Sections

Chapter 4 of the Peel user guide.

Add a section in the theme editor with **Add section**. Most sections share a section heading: an **Eyebrow**, a **Heading** in the heading font and a **Body** (or **Intro text**) under it.

## Background and lids

Most sections have a **Background** setting, and it does more than pick a colour:

| Background | What it is |
| --- | --- |
| **Page** | The page itself, no outline |
| **Surface** | A slightly deeper band, no outline |
| **First lid colour** | A lid in the palette's first colour: rounded corners and a thick outline |
| **Second lid colour** | A lid in the palette's second colour |
| **Accent** | A lid in the accent colour |
| **Board** | A lid in the darkest colour |

Text, buttons and focus rings change with the ground on their own, so everything stays readable. A few sections offer fewer choices. The look works best when you keep it to a lid or two per screen, with plain white between them.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The big opening lid, on the home page only | 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, the default, Standard 4:3 or Square 1:1), **Rotate slides automatically** (off), **Change slides every** (7s, 5 to 10) and Background (First lid colour; also Second lid colour, Accent or Board). 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 packs** | A pack shoppers fill sticker by sticker | Chapter 10 |
| **Shop by finish** | A band of finish tiles | Chapter 8 |
| **See it on spotlight** | One sticker to drag onto your scenes | Chapter 9 |
| **Featured collection** | A row of product cards | **Eyebrow**, **Heading** ("New drops"), **Intro text**, **Collection**, **Link label** ("Shop all", linking to the collection), **Products to show** (4, 2 to 12) and Background (Page). With no collection chosen, shoppers see placeholder cards; a chosen collection with no products shows nothing. The presets come pointed at all products, so choose your own. |
| **Featured product** | One product with its buy box | **Product**, Background (Page), **Enable image zoom** (on) and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Product link, See it on, the theme blocks of chapter 5 and app blocks. With no product chosen, shoppers see a placeholder. A product with the Mix pack tag shows **Pick your stickers**, a link to its page, in place of the buy buttons. |
| **Collections grid** | Your collections as tiles | **Eyebrow**, **Heading** ("Collections"), **Body**, **Collections** (leave it empty to list every collection), **Collections per page** (12, 4 to 24, in steps of 2) and Background (Page). Add **Tile** blocks to pick tiles by hand: **Tile label** ("Stickers"), **Collection**, **Image** and **Link** (optional: it overrides the collection's own link). With no tiles, the section lists the collections above. |
| **Image with text** | A story or a promo | **Image**, **Image style** (**Die-cut sticker**, the default, or **Plain**), **Media position** (Left, the default, or Right), **Eyebrow**, **Heading**, **Body**, **Button label**, **Link** and Background (Page) |
| **Bundles** | Packs you've already made up, sold as products | **Eyebrow**, **Heading** ("Bundles"), **Body** and Background (Page). Each **Bundle** block is one product: **Product**, **Tagline**, **What's in the bundle** (one item per line, or a metafield as a dynamic source) and **Button label** ("Add bundle to bag"), which adds the product without leaving the page. A product with the Mix pack tag reads **Pick your stickers** and links to its page instead. With no Bundle blocks, shoppers see nothing. |
| **Shop the desk** | A flat lay of your desk with numbered hotspots | **Image** (shown uncropped, at its own shape, so hotspots stay on what they mark at every screen size), **Eyebrow**, **Heading** ("Shop the desk"), **Intro text** and Background (Page). Up to twenty **Hotspot** blocks: **Label** ("Sticker 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 note, such as 100 micron vinyl; connect a metafield of the chosen product as a dynamic source). A hotspot with neither a label nor a product is skipped. |
| **Icon row** | Trust icons, or numbered steps | **Heading**, **Style** (**Icons**, the default, or **Numbered steps**), Background (Page) and **Columns on mobile** (2 columns, the default, or 1 column). Up to six **Item** blocks: **Icon** (None, Truck, Return, Shield, Headset, Chat, Clock, Store, Lock, Card, Globe, Check mark, Gift, Water drop, Sun, Star or Heart), **Heading**, **Text** and **Link**. State only terms your store actually offers. |
| **Stocked at** | Up to twelve stockist or press logos | **Heading** ("Stocked at"), **Logo colors** (**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) and Background (Page; no Accent here). 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 a wall of reviews | **Layout** (**Text**, the default, or **Reviews wall**) and Background (Page). With Reviews wall: **Eyebrow**, **Heading** and **Intro text**. Up to twelve theme blocks (chapter 5). **Add section** offers **Rich text** (an eyebrow, heading and text) and **Reviews wall** (a heading and three sample reviews). |
| **FAQ** | Questions and answers | **Eyebrow**, **Heading** ("Sticker care"), **Body** and Background (Page). Add **Collapsible row** blocks, one per question. Whether a sticker survives the dishwasher, how to get one off and how long shipping takes are what shoppers ask most. |
| **Newsletter** | An email sign-up | **Heading** ("Join the sticker club"), **Body**, **Button label** ("Join the club") and Background (Accent). Sign-ups are tagged `newsletter`. |
| **Blog posts** | Your latest articles | **Heading** ("From the cutting mat"), **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) and Background (Page) |
| **Contact form** | A contact 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, so a birthday sticker or an early drop 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 reviews wall** shows each **Review** block as a sticker, tilted by position, with two in every six on a lid colour. Quotes over 120 characters drop to the body font. Only publish real reviews.

### The Hero

The **Hero** section can only go on the home page, and it has two layouts, chosen in **Layout**:

* **Lid with stickers** (the default): a big outlined lid with your headline and buttons, scattered with up to eight **Sticker** blocks. On phones the stickers come first, and up to six show.
* **Banner**: for one great photo. Your **Image** beside the words.

| Setting | Default | What it does |
| --- | --- | --- |
| Layout | Lid with stickers | Above |
| Image | Empty | With Banner: the photo |
| Background | First lid colour | Also Second lid colour, Accent or Board |
| Eyebrow | Empty | The small line above the headline |
| Heading | "Stick it on everything" | The page's main headline. Left blank, your shop name stands in. |
| Heading style | Sticker | **Sticker** sets the headline as a die-cut sticker; **Plain** sets it straight on the lid |
| Body | "Thick, waterproof vinyl stickers of small creatures having a bad day." | The line under the headline |
| Primary button label | "Shop stickers" | With **Primary button link** |
| Secondary button label | "Mix a pack" | With **Secondary button link** |
| Show the hinge | On | A small bar on the bottom edge of the lid, like a laptop hinge. Decoration only. |

Each **Sticker** block has these settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Image | Empty | A transparent PNG works best: the white border follows its outline (chapter 7) |
| Sample art | Cloud | Cloud, Frog, Mushroom, Cat, Cup, Planet, Speech bubble, Label, Washi tape, Gel pens or Enamel pin. Shows while there's no image. Only you see this, in the theme editor. Shoppers see the sticker once it has an image. |
| Shape | Contour, for a transparent PNG | Also **Round** or **Tile**, for an image with a background |
| Horizontal position | 60% (0 to 100) | From the lid's top left corner, on large screens. Phones ignore this and use block order, so put your favourite six first. |
| Vertical position | 10% (0 to 100) | The same, from the top |
| Width at full size | 220px (80 to 400, in steps of 4) | How big it is on a large screen. It scales down with the window. |
| Tilt | 0° (-9 to 9) | Small and fixed, never random |
| Link | Empty | Optional. A linked sticker takes its name from the image's alt text, so fill that in. |

The presets place eight stickers with sample art. Give each an image, or delete the ones you don't need. With no images, shoppers get the lid sized to its words.

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery, the buy box, See it on and the Spec table (chapter 6) |
| **Product recommendations** | A row of cards. Product templates only. **Heading** ("It gets lonely"), **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: "Pairs well with" (Complementary) and "It gets lonely" (Related). |
| **Quick order list** | Product templates only. For B2B customers such as stockists buying wholesale: every variant of a product in a table with quantity fields. **Heading** ("Quick order"), **Variants per page** (25, 10 to 50, in steps of 5) and **Show SKU** (on). It doesn't show on a product with the Mix pack tag. |

To pair products for **Complementary products** (the sticker sheet that goes with a notebook): install Shopify's free **Search & Discovery** app, open **Product recommendations**, click **Add recommendations**, select a product and add its complementary products. A section with nothing to recommend shows nothing.

## Page sections

* **Page**: your page's title and content, with **Show breadcrumbs** (on) and an **Eyebrow**. **Fact** blocks (a **Label** and a **Value**, such as Thickness: 100 micron) sit under a **Label** ("At a glance").
* **Contact form**: your page's title and content, then the form, with **Show breadcrumbs** (on), **Eyebrow** ("Say hello") and **Show order number field** (on), and **Menu column** blocks (**Heading**, "Quick links", and **Menu**) and **Text** blocks (**Heading** and **Text**) beside the form. Messages arrive at your store's sender address.
* **Collection** and **Search**: chapter 13.
* **Collections grid** is also the collections list page (`/collections`).
* **Blog**: **Show breadcrumbs** (on), **Body**, **Show featured entry** (on), **Show tags** (on) and **Articles per page** (12, 6 to 30, in steps of 3).
* **Article**: **Breadcrumb**, **Title**, **Byline** (**Show author**, on), **Featured image**, **Content**, **Tags** and **Share** blocks, plus the theme blocks of chapter 5.
* **404 page**: **Heading** ("This page peeled off."), **Body**, **Show the requested address** (on: prints the address the visitor tried to open) and Background (First lid colour; also Second lid colour, Accent or Board).
* **Password**: your "opening soon" page, with **Heading** ("Still on the cutting mat"), **Body**, **Show newsletter form** (on) and the same Background choices.

## 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: their price and availability, then the rows of its **Spec table** block. 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.