# Sections

Chapter 4 of the Derma user guide.

Add a section with **Add section** in the theme editor's left panel. Most sections share these settings, so they aren't repeated below:

* **Label**: the small pill above a heading, such as "Clinic favourites".
* **Heading**: italicize one word to set it in the accent colour.
* **Intro text**: a short lede under the heading.
* **Heading alignment**: Left or Center, where offered.
* **Background**: Page, Surface (the alternate band) or Tint (a soft accent tint), where offered. Alternate Page and Surface down the page for rhythm.

Sections that need a product or collection show placeholder cards in the editor until you choose one. Sections that need data, such as a study or ingredient entries, show a dashed note in the editor saying what's missing and render nothing for shoppers.

## Home page and content sections

**Hero** (home page only). The opening section, and the page's main heading.

| Setting | Default | Notes |
| --- | --- | --- |
| Layout | Arch | Arch (text beside an arch-topped image), Inset (a wide 21:9 image with the text on a card overlapping its lower edge), Centered (centred text above a dome-topped image) |
| Heading | "Skincare that shows *its working.*" | When cleared, the shop name is used |
| Intro text | | Rich text |
| Primary button label / link | "Shop best sellers" | The link appears once a label is set |
| Secondary button label / link | | |

A hero button that links to the skin quiz page (`/pages/skin-quiz`, or the page chosen in Theme settings › Skin and formula › Skin quiz page) follows that setting, and hides while no quiz page is chosen, so it never leads to a missing page.
| Image | | Shown in the theme's media shape. Without an image, the product card's product stands in on a soft tint. |
| Circle image | | A round close-up, such as a texture, overlapping the image (Arch layout) |
| Product card | | A small card over the image that links to the product |
| Footnote | | Explains any figure marked with a number, such as the study behind it. Small print under the figures. |

Blocks: **Proof** (up to 3): "Value" (default "87%"), "Footnote number" (a small number after the figure that matches a line in the footnote, such as 1) and "Label". See chapter 8 before you publish any figure.

**Promise strip**. Up to 6 **Item** blocks, each with "Icon", "Heading", "Text" and "Link". Icons: None, Flask, Drop, Fragrance free, Leaf, Cruelty free, Refill, Sparkle, Sun, Moon, Capsule, Calendar, Star, Info, Truck, Return, Shield, Headset, Chat, Clock, Store, Lock. State only terms your store actually offers. Section settings: "Heading" (optional) and Background.

**Featured collection**. Product cards from one collection.

| Setting | Default | Notes |
| --- | --- | --- |
| Collection | | |
| Link label | "Shop all [count] products" | Write [count] to show the collection's product count |
| Products to show | 4 | 2 to 8 |
| Columns on desktop | 4 columns | 3 or 4 |

**Shop by concern** (the "Collections grid"; also on the collections list page and pages). Round or arch tiles linking to collections.

| Setting | Default | Notes |
| --- | --- | --- |
| Collections | | Leave empty to list every collection |
| Tile style | Circle | Circle or Arch |
| Columns on desktop | 6 columns | 4, 5 or 6 |
| Show product count | On | |
| Collections per page | 12 | 4 to 24 |
| Link label / Link | | An optional link under the grid |

**Featured product**. A product's buy box anywhere on the site: "Product", Background, "Enable image zoom", and the same pre-order settings as the product page (chapter 6). It takes the same product blocks as the product page (chapter 6), plus Product link, theme blocks and app blocks.

**Image with text**. "Image", "Image ratio" (Portrait 4:5, Tall 3:4, Square 1:1, Landscape 4:3; default 4:5), "Circle image", "Media position" (Left or Right), Label, Heading (default "Clean, by *our* definition"), "Body", "Button label" and "Link".

**Slideshow** (home page, pages, collections). Up to 6 **Slide** blocks (image, label, heading, text, button). Settings: "Name for screen readers", "Image ratio" (default Wide 16:9), "Rotate slides automatically" (off; with a pause button, and never for visitors who prefer reduced motion) and "Change slides every" (5 to 10 seconds, default 7).

**Rich text**. "Alignment" (Left or Center) and Background; add Heading, Text, Button and other theme blocks (chapter 5).

**Section**. An empty band for building your own layout from theme blocks and app blocks. Setting: Background.

**Press and logos**. Up to 8 **Logo** blocks: "Image", "Company name" (shown as a wordmark when there's no image), "Link" and "Quote" (shown large above the logos while that logo is selected). Section: "Heading" (default "As seen in"), "Logo colors" (Original or Monochrome, which turns each logo one flat colour; use transparent logos) and "Logo height" (20 to 64px, default 32).

**Newsletter**. A sign-up band: Label, Heading (default "Skin notes, *once a month*"), "Intro text", Background (default Surface). Sign-ups become customers with email marketing consent in Shopify admin.

**Blog posts**. "Blog" (shows its newest articles and links to it), "Articles to show" (2 to 9, default 3), "Articles" (overrides the blog; articles appear in the order you pick), "Link label" (default "All articles").

**FAQ**. Collapsible row blocks (chapter 5) with a contact prompt: "Contact prompt" (default "Still have a question?"), "Link label" (default "Contact us"), "Link".

**Shop the shelf**. A shelf or flat-lay photo with hotspots that open product details, and one button to add them all.

| Setting | Default | Notes |
| --- | --- | --- |
| Image | | Shown uncropped, at its own shape, so hotspots stay on the parts they mark at every screen size |
| Add all button | "Add all to bag" | Adds every hotspot product that can be bought without choosing options. Leave empty to hide the button. |

**Hotspot** blocks (up to 8): "Product" (optional; shows its price and stock and links to it), "Label" (leave empty to use the product's title), "Detail" (a short note such as "Shade 3W" or "pH 5.5"; connect a metafield of the chosen product with the dynamic source button), "Horizontal position" and "Vertical position" (0 to 100%, from the image's left and top edges, in every language direction).

**Custom Liquid**. "Liquid" (app snippets or other Liquid code), Background and "Tight spacing".

## Skin sections

These four sections are Derma's signature features. They read your skin and formula data, so set that up first (chapter 7).

**Skin finder**. A three-question quiz that matches shoppers to products. Question 1 (skin type) and question 3 (sensitivity) filter the results; question 2 (concern) picks the collection they come from. Full settings in chapter 7.

**Clinical results**. Results from one or two Clinical study entries, with footnotes, a link to the study PDF and an optional before and after slider.

| Setting | Default | Notes |
| --- | --- | --- |
| Study / Second study | | Clinical study entries |
| Show before and after | On | Needs both images and a caption on the study |
| Media position | Left | Left or Right |
| Study link label | "Read the study summary (PDF)" | Shown when the study has a document |

A study's results show only with its summary, and a before and after only with its caption. See chapter 8.

**Routine**. Numbered step cards with checkboxes beside a summary card that totals the checked steps and adds them all to the bag in one click. A Morning and Night switch shows each time of day's steps.

| Setting | Default | Notes |
| --- | --- | --- |
| Show morning and night switch | On | Hidden when every step is set to Both |
| Show first | Morning | Morning or Night |
| Button label | "Add routine to bag" | |
| Saving note | | Describe an automatic discount you've set up in **Discounts**, for example "15% off when you buy three or more steps together. Applied at checkout." Leave empty if there's no discount. |
| Saving shown | 0% | 0 to 50%. Only for the struck-through total in the summary; the discount itself comes from Discounts. 0 shows no strike. |
| Strike the total from this many steps | 3 | 1 to 6; shown when "Saving shown" is above 0 |
| Build from the product | Off | On a product page with no steps, builds the routine from the product and its complementary products (Search & Discovery) that have a routine step (`derma.routine_step`) |

**Step** blocks (up to 10): "Time of day" (Both, Morning, Night; default Both), "Step name" (default "Cleanse"), "Product", "Note" (for example "60 seconds, then rinse"), "Optional step" (starts unchecked), and under Alternative: "Alternative product" (shoppers can switch the step to it, for example for another skin type), "Product's label" (default "For oily skin") and "Alternative's label" (default "For dry skin").

The step for the product a shopper is viewing is marked "You're viewing". Sold-out steps are unchecked and can't be added. A step without a product is hidden from shoppers.

> **Note:** "Saving shown" never creates a discount. Set up a matching automatic discount in **Discounts** (for example, a percentage off when three or more products from a collection are in the cart), or leave both empty.

**Ingredient glossary**. Your Ingredient entries as cards. "Style": **Full A to Z** (for the glossary page: an A to Z letter rail, a search field and concern chips, with cards grouped by letter) or **Teaser** (a few cards and a link, for the home page). Teaser settings: "Ingredients to show" (4 to 8, default 4), "Link label" (default "Browse A to Z") and "Link" (leave empty to link to the glossary page set in theme settings). See chapter 7.

**Ingredient**. The page for one Ingredient entry, used by the `metaobject/ingredient` template. It has no settings: everything comes from the entry.

## Product page sections

**Product**: the main product section. See chapter 6.

**Formula and use** (product pages only). A band that holds the formula, how to use, results, supplement facts and spec table blocks. Settings: Label (default "Formula"), Heading (default "What's inside, and *how much*"), "Intro text", Background (Page or Surface). Half-width blocks pair up two per row; the formula block spans the band. When none of its blocks has data for a product, the band isn't shown. Details in chapters 6 and 7.

**Product recommendations** (product pages only). Label (default "Recommended"), Heading (default "Pairs well with"), "Recommendation type" (Related products are similar; Complementary products pair with this one, and come from the Search & Discovery app) and "Products to show" (2 to 10, default 4).

**Quick order (stockists)** (product pages only). A table of every variant with quantity fields, for wholesale and B2B buyers ordering many sizes or shades at once: "Heading" (default "Order by size"), "Variants per page" (10 to 50, default 25), "Show SKU" (on). It isn't shown for products with one variant or products sold only with a subscription.

## Collection, search and cart

**Collection**: "Show breadcrumbs", "Show collection image", "Show description", "Enable filtering", "Enable sorting", "Show vendor" (off), "Show skin quiz prompt" (on: "Not sure what suits you? Take the skin quiz" above the products; needs a skin quiz page in theme settings; with a saved skin profile it offers that skin type's filter instead, when the collection has it) and "Products per page" (8 to 36, default 12).

**Search**: "Show breadcrumbs", "Enable filtering", "Enable sorting", "Results per page" (8 to 36, default 12).

**Cart** (cart page): "Show order note on the cart page". **Cart drawer** (edit it from any page): "Show order note in the cart drawer" and "Show “Complete your routine”". See chapter 9.

## Pages

**Page** (default page template): "Show breadcrumbs", Label, "Facts heading" (default "At a glance") and **Fact** blocks ("Label", "Value") shown in a card beside the page content, for example "Founded / 2019".

**Contact form** (`page.contact` template): "Show breadcrumbs", Label (default "We usually reply within a day"), "Show order number field" (on), with **Menu column** blocks ("Heading", "Menu") and **Text** blocks ("Heading", "Text") beside the form.

**Compare** (`page.compare` template): up to 3 products the shopper ticked on cards, side by side, with price, availability and the rows of its Details block (add Detail rows for metafields such as `derma.strength`). Create a page with this template, choose it in Theme settings › Product cards › "Comparison page" and turn on "Show compare checkbox".

**Blog**: "Show breadcrumbs", Label, "Intro text", "Show tags", "Articles per page" (6 to 30, default 9). **Article**: built from blocks: Breadcrumb, Title, Byline, Featured image, Content, Tags and Share (chapter 5).

**404 page**: "Heading" (default "This page isn't in our formula."), "Intro text", "Button link", "Show the requested address".

**Password**: Label (default "Opening soon"), Heading, "Intro text", "Show newsletter form".