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.