# Sections

Chapter 4 of the Dose user guide.

In the theme editor, click **Add section** to add any of the sections below to a page. Most sections share these settings:

* **Background**: **Page**, **Quiet ground**, **Colour block**, **Second colour block** or **Dark band**. On a colour block or the band, the section's text, buttons and dots switch to that ground's own colours, so they always read. A section on the same background as the one above starts closer to it, so the two join into one band. A section's own default is in its table.
* **The section marker**: the "dose strip", three small dots in a rounded track before the eyebrow. **Show the section marker** (on) and **Filled marker dots** (0 to 3; shows while the marker is on) set how many of the three are filled. The presets vary the count down the page, so it reads like a day ticking along. **Eyebrow** is the small line beside the marker.

Text settings show their sample words in brackets. Change every one of them.

## Hero

The page's opening. In the **Shelf** layout it's your headline on the page with a colour stage beside it, where your products stand on a white shelf with small floating cards around them. It can go on any page, and is usually first on the home page.

| Setting | Default | What it does |
| --- | --- | --- |
| Layout | Shelf | **Shelf**: the text beside the stage and its shelf. **Split**: the text beside a photo in a large rounded tile. **Image**: a wide photo with the text in a white card over its corner. **Minimal**: the text alone, centred, no stage. |
| Show the section marker, Filled marker dots | On, 2 | |
| Eyebrow | "New: Wind-down gummies" | |
| Heading | "Your daily, sorted" | The page's main heading. Left empty, it shows your shop name. |
| Body | "Gummies, capsules and powders for every part of your day. Tell us what you're working on and we'll build a stack that fits your routine." | |
| Primary button label, Primary button link | "Find your stack" | With no link, it goes to all products. The presets link it to `#goal-finder`, the goal finder lower on the home page. |
| Secondary button label, Secondary button link | "Shop best sellers" | With no link, it goes to all products |
| First tick, Second tick, Third tick | "Third-party tested", "Vegan gummies", "Pause or skip any time" | Three short lines with a tick in a small square, under the buttons. State only what's true of your products and your subscriptions. |

Under **Stage** (hidden with Minimal):

| Setting | Default | What it does |
| --- | --- | --- |
| Stage colour | Colour block | **Colour block**, **Second colour block** or **Dark band** |
| Photo | | For the Split and Image layouts. The Image layout wants 16:9 or wider. With a photo, it replaces the shelf and its cards; without one, Split and Image show the shelf too. |

Under **Shelf products** (hidden with Minimal):

| Setting | Default | What it does |
| --- | --- | --- |
| Left product, Centre product, Right product | | Transparent PNG cut-outs of your bottles and tubs. They stand on the shelf, bottoms aligned, the centre one tallest. |
| In front of the products | | A transparent PNG of a few gummies or capsules, in front of the products |
| Sample on the left, Sample in the centre, Sample on the right, Sample in front | Capsule bottle, Gummy bottle, Powder tub, Gummies and capsules | Drawn by the theme while none of the three product images is picked, on the storefront too. Choose a bottle, tub, stick packs, pill organiser or **None**. |

Under **Dose card** (the small card at the top left of the stage; hidden with Minimal): **Icon** (**Moon (sleep)** by default, or **None**, **Sun (immunity)**, **Clock**, **Bolt (energy)**, **Leaf (vegan)**, **Dumbbell (strength)**, **Drop (hydration)** or **Repeat**), **Label** ("Tonight"), **Value** ("2 gummies") and **Dots after the value** (2, from 0 to 4: filled dose dots, one per gummy or capsule; 0 hides them). Leave the label and value blank to hide the card.

Under **Supply card** (at the right of the stage): **Label** ("This bottle lasts"), **Value** ("30 days") and **Days in the mini calendar** (30, from 0 to 30: one dot per day, ten to a row). Leave the label and value blank to hide the card.

Under **Caption card** (at the bottom left of the stage): **Product** (the product's image on its goal colour, with its name, linking to it), **Title** ("Wind-down gummies") and **Line under the title** ("2 a night · from $28.90"; blank shows the product's price), and **Link**, which shows when no product is chosen. The cards are words you type, not live data, so keep them true.

Without images, the shelf shows the theme's sample bottles, so a fresh install never shows a broken picture. On phones the text goes first and the stage follows, shorter, with the dose card but without the supply and caption cards.

## Goal finder

Goal tiles and the three-question quiz that builds a starter stack. Chapter 9 covers every setting.

## Featured collection

A row of products. In the presets it's "Best sellers", with goal chips that filter the row in place.

| Setting | Default | What it does |
| --- | --- | --- |
| Background | Page | |
| Show the section marker, Filled marker dots | On, 2 | |
| Eyebrow | "Best sellers" | |
| Heading | "The ones people reorder" | |
| Text beside the heading | | A short line beside the heading |
| Collection | | The collection to show. With none chosen, shoppers see a row of sample cards, so choose one. A chosen collection with no products shows nothing. |
| Products to show | 4 | 2 to 12 |
| Show goal chips | On | Under **Goal chips**. **All** and a chip for each name in **Goal names** (Theme settings › Goals). A chip shows the first products of the collection whose `custom.goals` has that goal, without reloading. A goal none of the products has gets no chip. |
| Link label, Link | "Shop all" | Show while **Show goal chips** is off: a link beside the heading. With no link, it goes to the collection. |

The chips look through the collection's first products (three times **Products to show**, 24 at most) and need no app.

## Featured product

One product with its buy box, on any page.

| Setting | Default | Notes |
| --- | --- | --- |
| Background | Page | **Page**, **Quiet ground** or **Second colour block** |
| Product | | **Until you choose one, shoppers don't see the section at all.** The theme editor shows a sample and says "No product selected". |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
| Pre-orders | Off | The same three settings as the product page (chapter 6) |

Its blocks are **Tags**, **Title**, **Product vendor**, **Price**, **Inventory**, **Variant picker**, **Description**, **Buy buttons**, **Supply calculator**, **Supplement facts**, **Ingredients and evidence** and **Product link** ("View details"), plus the general blocks in chapter 5 and app blocks. A new Featured product starts with tags, title, price, inventory, variant picker, description, buy buttons and the supply calculator.

## Fact row

Three or four short facts on the dark band, each with an icon in a ring of dots. In the Dose preset it's "Why our gummies".

| Setting | Default | What it does |
| --- | --- | --- |
| Background | Dark band | |
| Show the section marker, Filled marker dots | On, 3 | |
| Eyebrow | "Why our gummies" | |
| Heading | "Small gummy, no shortcuts" | |
| Text | "Every batch is made in Australia, checked by an independent lab and packed in a glass-look bottle you can recycle." | |

Add up to six **Fact** blocks, each with an **Icon** (**Check mark** by default; the list has evidence icons such as **Flask (tested)**, **Leaf (vegan)** and **Sprout (organic)**, shop icons such as **Truck** and **Repeat**, and the goal and format icons), a **Heading** ("Heading"), a **Text** and a **Link** (shows once there's a heading). State only terms your store actually offers, and only facts you can show proof for: "organic", "vegan" and "tested for banned substances" are claims with rules of their own in many countries (chapter 12).

The lead column and the facts sit four across from 990px; on phones each fact is a row with its ring at the left.

## Supply promo

The "Never run out" band: your words, the sum ("60 gummies ÷ 2 a day = 30 days") and three ticks on the left, and on the right a white card with the supply calculator for one product and its own subscribe button. Chapter 10 covers every setting.

## Ingredient spotlight

Four or so of your key ingredients as cards, each on a goal colour, with an evidence row under them. In the presets it's "What's inside, and why it's there".

| Setting | Default | What it does |
| --- | --- | --- |
| Background | Page | |
| Show the section marker, Filled marker dots | On, 2 | |
| Eyebrow | "Ingredients" | |
| Heading | "What's inside, and why it's there" | |
| Text | "Every ingredient, its amount and where it comes from, printed on the product page. No proprietary blends." | |
| Link label, Link | | A link beside the heading. It shows only with both. |
| Show the evidence row | On | Under **Evidence row**. A quiet band under the cards. |
| Evidence label | "Every product shows" | The words at the start of the row |
| Certifications | "Third-party tested, Vegan, Gluten free, Non-GMO" | Separated by commas. Shown as text chips with simple icons, never certifier logos. Keep only what's true of every product, or reword the label. |
| Lab report link | | A link to a lab report, such as a PDF in **Content › Files**. A PDF opens in a new tab. |
| Lab button label | "See a lab report" | Shows with the link |

Add up to eight **Ingredient** blocks:

| Setting | Default | What it does |
| --- | --- | --- |
| Image | | A photo of the ingredient. It stands on a small white dish on its tile. Without one, the tile shows a large icon from the ingredient's name. |
| Tile colour | By position | **By position** (goal colours 5, 2, 4, 1, 3, 6 in turn), **None**, or **Goal colour 1** to **Goal colour 6** |
| Ingredient name | "Magnesium glycinate" | |
| Amount | "200 mg" | Shown on a chip at the top left of the tile |
| Note | "The form of magnesium we chose for our evening gummies and capsules." | Where it comes from or why it's there. Not what it does for the body (chapter 12). |
| Product | | A product that contains it: the card ends with "In Wind-down gummies" and links there |

Four cards sit across from 990px, two below. The product page's own ingredient cards come from each product's `custom.key_ingredients` instead (chapter 11).

## Image with text

Your picture in a large rounded square beside your words. **Background** (Page), **Image**, **Ground behind the image** (**Second colour block** by default, or **Colour block**, **Quiet ground** or **Goal colour 1** to **6**; it shows behind a cut-out and while the image loads), **Sample when no image** (**Powder tub**; drawn by the theme until you pick an image, on the storefront too), **Media position** (**Left** or **Right**), the section marker, **Eyebrow**, **Heading** and **Body** ("Our story", "From our shelf to yours"), and **Button label** ("Our story") with its **Link** (with no link, the home page).

## Slideshow

Slides that each show a stage with an image beside the words, on the home page, pages and collections. Up to six **Slide** blocks, each with an **Image** (a photo for the stage; without one, the theme's sample container stands on the shelf), **Eyebrow**, **Heading** ("Heading"), **Text**, **Button label** and **Link** (shows once there's a label).

| Setting | Default | Notes |
| --- | --- | --- |
| Background | Page | **Page** or **Quiet ground** |
| Stage colour | Colour block | **Colour block**, **Second colour block** or **Dark band** |
| Media position | Left | **Left** or **Right** |
| Image ratio | Standard 4:3 | **Adapt to first image**, **Wide 16:9**, **Standard 4:3** or **Square 1:1** |
| Rotate slides automatically | Off | Shoppers get a pause button. Slides never rotate for visitors who prefer reduced motion. |
| Change slides every | 7s | 5 to 10s. Shows when rotation is on. |

## Rich text and Testimonials

Your words. **Layout** (**Text column**, or **Testimonial cards**, which puts testimonial blocks three to a row, a sideways scroller on phones), **Background**, the section marker, **Eyebrow**, **Heading**, **Text beside the heading**, **Link label** and **Link**. It takes the general blocks in chapter 5.

In **Add section** it's listed twice: as **Rich text**, and as **Testimonials**, which starts in the Testimonial cards layout ("From the daily crew", with "4.8 out of 5 from 3,200 reviews. Every one from a real order." beside it) and three **Testimonial** blocks. Each testimonial is a white card with up to five stars, the **Quote**, a rule, and a line naming what was bought: a small thumbnail on a goal colour, the product name, and the reviewer ("Sam, Brisbane · 4th bottle") followed by a dot per bottle. Chapter 5 lists its settings.

Use real words from real customers, and only a rating you can show. The presets' testimonials and rating are samples (chapter 12).

## Starter stacks

Ready-made stacks you sell as one bundle product, such as "The sleep stack". **Background**, the section marker, **Eyebrow** ("Starter stacks"), **Heading** ("Stacks that work together") and **Text beside the heading**. With no blocks, shoppers see nothing. Stacks sit three to a row on large screens; one or two share the whole row, with the picture beside the words.

Add a **Starter stack** block for each:

**Stack name** ("The sleep stack"; blank uses the product's title), **Product** (a bundle product that holds the whole stack: its price is the stack total, and a compare-at price shows "Save $8.00"), **Tagline**, **Products in the stack** (one per line, "Wind-down gummies", "Magnesium glycinate": words only, each with a dose dot in the stack total), **Image ground** (**Goal colour 1** to **6**) and **Button label** ("Add stack to bag").

The button adds that one bundle product, so create the stack as a product of its own first (Shopify's free **Shopify Bundles** app can build one from your products). Until you choose a product, the card shows the name, tagline and list over a sample drawing, with no price and no button. To let shoppers build their own stack from separate products, use the Goal finder's quiz (chapter 9).

## Shop the shelf

A photo of a shelf, a kitchen counter or a bathroom cabinet with numbered hotspots that open a small card. The same details are listed under the image, so phone shoppers and keyboard users get them too. The image is shown uncropped, at its own shape, so hotspots stay on the things they mark at every screen size. Without a photo, the theme's sample shelf stands in.

The section has **Background**, **Image**, the section marker, **Eyebrow** ("Shop the shelf"), **Heading** ("What's on our shelf") and **Text beside the heading** ("Tap a product to see what it is and how much it costs."). Add up to 20 **Hotspot** blocks:

| Setting | Default | Notes |
| --- | --- | --- |
| Label | "Product" | Change it to what's pictured. Blank uses the product's title. |
| Horizontal position | 50% | 0 to 100%, from the image's left edge, in every language direction |
| Vertical position | 50% | 0 to 100%, from the image's top edge |
| Product | | Optional. Shows the product's price and stock, and links to it. |
| Detail | | A short note, such as "60 gummies · 2 a day". You can connect a metafield of the chosen product with the dynamic source button. |

## As seen in

Press mentions and stockist logos, up to 12. **Background**, **Heading** ("As seen in"), **Logo colours** (**Monochrome** by default, or **Original**), **Logo height** (36px, from 24 to 96px in steps of 4) and **Layout on mobile** (**Wrap** or **Scroll**).

Each **Logo** has an **Image**, a **Company name**, a **Link** and a **Quote**. Monochrome turns each logo into one flat colour that suits the palette, so use logos with transparent backgrounds. A logo without a name isn't shown to shoppers. Screen readers read the name as the logo. Show only coverage and stockists you actually have.

## Blog posts

Your newest articles. **Background**, the section marker, **Eyebrow** ("Journal"), **Heading** ("Routine notes"), **Link label** ("Read the journal"), **Link**, **Blog** (shows its newest articles and adds a link to it), **Articles to show** (3, from 2 to 12; shows while **Articles** is empty) and **Articles** (overrides the blog: they appear in the order you pick them). With no blog and no articles chosen, shoppers see nothing.

## Newsletter

An email sign-up on a colour tile with the dot grid in its corner.

**Background** (**Page** or **Quiet ground**, round the tile), **Block colour** (**Colour block**, **Second colour block** or **Dark band**: the tile itself), the section marker (3 dots), **Eyebrow** ("The newsletter"), **Heading** ("Small habits, one email a month"), **Body** ("New flavours, routine ideas and a heads-up before anything sells out."), **Button label** ("Sign me up") and **Small print** ("One email a month. Unsubscribe any time.").

Addresses go to **Customers** in Shopify admin, tagged `newsletter` and subscribed to email marketing. The theme doesn't send anything or create discount codes itself, so promise only what you'll send from Shopify Email or your own email tool.

## FAQ

Questions and answers, with one **Collapsible row** block each (chapter 5). **Background**, the section marker, **Eyebrow** ("Questions"), **Heading** ("Questions, answered"), **Body** ("Can't find it here? Our team answers every message within one working day."), **Link label** ("Contact us"; a link under the text, such as your contact page) and **Link**. The heading sits on the left and the questions on the right; on phones they stack. Each row opens with a plus in a small square that turns into a minus.

Keep answers to facts about your products and your shop (chapter 12).

## Collections grid

Your collections as goal-coloured tiles, on the collections list page (`/collections`). It can't be added to other pages.

**Eyebrow** ("Shop"), **Heading** ("Every shelf"), **Body**, **Collections** (leave empty to list every collection) and **Collections per page** (12, from 4 to 24 in steps of 2, with page numbers under the tiles).

Each tile shows the collection's image on a goal colour (its own when the collection's title is in **Goal names**), a goal icon when the title names a goal such as Sleep or Energy, the title and the product count.

## Product recommendations

Product pages only. A row of cards under the product, "Goes well with" in the presets.

The section marker (3 dots), **Eyebrow** ("Build your stack"), **Heading** ("Goes well with"), **Link label** and **Link**, **Recommendation type** (**Related products**, which are similar, or **Complementary products**, which pair with this one) and **Products to show** (4, from 2 to 10).

Shopify works out related products by itself once it has order history. Complementary products are ones you choose in the Search & Discovery app: the magnesium that goes with the sleep gummies, the shaker that goes with the protein.

## Facts and ingredients

Product pages only. The band under the buy box that holds the **Supplement facts** panel (chapter 8) in a column at the left, and the section's own blocks beside it: **Ingredients and evidence** (chapter 11) in the presets, and any general block or app block you add, such as a **Collapsible row**. Under 990px they stack, the facts first.

The facts panel is fixed in this section: you can't remove or move it, but you can select it to change its settings. Each side hides on its own: a product without facts gives the blocks the whole width, and with neither the section shows nothing (in the theme editor, a note says so).

## Quick order list

Product pages only: see **B2B** in chapter 6.

## Section and Custom Liquid

**Section** is an empty container: fill it with any blocks in chapter 5. **Custom Liquid** takes Liquid code, such as an app snippet.

## Sections that belong to a template

These can't be added, but you'll see them when you open their template in the editor.

| Section | Settings |
| --- | --- |
| Collection | **Show breadcrumbs**, **Show collection image**, **Show description**, **Enable filtering**, **Enable sorting** (all on), **Show vendor** (off), **Products per page** (12, from 8 to 36 in steps of 4) |
| Search | **Show breadcrumbs**, **Enable filtering**, **Enable sorting** (all on), **Results per page** (12, from 8 to 36 in steps of 4) |
| Contact form | **Show breadcrumbs**, the section marker (1 dot), **Eyebrow** ("Say hello"), **Show order number field** (on). Blocks: **Menu column** (**Heading** "Quick links", **Menu**) and **Text** (**Heading**, **Text**), in a column beside the form. Messages go to your store's sender email in **Settings › Notifications**. |
| Page | **Show breadcrumbs**, **Eyebrow**, **Label** ("At a glance"). **Fact** blocks (**Label**, **Value**) list key facts under your page text. |
| Compare | See below |
| Blog | **Show breadcrumbs**, **Body**, **Show featured entry** (on), **Show tags** (on), **Articles per page** (10, from 6 to 30 in steps of 2) |
| Article | Blocks: **Breadcrumb**, **Title**, **Byline** (**Show author**), **Featured image**, **Content**, **Tags** and **Share** |
| 404 page | **Heading** ("Missed a dose"), **Body** ("That page isn't here. Let's get you back to your routine."), **Button label** ("Back to the shop"), **Show the requested address** (on) |
| Password | **Stage colour** (Colour block), the section marker (1 dot), **Eyebrow** ("Almost ready"), **Heading** ("Opening soon"), **Body** ("We're filling the shelves. Leave your email and we'll tell you the day we open."), **Show newsletter form** (on). The password field for you and your team is a click away on the same page. |
| Product, Facts and ingredients, Quick view | See chapter 6 |
| Cart, Cart drawer | See chapter 13 |

## Compare

Shoppers tick **Compare** on up to three cards and see them side by side. To turn it on:

1. Create a page in **Online Store › Pages** and set its **Theme template** to `page.compare`.
2. In **Theme settings › Product cards**, turn on **Show compare checkbox** and choose the page as **Comparison page**.

The table shows each product's price and availability, then the supply rows: **Servings** (`custom.servings`), **Servings a day** (`custom.daily_servings`), **Format** (`custom.format`) and **Price per day** (the price × servings a day ÷ servings), and then the rows of its **Specifications** block. A product without a value leaves that cell empty, and **Show only differences** hides the rows where the products agree. In the theme editor, the first product in your catalogue previews the rows.