Theme settings
Chapter 2 of the Peel user guide.
Open the theme editor, then the Theme settings icon. The groups below appear in this order. Everything here applies to the whole store.
Colors
Color palette sets every storefront colour at once. It offers Bubblegum (the default), Notebook, Y2K and Blacklight.
| Palette | Page | Surface | First lid | Second lid | Buttons and links | Ink | Used by |
|---|---|---|---|---|---|---|---|
| Bubblegum | White #ffffff | #f3f0f8 | Bubblegum #ff8ccf | Lemon #ffdf3d | Cobalt #1d36e0 | #22202b | The Peel preset |
| Notebook | Cream #fff9ea | #f6edd6 | Coral #ff6a55 | Pale blue #a8dcf0 | Margin red #c4241d | #2b2a33 | The Washi preset |
| Y2K | Deep lilac #cdbdff | #bcaaf9 | Ice blue #a9d0ff | Bubble pink #ffc4ec | Chrome blue #14339f | #1c1638 | The Retro preset |
| Blacklight | Near black #0c0a12 | #211c2e | Neon yellow #f4ff3b | Neon pink #ff4fae | Neon pink #ff4fae | #efecf7 | No preset. A dark shop with near-black labels on neon lids. |
Each palette also has colours you can't set yourself: the board, the darkest band, used by the announcement bar and the footer; the die and keyline, the white border and black outline of every sticker, which stay the same on every ground, so a sticker looks like the same sticker everywhere; and the four flat tile colours behind sticker art. Every text and control colour in the four palettes has been measured against every ground it can sit on, and meets the contrast floors for text (4.5:1) and for controls (3:1).
Page pattern is None or Ruled paper, which draws faint lines and a margin behind the page. Lids and stickers sit on top of it. The margin line sits in the space beside your content, so it never crosses text, and it's left out on phones, or wherever Page margin leaves too little room for it. The Washi preset uses it, and it works with any palette.
The settings under the pattern override one colour at a time. Leave them blank to follow the palette. A colour you set overrides the palette until you clear it, and colours you set are yours to check for contrast: the measurements above no longer apply to them.
| Header | Setting | What it colours |
|---|---|---|
| Page | Page background | The page itself |
| Body text | Paragraphs | |
| Headings, names and prices | Headlines, product names and prices | |
| Secondary text | Ledes, helper text and meta lines | |
| Faint text | The quietest text, such as struck-out prices | |
| Panels and fields | Header, drawers and fields | The header, drawers, fields and popovers |
| Surfaces and panels | Surface bands, panels and the ground behind images while they load | |
| Controls | Control borders | Outlines: lids, fields, selects and checkboxes |
| Accent | Primary buttons, links and selected states | |
| Sale and errors | Sale prices, sale badges and error messages | |
| Lids | Text on accent fills | Labels on accent fills, such as the primary button |
| First lid colour | The hero and other big outlined fields. Change a lid and its text as a pair, and keep the text near-black or near-white. | |
| Text on the first lid | Text on that lid | |
| Second lid colour | The second lid, such as the mix pack | |
| Text on the second lid | Text on that lid |
Typography
| Setting | Default | What it does |
|---|---|---|
| Heading font | Titan One | Headlines, the text logo, prices on stickers and badges |
| Heading size | 100% (90 to 120) | Scales every headline. Each preset sets its own. |
| Body font | Plus Jakarta Sans | Everything you read and press: text, navigation, buttons, prices and labels |
| Base text size | 17px (15 to 20) | The size of body text |
The fonts come from Shopify's font library, so there's nothing to upload. A chunky heading face is a lot of the theme's character: if you change it, try one with some weight behind it.
Layout
| Setting | Default | What it does |
|---|---|---|
| Page width | Medium | Narrow, Medium or Wide |
| Page margin | 48px (16 to 80) | The space at each side of the page on large screens. Under 990px it is 16px. |
Navigation and Brand
- Navigation: Show back-to-top button (on): a round button that appears after shoppers scroll down one screen. It stays out of the way of your content: it goes while a bar is docked at the bottom of the screen, and on screens under 1440px wide it shows only as shoppers scroll back up, then fades after 3 seconds. Position: Left (the setting's default) or Right (what the presets use). It is mirrored for right-to-left languages. Pick the side opposite your chat button.
- Brand: Use a custom logo (off: the shop name shows as a text wordmark), Logo, Logo width (180px, 80 to 320, with a custom logo), Favicon (32 x 32px recommended) and Show the big wordmark in the footer (on: your shop name, very large, across the footer, wrapping as needed).
Commerce
| Setting | Default | What it does |
|---|---|---|
| Free shipping over | 0 (35, 40 or 50 in the presets) | Your store's real free-shipping threshold, in its currency. Set it to 0 unless you offer free shipping. |
| Show currency code | Off | Prints the currency code beside every price |
Free shipping over only changes the theme's messages. The free shipping itself is a rate you set in Settings › Shipping and delivery, so change the preset's number to your real threshold, or to 0. Above 0, it shows only to customers shopping in your store's currency, in one of two ways:
- With the free gift bar on (the default), it joins the bar as the last step, with "Spend $11.50 more for free shipping" and then "Free shipping unlocked" (chapter 11). The buy box's nudge reads it too.
- With the free gift bar off, the buy box shows "Free shipping over $35." under the add button instead, and the bag shows no free shipping message at all.
Product cards
| Setting | Default | What it does |
|---|---|---|
| Sticker cut | Tile | Tile puts any image on a coloured tile inside the die-cut. Contour, for cut-out art follows the outline of a transparent PNG, so every product image must be cut out (chapter 7). |
| Show the peeled corner | On | The lifted corner on sticker images. The die-cut border stays when this is off. |
| Sticker tilt | 100% (0 to 100, in steps of 5) | 100% is the full tilt, which stays within a few degrees. 0% sets every card straight. |
| Image fit | Inset on the tile | Inset on the tile suits cut-out art. Fill the tile suits lifestyle photos. |
| Show the line under the name | On | Shows the product type, or the custom.card_note metafield when it is set (chapter 7) |
| Show quick view button | Off | A Quick view button under the price, which opens the product's media, options and buy buttons in a panel without leaving the page |
| Show quick add button | Off (on in all three presets) | The round + on the art (below) |
| Show swatches | Off | Shows the values of the first option that has swatches, such as Color |
| Swatches before "+" count | 5 (2 to 8) | With swatches on |
| Show second image on hover | Off (on in all three presets) | On devices with a mouse, shows the product's second image while the card is hovered or focused. Products with one image don't change. It has no effect with Contour. |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side on the comparison page. Stays hidden until a page using the page.compare template is chosen below. |
| Comparison page | Empty | Create a page in Online Store › Pages, set its theme template to page.compare, and choose it here. A page with another template is ignored, and cards show no Compare. |
| Show "Only 3 left" at or under | 6 (0 to 20) | Products tracked at or under this stock get a low stock badge. Set 0 to turn it off. |
The card has no box. The product stands as a sticker with its tilt, a badge on it if one applies and, with quick add on, a round + at its bottom left, always visible because a shopper on a phone has no hover. Under it come the name, the line under the name, swatches if they're on, and the price. Tilts are fixed by position, so a page looks the same on every load. The whole card is one link to the product.
The round + button gives each product the action that can actually buy it. It only shows with Show quick add button on:
| The product | What the + does |
|---|---|
| One variant, nothing to choose | Adds it to the bag without leaving the page |
| Options, a required subscription plan or a gift card | Opens quick view |
| Tagged with the Mix pack tag | Goes to the product page, because a pack is filled there and never from quick view |
| Sold out | There's no button |
Badges are small die-cut stickers on the art, and a pill after the price on the product page. A card shows one, the first of these that applies:
| Badge | Shows when |
|---|---|
| Sold out | Nothing can be bought |
| Pre-order | On the product page only: the variant qualifies under the section's pre-order settings (chapter 6). Cards can't see those settings. |
| Save $6 | The variant has a compare-at price above its price |
| Only 3 left | The variant is tracked, stops selling at zero, and is at or under Show "Only 3 left" at or under |
| New | The product has the tag new |
| Best seller | The product has the tag best-seller |
To change a word on the storefront, such as "Add to bag", go to Online Store, open the theme's … menu, choose Edit default theme content and search for it.
Finish and size
The settings behind the finish swatches and size chips. Chapter 8 explains how they work together.
| Setting | Default | What it does |
|---|---|---|
| Show finish and size previews | On | Off, finish and size options show as ordinary pills: no sheen on the image, no swatches, no chips, no hints, and no finish chips above your collections. See it on stops following the shopper's size. |
| Finish option names | "Finish" | The product options that count as finishes. Separate with commas. Capitals don't matter. |
| Other finish names | Empty | For a value the theme doesn't recognise by itself. One per line (chapter 8). |
| Size option names | "Size" | The product options that count as sizes. Separate with commas. Capitals don't matter. |
| Size hints | 1 to 4 (below) | The line under the chips. One per line, as below. |
The default Size hints are:
1 | About the size of a coin.
2 | About the size of a matchbox.
3 | About the size of a credit card.
4 | About the size of a drink coaster.Free gift progress
A bar in the bag that counts up to a reward. Chapter 11 explains how to set up the gift and the discount that makes it free.
| Setting | Default | What it does |
|---|---|---|
| Show the free-gift bar | On | The bar, the automatic gift and the product page's nudge. Free shipping over joins the bar as the last step when it's above 0. |
Under First reward and Second reward, each with the same five settings:
| Setting | First reward's default | What it does |
|---|---|---|
| Spend this much | 20 (20 or 25 in the presets) | The amount, in your store currency. Blank or 0 leaves this reward out. |
| Reward name | "Free sticker" | Shown under the bar |
| Gift product | Empty | The product the bag adds. Leave blank for a milestone with nothing added. |
| Message before it is reached | "Spend [amount] more for a free sticker" | [amount] is replaced with the money left to spend |
| Message once it is reached | "Free sticker added" | Shown while the gift is in the bag. With no Gift product, or while the gift hasn't gone in, the bar says "[Reward name] unlocked" instead. |
The second reward is blank by default. If you use it with no messages of your own, the bar builds them from its Reward name: "Spend $4 more for Free bonus sheet" and "Free bonus sheet unlocked", so write your own.
Mix-and-match packs
Mix pack tag (mix-pack): products with this tag sell only through the Mix-and-match packs section. They lose their variant picker and buy buttons, their card's + links to their page, and they skip quick view. Capitals don't matter. Assign them the product.mix-pack template (chapter 10).
Customer accounts and Social media
- Customer accounts: Customer account menu (the
customer-account-main-menumenu): the links in the header's account panel. Leave it empty to use the menu Shopify creates for customer accounts. - Social media: Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest and Threads. Links appear in the footer.