Theme settings
Open the theme editor (Online Store > Themes > Customize) and choose the gear icon,
Theme settings. Dosewell has 15 groups, listed here in the editor’s order. Settings that belong
to one section (the header, a product page block) are in Sections and blocks and
Product page.
The defaults below are the packaged defaults. The Dosewell style changes one of them; see
Presets.
Logo
| Setting | What it does |
|---|
| Logo | Your logo, at any aspect ratio. SVG or PNG with transparency works best. Without a logo, the header shows your store name as a text wordmark |
| Logo for dark color schemes | A light version of your logo. Dosewell uses it in the header when the header’s color scheme has a dark background |
| Desktop logo width | 60 to 320px, default 116px |
| Mobile logo width | 48 to 240px, default 96px |
| Favicon | The small icon in browser tabs. A 32 x 32px PNG is recommended |
Colors
Color schemes
Every section that paints a background has a Color scheme setting that picks one of these
schemes. The Dosewell style ships six (Scheme 1 to Scheme 6), described in Presets.
Each scheme has 16 colors:
| Color | Used for |
|---|
| Background | The section’s background |
| Text | Text, icons, the label rules in sections painted by the scheme, and the focus ring |
| Secondary text | Subheadings, captions, per-serving lines. Keep it at 4.5:1 contrast with Background and Raised surfaces |
| Dividers | Decorative lines, like the line under the header |
| Field and chip outlines | Outlines of inputs, selects, buttons for options, filter chips and the quantity selector. Keep it at 3:1 contrast with Background |
| Raised surfaces | Inputs, organizer cells, purchase options and drawers |
| Default product color field | The area behind a product photo when the product has no calyx.color |
| Primary button | Fill of primary buttons |
| Primary button text | Text on primary buttons |
| Secondary button outline | Outline of secondary buttons |
| Secondary button text | Text of secondary buttons |
| Accent | Highlights only: the cart count, subscription badges, text selection, timeline pins without a product color |
| Text on accent | Text on the accent color |
| Label background | The formula panel, the footer label, specimen labels, card badges, the round quick add button |
| Label text | Text and rules on the label |
| Sale | Sale badges, and sale prices when the Price block’s Use the sale color for sale prices is on |
Tip: Dosewell never relies on color alone. Sale prices also show a badge and a struck-through
original price, and sold-out options are struck through and named.
Product color fields
Product color fields chooses where the color behind each product photo comes from:
- Product color metafield (calyx.color) (default): each product’s own color. Products without
one use the scheme’s Default product color field.
- Color scheme field: every product uses the scheme’s Default product color field. Choose
this if your photos have busy or mid-grey backgrounds.
The eight-color palette Dosewell is designed around is in
Set up Dosewell in 15 minutes.
Typography
| Setting | What it does |
|---|
| Heading font | Default Chivo 800. Headings never use a weight the font does not have, so a font with one weight stays at that weight |
| Body font | Default Chivo 400. Bold and italic are loaded from the same family |
| Accent font | Default Alegreya italic. Used only for botanical species names, such as Prunus cerasus |
| Heading size | 80 to 130% of the design sizes |
| Body text size | 90 to 120% |
| Heading letter spacing | Tight, Normal or Loose |
| Heading case | Sentence case or Uppercase. Uppercase applies to the three largest heading sizes |
| Align numbers in prices and tables | Keeps digits the same width so amounts line up in columns. Chivo already does this; keep the setting on if you pick another font |
All fonts come from Shopify’s font library.
Layout
| Setting | What it does |
|---|
| Page width | Narrow (1200px), Standard (1360px) or Wide (1520px) |
| Side margin on desktop | 24 to 64px, default 48px |
| Side margin on mobile | 12 to 24px, default 16px |
| Space between grid items | 8 to 32px, default 24px |
| Section spacing on mobile | 40 to 100%, default 60%. Scales every section’s top and bottom padding on screens under 750px, so you set padding once per section |
Corners
| Setting | What it does |
|---|
| Product image corners | 0 to 32px, default 20px. The formula index tray’s outer corners follow this value plus 8px |
| Button corners | 0 to 40px, default 40px (fully round) |
| Field corners | 0 to 24px, default 12px |
| Badge and label corners | 0 to 12px, default 4px. Labels stop at 8px so they keep their printed look |
| Setting | What it does |
|---|
| Button size | Compact, Standard or Large. Add to cart on the product page is always large |
| Button text case | Sentence case or Uppercase |
Product cards
These settings apply to product cards everywhere: collections, search, featured collections,
related products. The formula index tray has its own settings in its section.
| Setting | What it does |
|---|
| Image shape | Square (1:1), Portrait (4:5), Tall (3:4) or Match image |
| Image fit | Fill crops the photo to the shape; Fit inside the color field shows the whole photo with the product color around it |
| Blend white image backgrounds into the color field | Makes a white photo background take the product color. Applies to products with a calyx.color that is light. Works best with photos shot on white. Off by default; on in the Dosewell style |
| Show second image on hover | Shows the product’s second image when a mouse is over the card |
| Zoom images on hover | A slight zoom on mouse hover |
| Show goal and time of day | The lid line above the image, from calyx.goal and calyx.timing |
| Show formula line | The short line under the title, from calyx.formula_line, else the product type |
| Show price per serving | From the variant’s calyx.servings |
| Show subscription price | Shows only when the product has a subscription plan |
| Show vendor | Off by default |
| Show product rating | Shows when a reviews app fills reviews.rating |
| Show color swatches | Swatch links for the first option that has swatches |
| Swatches before more | 3 to 8; more values show as “+N” |
| Quick add | Off, Round button on image or Button under price. Quick add always adds a one-time purchase of a product with one available variant. Products with several variants, gift cards and products that need a subscription open the quick view instead |
| Show dynamic checkout buttons in quick view | Shows Shopify’s accelerated checkout buttons in quick view |
Badges
| Setting | What it does |
|---|
| Badge position | Top left or Top right of the card image |
| Sale badge | “Sale”, “Save 15%” (percent off) or “Save $8” (amount off), from the compare-at price |
| Show sold out badge | On by default |
To show your own badge (“New”, “Vegan”), add a single line text metafield calyx.badge to the
product. A card shows at most two badges.
Product
| Setting | What it does |
|---|
| Swatch shape | Circle or Square |
| Swatch size | Standard or Large. The tap target is always 44px |
| Custom swatch colors | One per line, like Blood orange: #E8462F. Used when an option value has no swatch in Shopify, for example flavors |
| Show only the selected variant’s images | Hides the other variants’ images in the gallery |
| Image zoom | Open in a viewer (a full-screen viewer with keyboard support) or Off |
| Paint the product image area with the product color | The product page gallery takes the product color |
Subscriptions
| Setting | What it does |
|---|
| Preselected purchase option | Subscription or One-time purchase, for products with a subscription plan. Subscription is preselected only when Subscription terms below is written |
| Subscription terms | How customers skip, pause or cancel. Shown under the subscription option and in the cart. Keep it accurate to your subscription app. Nothing shows while it is empty |
Formula panel
| Setting | What it does |
|---|
| Metafield namespace | Default calyx. Change it only if your formula metafields use another namespace, such as custom |
| Formula panel title | Supplement Facts, Nutrition Facts, Key actives or Ingredients. With Supplement Facts or Nutrition Facts the panel has a % Daily Value column; with Key actives the amount column is titled “Concentration”. A product’s calyx.panel_title overrides it |
Cart
See Cart for how these work together.
| Setting | What it does |
|---|
| Cart type | Drawer, Page or Popup notification |
| Cart and quick view color scheme | The scheme of the cart drawer, the cart popup, quick view and the cart page summary |
| Group items by time of day | Groups cart lines under Morning, With food, Evening and Anytime from calyx.timing |
| Show cost per day | “Your daily formulas cost $2.24 a day.” |
| Offer subscription on one-time items | A “Switch” row on one-time lines whose product has a subscription plan |
| Show order note | An order note field |
| Show accelerated checkout buttons | Shopify’s accelerated checkout buttons under Check out |
Recommendations
| Setting | What it does |
|---|
| Show products that pair with the cart | The “Pairs with your cart” list |
| Recommendations heading | Default “Pairs with your cart” |
| Products to suggest | Up to four products, shown when Shopify has no complementary products for the cart |
| Collection to show when the cart is empty | The “Shop all formulas” button’s destination; all products when empty |
Search
| Setting | What it does |
|---|
| Show search suggestions | Suggestions as shoppers type: search terms, products, collections, pages and articles |
| Show prices in suggestions | Price and price per serving in product suggestions |
| Show vendor in suggestions | Off by default |
| Products in suggestions | 2 to 8, default 4 |
Links with an address show as icons in the footer; empty fields show nothing. Dosewell has fields
for Instagram, TikTok, YouTube, Facebook, Pinterest, X, Threads, Snapchat, LinkedIn and Spotify.
Enter full addresses, like https://instagram.com/yourstore.
| Setting | What it does |
|---|
| Show currency codes | Shows codes like USD on cart totals. Prices on cards stay short |
Animations
| Setting | What it does |
|---|
| Animations | Full, Reduced or Off. Visitors who ask their device for reduced motion always get reduced motion |
| Print formula panels as they scroll into view | The panel’s rules draw and its rows appear once, top to bottom, the first time it scrolls into view. Only with Animations set to Full, never on the first section of a page |
Claims
| Setting | What it does |
|---|
| Product disclaimer | Rich text. US supplement sellers usually add the FDA statement here. Leave it empty to hide it |
| Show disclaimer on | Product pages, Footer, or Product pages and footer. In the footer it is the footnote of the label. On product pages it prints under the Evidence block (and the Evidence section, when its Show product disclaimer is on), so it shows for products that have studies; see the FAQ for products without them. The cart page can print it too (Cart section, Show product disclaimer) |
| Footnote for ingredients without a Daily Value | Default ”† Daily Value not established.” |
| Testing note | A second footnote on the footer label, such as how you test each lot |
