Sections and blocks

Every section and block in Dosewell, by the name you see in the theme editor. Settings are named as they appear there. The product page’s own blocks are in Product page.

Settings most sections share. Every section that paints a background has Color scheme (see Theme settings > Colors), Top padding and Bottom padding (0 to 160px). On phones, padding is scaled by Theme settings > Layout > Section spacing on mobile. Sections with a heading usually also have Heading tag (the level for search engines and screen readers, not the size) and Heading size.

Theme blocks. Most content sections take theme blocks (Heading, Text, Button and the others listed at the end of this page) and app blocks after their own content. Use them to add a line of text or a button to a section without code. In sections whose own items sit in a list, a table or on a timeline (Day timeline, Evidence, Feature columns, Formula comparison, Formula hero, Logo list, Routine builder, Specimen sheets, Trust row), these blocks go in the Blocks entry of the section: open it and add blocks inside. It has no settings of its own and shows nothing until it holds a block; add a Group inside it for a row or a box with its own color. The exceptions are listed under Sections that take no added blocks.

Empty states. Sections that need a product or collection show your store’s newest products, or sample rows, until you pick one, so a new page never shows an empty band.

Header and footer

Announcement bar

Short messages above the header. In the header group only.

• Blocks: Announcement (up to 4): Text, Link, Link label. The link label shows at the end of the message when the message has a link.
• Two or more messages take turns every 6 seconds, with a pause button. Rotation stops while a visitor hovers or focuses the bar, and visitors who reduce motion get previous and next buttons instead.
• Show country and language selectors: desktop only, when your store sells in more than one country or language.
• Tip: keep each message to one line on a laptop. Only promise what your store does.

Header

The bar (search, logo, account, cart) and the menu chips under it. In the header group only.

• Menu (default: main menu): top-level links become the chips. Links with sub-links open a menu panel with up to three levels; collections with a calyx.color metafield get a color dot. On phones every chip is a plain link, and the menu button opens the full menu.
• Customer account menu (default: customer account main menu): shown when customers open their account from the header. The account button shows when customer accounts are on in Settings > Customer accounts.
• Navigation: Menu chip alignment (Center or Left), Show collection color dots, Featured product in the menu (its key actives label sits next to the first menu with sub-links).
• Layout: Sticky header (Always, When scrolling up, Off; with Always, the chips tuck under the bar while visitors scroll down), Logo position on mobile (Center or Left), Country and language selectors (Off, Desktop only, Desktop and mobile menu).
• Colors: Color scheme, Menu and search color scheme (the menu panels, the mobile menu and the search panel).
• Tip: short top-level labels keep the chips on one row; about nine fit on a laptop screen.

Footer

The back of the label: a white label with your brand, menu columns and footnotes. In the footer group only.

• Brand (always first): Show logo (your theme logo, or the store name), Text.
• Blocks (up to 5 with Brand): Menu (Heading, Menu; an empty heading uses the menu’s name), Text (Heading, Text), Newsletter (Heading, Text, Button label).
• Follow: Show social media icons (links from Theme settings > Social media), Show Follow on Shop (Shopify shows the button when your store meets the Shop app requirements).
• Bottom row: Show country selector, Show language selector (each shows only when you sell in more than one country or language), Show payment icons (the methods enabled in your store), Show policy links.
• The label’s footnote shows Product disclaimer and Testing note from Theme settings > Claims.

Signature sections

Formula hero

The home page’s first section: one product’s photo on its color, its label stuck across the photo’s edge, a heading and two buttons.

• Product: gives the label, the color field, the photo and the price note. Without one, the newest product’s photo shows with sample label rows.
• Media: Image (replaces the product photo; 1600 x 1333px recommended), Mobile image (under 990px; 1200 x 900px, 4:3), Image shape (Landscape 6:5, Square, Portrait 4:5; phones show landscape and square at 4:3), Color field (replaces calyx.color), Image position on desktop.
• Label: Label rows (From the product, else formula row blocks; Formula row blocks only; No label), Label title, Label position (Across the image edge, Inside the image, Under the image), Rows shown (All, 3, 5), Show footnotes.
• Text: Heading (under 40 characters stays on two lines on phones), Heading tag (use H1 when this is the first section), Text, First button label and First button link, Second button label and Second button link (an empty link goes to the product), Show price per serving note (needs calyx.servings), Order on phones.
• Blocks: Formula row (Ingredient, Form, Species name, Plant part, Amount, % Daily Value, Why this amount, Study link) for a label you type in.
• Tips: labels with more than four rows move under the image; set Rows shown to 3 to keep the label on the edge, and the label then ends with a link to the full label.

Formula index

The whole catalog as one molded tray: one cell per product with its goal, time of day, photo on its color, formula line, price and price per serving.

• Products: From a collection or Pick products; Collection (newest products when none is picked), Products, Products shown (2 to 12).
• Heading: Heading, Text, Link label, Link (an empty link goes to the collection, or all products).
• Tray: Style (One tray with walls, Open cells), Columns on desktop, Columns on mobile, Image shape, Show goal and time of day, Show formula line, Show price per serving, Show quick add (follows Theme settings > Product cards > Quick add; adds a one-time purchase).
• Tip: the tray looks best with every product in the organizer palette.

Formula panel

One product’s full label beside your argument for it.

• Product (newest product when none), Label rows, Label title, Show why each amount (a + button on rows with a why text), Print the label as it scrolls into view (follows Theme settings > Animations; never on the first section of a page).
• Layout: Label position (Left, Right, Centered with blocks below), Show product image.
• Blocks: theme blocks (heading, text, buttons) for the argument column, Formula row blocks for a typed label.

Formula comparison

Formulas side by side in a table: goal, time of day, serving, key actives, price per serving and a shop button.

• Formulas: Pick products, From a collection, or This product and related products (product pages only; needs at least one related product). Products (your first products when fewer than two are picked), Collection (its first four products; on collection pages, leave it empty to compare the collection shown).
• Heading sits in the first cell of the table.
• Rows: Show goal, Show time of day, Show serving size, Show key actives with Key actives shown (3 or 5), Show price per serving, Show subscription price, Show rating, Show shop buttons, Use the first formula’s color for its column.
• Blocks: Comparison row (Row label, Product metafield key, Show as Text or Yes or no) for your own rows, like Vegan from calyx.vegan.
• The section hides itself when fewer than two products can be compared. On phones the first column stays in place while shoppers swipe the products.

Specimen sheets

Ingredients as herbarium sheets: one specimen on white paper with a pasted label.

• Heading, Text, Link label, Link; Sheets per row on desktop, Layout on mobile (Swipe sideways or One column), Label corner (Lower right or Lower left).
• Blocks: Specimen (Image: one specimen on white, 1200 x 960px; Species name, Common name, Plant part, Amount per serving, Found in up to three products, Note).
• Tip: photos of a single specimen on a white background work best; the sheet keeps a white margin around it.

Day timeline

When to take each product, on one axis of hours.

• Heading, Link label, Link; Day starts at, Day ends at, Show hours on the axis, Hour labels every (3 or 2 hours).
• Blocks: Dose (Time in 24-hour form like 21:30, Product for the name, link and dot color, Title to replace the name, Instruction up to 60 characters, Dot color).
• Doses closer than about two hours apart show as a list at every width, so their text never overlaps. Screens narrower than about 1100px also show the list.

Evidence

The studies behind your doses: year, the finding in plain words, authors, journal and one line with design, participants and duration.

• Studies: Study blocks, or the product’s calyx.evidence metafield (product pages only). Studies shown (2 to 12).
• Intro: Heading, Text, Link label, Link, Show product disclaimer (leave it off where the footer already shows the disclaimer).
• Blocks: Study (Year, Finding, Authors, Journal, Design, Participants, Duration, Study link).
• Tip: report what the study found; never promise an outcome.

Routine builder

Shoppers build a daily routine across times of day; the section adds and removes real cart lines and shows the cost per day.

• Blocks: Routine formula (Product, Time of day: from the product’s calyx.timing or a fixed slot, Note). Without blocks, your first four products show.
• Heading, Text; Summary: Show total cost per day (needs calyx.servings on each variant), Review button label (opens the cart drawer, or the cart page with the other cart types), Note (for an automatic discount you run, like “Three or more formulas save 10% at checkout”), Turn on subscription delivery by default (shows only when a product has a subscription plan; write subscription terms first).
• Tip: the note only describes a discount; create the discount itself in Discounts.

Goal finder

A short quiz that recommends a starting product, built from blocks.

• Heading, Text, Start button label, Result heading, Start over label, Questions open (In the page or In a dialog).
• Blocks: up to 5 Question blocks (Question, Help text), each with up to 5 Answer blocks (Answer, Recommends a product, Points 1 to 3, Reason shown on the result).
• The product with the most points wins; on a tie, the earliest question decides. A sold-out winner shows as sold out, with a link to its back-in-stock request on the product page and, when another answer scored, the next best product under “Also a good start”.

Product sections

Product information

The product page itself. See Product page.

Featured product

A product with its buy box anywhere on a page.

• Product (newest product when none), Media width, Media position, Image fit, Show link to product page.
• Blocks: the product blocks of Product page and app blocks. Default order: title, facts line, subheading, price, variant picker, purchase options, quantity, buy buttons.

Related products

Formula cards for products Shopify relates to the one on the page. Product template only.

• Heading, Show link to all products, Products shown (2 to 8), Columns on desktop.
• Shopify picks related products from sales and product descriptions. When it has none, your newest products show. You can set related products yourself in the Search and Discovery app.

Content sections

Rich text

Words with room. The content is theme blocks: add Heading, Text and Button blocks. Alignment (Start or Center), Width (Narrow 680px or Wide).

Image with text

An image beside your text. Image (1200 x 1500px, 4:5), Image shape, Color field behind the image (for images with transparent or white backgrounds), Image position on desktop, Text alignment (Top, Middle, Bottom). The text column is theme blocks.

Featured collection

A collection as product cards. Collection (newest products when none), Products shown (2 to 12), Heading, Text, View all link label (empty hides the link), Layout (Grid, or Rail with buttons), Columns on desktop.

Blog posts

The newest articles of a blog as cards (date, title, excerpt). Blog (without one: the blog of the page, else your News blog; on a blog post it leaves that post out), Articles shown (2 to 8), Heading, Blog link label (empty hides the link), cards: Show image (3:2, 1200 x 800px), Show date, Show author, Show excerpt; Layout (Grid, or Rail with buttons), Columns on desktop. A blog without articles shows sample cards until you publish one. On a blog post that is the only one in its blog, the section stays hidden on your store and the theme editor says why.

Collection list

Collections as square or portrait tiles painted with each collection’s calyx.color. Collections (your first four when none are picked), Heading, Layout (Grid, or Rail with buttons), Columns on desktop, Image shape, Show collection description.

Feature columns

Two to four short columns of text, separated by thin rules.

• Heading, Text, Columns on desktop, Show rules between columns.
• Blocks: Column (Image, optional, 1200 x 800px; Heading, Text, Link label, Link).

Newsletter

An email signup band. Signups are saved as customers with the tag newsletter and email marketing consent.

• Heading, Text, Button label, Success message, Small print (such as how often you send email), Layout (Text and form side by side, or Form under the text).

Video

One video. Video (an uploaded video) or YouTube or Vimeo link, Cover image (1600 x 900px), Play the uploaded video automatically (muted and looping, with a pause button; never for visitors who reduce motion), Heading, Caption, Video shape, Width.

FAQ

Questions that open one at a time.

• Heading, Text, Layout (Heading beside the questions, or Heading above the questions), Open the first question, Add FAQ data for search engines (use it on one FAQ section per page).
• Blocks: Question (Question, Answer).

Testimonials

Customer quotes, or a reviews app block.

• Heading with Show heading (hidden headings are still read by screen readers), Layout (First quote larger, or Rail; more than three quotes always show as a rail).
• Blocks: Quote (Quote, Name, Detail, Product), app blocks.
• Tip: quote real customers about your products, not about health outcomes. The product template includes an empty Testimonials section as a slot for a reviews app; it shows nothing until you add quotes or an app block.

Logo list

Press or stockist logos in a row. Heading (optional, like As featured in), Show logos in one color, Logo height. Blocks: Logo (Logo: SVG or PNG with transparency, at least 200px wide; Name, read by screen readers and shown as text until you add a logo; Link).

Before and after

Two photos compared with a slider, the arrow keys, or “Show before” and “Show after” buttons. Before image and After image (1200 x 1500px, the same framing), Before label, After label, Starting position, Image shape, Heading, Caption.

• Tip: use the caption to say who the photos show, after how long and what else changed.

Trust row

Short service facts, like shipping and returns, with payment icons.

• Heading (optional), Show payment icons.
• Blocks: Trust item (Icon, Title, Text, Link).
• Tip: list only what your store really offers.

Contact form

A contact form beside your contact details. On the contact page by default.

• Heading, Text, Show phone number field, Show order number field. Messages go to the sender email in Settings > Notifications.
• Blocks: Contact detail (Icon, Text), like your hours or address.

Page sections

These sections make up their page templates.

Advanced

Custom Liquid

Add app snippets or other Liquid code. Liquid code, Use the full screen width. Available on every template. A Custom Liquid block does the same inside other sections.

Blocks

An empty section for theme blocks and app blocks. Direction (Vertical, or Horizontal, which stacks under 750px), Alignment, Space between blocks, Width (Page, Narrow, Full screen).

Sections that take no added blocks

• Announcement bar, Header, Footer: fixed structure (their own blocks only).
• Goal finder: its blocks are the quiz.
• Collection, Search results, Cart, Blog posts list, Blog post, Collections list: app blocks only.
• Password page: none.

Dosewell also renders a few sections you never add yourself: the cart drawer, the cart popup, quick view, search suggestions, pickup availability, the comparison columns and the complementary products rows. Their settings are in Theme settings (Cart, Search, Product cards).

Theme blocks

Add these inside any section that takes theme blocks.

Product blocks (title, price, variant picker and the rest) belong in the Product information and Featured product sections; see Product page.