Theme settings
Chapter 2 of the Derma user guide.
Open Theme settings (the gear icon) in the theme editor. Settings here apply to every page.
Colors
"Color palette" sets all twelve colours at once. Default: Clinic.
| Palette | Look | Suits |
|---|---|---|
| Clinic | Porcelain page, mineral grey bands, cobalt accent (#2a45c0) | Clinical skincare; the default |
| Petal | Rose-cream page, blush bands, deep berry accent (#992452) | Clean beauty and cosmetics |
| Tonic | Oat page, wheat bands, forest green accent (#1f5a3e) | Supplements and wellness |
| Nocturne | Aubergine-black page, champagne accent (#e6c99f) with dark button labels | Night care, luxury, evening brands |
Every palette is measured for WCAG AA contrast. Under the palette are twelve colour settings. Leave them empty to use the palette; a colour you set overrides the palette until you clear it.
| Setting | Used for |
|---|---|
| Page background | The page |
| Cards and drawers | Cards, drawers, menus and form fields |
| Alternate background | Alternate section bands, the footer and the default product image background |
| Headings | Headings, titles, prices, selected pills |
| Body text | Paragraphs |
| Secondary text | Ledes, benefits, labels |
| Small print | Footnotes, sizes, compare-at prices, unit prices |
| Control borders | Borders of fields, quantity selectors and option pills. Keep it at 3:1 contrast or more against the backgrounds. |
| Accent | Buttons, links in focus, label pills and the italic word in headings |
| Text on accent | Text and icons on accent fills |
| Sale and alerts | Sale badges and prices, low stock, errors |
| Success | In stock, matched skin profile chips, completed quiz steps |
If you override a colour, check its contrast. A custom accent needs 4.5:1 against "Text on accent" for button labels to stay readable.
Typography
Headings use the heading font at the weight you pick. Words in italics inside a heading (for example its working.) use the heading font's italic and the accent colour.
| Setting | Default | Notes |
|---|---|---|
| Heading font | Instrument Serif | Headings, product titles, big figures and the wordmark |
| Body font | Instrument Sans | Everything else, including prices on cards and ingredient lists |
| Base text size | 16px | 14 to 18px. Every size scales from it. |
Bloom starts with DM Serif Display and DM Sans; Daily with Figtree 600 for headings and Figtree 400 for body. Fonts come from Shopify's font library, so any font in the picker works. Derma has no monospace text: percentages, sizes and unit prices use the body font with even-width figures.
Layout
| Setting | Default | Options |
|---|---|---|
| Page width | Medium (1320px) | Narrow (1200px), Medium (1320px), Wide (1440px) |
| Page margin | 60px | 24 to 80px. Space at the sides on large screens; tablets use 32px and phones 16px. |
| Media shape | Arch | Arch, Dome, Rounded, Square. The shape of product images, the hero and image-with-text media. Buttons, badges and round images stay round. |
Navigation
| Setting | Default | Notes |
|---|---|---|
| Show back-to-top button | On | Appears after shoppers scroll down one screen |
| Position | Right | Left or Right. Mirrored for right-to-left languages. Pick the side opposite your chat button. |
Brand
| Setting | Default | Notes |
|---|---|---|
| Use a custom logo | Off | Uses the shop name when off |
| Logo | Image | |
| Logo width | 140px | 80 to 320px; shown when "Use a custom logo" is on |
| Tagline | Short line beside the logo, such as a department or location | |
| Favicon | 32 × 32px recommended |
Motion and effects
"Reveal sections on scroll" (on): section headings, product cards and results fade up gently as shoppers scroll. All motion respects the reduced motion setting in the visitor's operating system.
Commerce
| Setting | Default | Notes |
|---|---|---|
| Free shipping over | 0 | Your real free shipping threshold, in your store's currency. The bag meter, product page and header messages stay hidden until you set it, and show only to customers shopping in that currency. |
| Show currency code | Off | Prints the currency code beside every price |
| Low stock threshold | 5 | 1 to 20. Shows "Only 4 left" when a tracked variant has this many or fewer in stock. |
| Say "ships today" when in stock | Off | Adds "ships today" to the in-stock line on product pages. Turn on only if you dispatch the same day. |
Product cards
| Setting | Default | Notes |
|---|---|---|
| Image ratio | Portrait 4:5 | Portrait 4:5, Square 1:1, Tall 3:4 |
| Image fit | Fit | Fit shows the whole product on its tinted background, best for cut-outs and packshots on white. Fill crops the image to the card, best for model and texture photos. |
| Show formula line | On | From derma.formula, or the first two key actives and their strengths |
| Show benefit | On | From derma.benefit |
| Show size | On | From derma.size, or the Size option |
| Show rating | On | From the reviews.rating and reviews.rating_count metafields your reviews app sets |
| Show quick view button | Off | Opens media, options and buy buttons in a panel without leaving the page |
| Show quick add button | On | Products without options go straight to the cart. Products with options, a required subscription plan or a gift card recipient open quick view. |
| Show swatches | Off | Shows the values of the first option that has swatches, such as Color or Shade |
| Swatches before "+" count | 5 | 2 to 8; shown when swatches are on |
| Show second image on hover | Off | On devices with a mouse. Products with one image don't change. |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side. Hidden until a comparison page is chosen. |
| Comparison page | A page using the page.compare template (see chapter 4, Compare) |
Each card's image sits on a tinted well. The tint comes from the product's derma.tint colour metafield, or the "Alternate background" colour when it has none.
Skin and formula
Settings for the skin quiz, the skin profile, ingredient pages and the advice shown on product pages. Chapter 7 explains how they fit together.
| Setting | Default | Notes |
|---|---|---|
| Remember skin profile | On | Remembers a shopper's skin quiz answers on their device and shows them in the header and on product pages |
| Skin quiz page | A page using the page.skin-quiz template. "Take the skin quiz" and "Change" links go here. With no page chosen, those links are hidden. | |
| Ingredient glossary page | A page using the page.ingredients template | |
| Patch test advice | "Apply a little behind your ear or on your inner arm once a day for 48 hours. Stop if you get lasting redness, itching or swelling." | Shown in How to use when a product has no patch test advice of its own |
| SPF reminder | "Wear SPF 30 or higher during the day while you use this." | Shown on products whose derma.spf_reminder metafield is on |
| Supplement disclaimer | "Always read the label and follow the directions for use. Supplements should not replace a balanced diet." | Shown under the supplement facts panel. Use the wording your regulator requires, for example the FDA statement in the US or the TGA statement in Australia. |
Search
"Search suggestions" (default "Niacinamide, Retinal, Vitamin C, SPF, Breakouts"): separate with commas. Shown as chips under the search field.
Customer accounts
"Customer account menu" (default customer-account-main-menu): links in the header account panel. Leave empty to use the menu Shopify creates for customer accounts.
Social media
Paste full profile URLs for Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest and Threads. Only networks with a link show an icon, in the footer's Text column or Social media block.