Thème Dosage

Theme documentation · version 1.0.0

Dosage is a Shopify theme for skincare and beauty brands. It is built around one idea:
a claim is worth what its figure is worth. A dose, a duration, a shade code, a pH. The
sections exist so you can show the number next to the adjective.

This page covers installation, the theme settings, every section, the product data the
theme reads, the review apps it supports, frequent questions, and how to reach support.
Section and setting names are written exactly as they appear in the theme editor.

1. Install the theme

What you get on a new store

The theme installs in a neutral state: no demo images, no demo text, no link to a
product or page that exists only on the demo store.

• Header uses the menu with the handle main-menu. The two Footer link columns
  use the menus with the handles main-menu and footer. Both menus exist by default
  on every Shopify store (Content → Menus).
• Home page, twelve sections in this order: Hero, Reassurance bar, Featured
  collection, Collection list (“Shop by category”), Collection list (“Shop by
  concern”), Featured product, Actives in pictures, Step protocol, Featured before /
  after, Video strip, Pre-built bundle, Email signup. See “Fill the home page” below.
• Product page: most blocks and sections described in chapter 5 are already in
  place, including the Description block. In the default product template, the
  Custom Liquid block and the How to use section are added with Add block or
  Add section. The ones that read product data stay hidden on the storefront until
  the data exists, and show a short explanation in the theme editor instead.
• About page (template about): Page, Collection list, Featured collection, Step
  protocol, Customer reviews (manual), Reassurance bar, Email signup (chapter 7).
• The Email signup pop-up is installed but turned off.

An empty image slot shows one of Shopify’s placeholder illustrations on a neutral
background — a lifestyle scene in the Hero, the Slideshow, and the Video section, a
product on product cards, a collection on collection tiles, an image icon elsewhere —
so you can see what kind of image goes where.

Nothing in the theme is required. A section whose source is empty renders nothing on
the storefront: no empty container, no orphan heading, no reserved space. When a
section seems to have vanished, check what feeds it first.

Fill the home page

• Featured collection starts on your full catalog and shows its first four
  products. Pick your own collection in the section.
• Collection list (twice): each tile is a Collection block. Pick a collection
  in each block; the tile takes the collection’s name and image unless you set your
  own. A tile with no collection and no heading shows “Collection name” and links to
  your collections page.
• Featured product: pick a Product. Until then, the section shows placeholder
  content.
• Actives in pictures: four Active blocks. Fill in the image, name, dose, text,
  role, and link of each one, or remove the blocks you do not need.
• Step protocol: four Step blocks with a heading and one line of text.
• Featured before / after stays hidden on the storefront until it has a Before
  photo, an After photo, and a Duration.
• Video strip is installed without blocks and stays hidden on the storefront until
  you add Video or Photo blocks. The same is true of the Video strip on the
  product page, which reads the product’s own clips first.
• Pre-built bundle stays hidden on the storefront until you pick at least two
  Products in the bundle, or a Collection (fallback) with at least two products.

While they are empty, Featured before / after, Video strip, and Pre-built bundle each
show a short notice in the theme editor that says what they need. Your customers never
see the notice or any sample data. The Editorial block and Multicolumn sections
are not on the home page by default; add them with Add section.

First steps

1. Logo and favicon. Theme settings → Logo. Without a logo image the header shows
   Brand name (text logo), or your store name if that field is empty.
2. Colors and fonts. Theme settings → Colors and Typography. See chapter 2.
3. Menus. Edit main-menu and footer in Content → Menus. The header supports
   three levels of links, on desktop and on mobile.
4. Home page. Open each section in the theme editor and replace the placeholder
   content.
5. Product data. Create the metafield and metaobject definitions you need
   (chapter 8). Without them you have a complete store with title, price, variants,
   and description. With them you get the spec sheet, actives, reviews, before / after,
   and the rest.
6. Pages. Create the pages you want and assign their templates (chapter 7):
   contact, about, ingredient glossary, skin quiz.

2. Theme settings

Theme editor → Theme settings. Nine groups.

Logo

Brand name (text logo), Logo, Logo width, Share image (used when a page
is shared on social media and has no image of its own), Favicon.

Colors

Seven base colors — Page background, Text, Neutral background (blocks,
dividers), Secondary background, Rules and dividers, Accent (buttons, action
links), Text on the accent — then the colors for Inverted sections, the two
caption colors, Alert (stock-outs only), and Technical text (INCI, metadata).

Check contrast in the editor is on by default. While you edit colors, the theme
editor shows a warning when a text and background pair falls below WCAG AA (4.5:1). The
check covers the text, caption, accent, alert, and technical text colors on the three
light backgrounds (page, secondary, and neutral), the buttons and their hover state, and
the colors of inverted sections. It has no effect on the published storefront, and you
can turn it off.

In an inverted section, error messages and the “Sold out” badge take the inverted text
color instead of the alert color, which is tuned for light backgrounds.

Typography

Headings, Body text, and Monospace font are font pickers from the Shopify
font library. No font is bundled with the theme and no request is sent to a third-party
font service. Body text size, Heading size, Heading letter-spacing,
Heading line-height, and Heading size ratio set the scale; every heading level
follows from them.

Technical text font chooses what the data (doses, shade codes, INCI, cost per use)
is set in: Selected font (the monospace picker), System monospace (no font file
to download), or Same as body text.

Layout

Maximum width, Spacing density, Corner radius, Button height (Compact,
Normal, Large), the Side margin range, and the three Section spacing values
(small, medium, large). Sections never ask for a pixel value: their Space above and
Space below settings pick from this scale.

Animations

Reveal editorial sections on scroll. Honors the visitor’s reduced-motion
preference. The reveal is turned off inside the theme editor so that sections never
appear blank while you work.

Product cards

Quick add. With Enable quick add on, a product card with a single variant gets
an Add button that adds it to the cart without leaving the page. A product with
options, a gift card, or a product that can only be bought as a subscription gets a
Choose options link to its product page instead. A sold-out product gets neither.

Cart

Cart type (Drawer or Page), Allow an order note, Show the free shipping bar,
and Free shipping threshold. Enter the threshold in your store currency. The bar
shows only to customers who pay in that currency, because a theme cannot convert a
shipping rule.

Social media

Ten links: Instagram, TikTok, Facebook, YouTube, Pinterest, X, Threads, Snapchat,
LinkedIn, Vimeo. Each filled link adds an icon to the footer.

Search engine optimization

Default meta description, three structured data switches (Product and rating
markup, Breadcrumb markup, Organization markup), and Glossary page,
the page that ingredient pages link back to (chapter 7). The product markup carries a
rating only when a review app writes Shopify’s standard review metafields (chapter 10).

3. Styles

Version 1.0 ships one style, Dosage: white page, near-black text, deep green
accent #1E3A2B, Inter for headings and body, IBM Plex Mono for data.

A style is a set of theme settings — colors, fonts, spacing, button height. It never
changes which sections sit on a page. You can change every one of those settings
yourself.

4. Sections for the home page and any page

Every section below can be added from Add section on any JSON template.

Where to find a section in Add section

The Add section picker groups the theme’s sections by category.

Actives in pictures, Video strip, and Customer reviews (manual) are listed under
Product page but work on any page. The other sections of that category, and Product
recommendations, can only be added to a product template (chapter 5).

Two settings you will meet everywhere

Color scheme — Normal or Inverted. Inverted swaps the color roles locally: the
background becomes your inverted background, text turns light, captions take the
inverted caption color. Everything inside follows.

Spacing — Space above, Space below (None, Small, Medium, Large) and Divider line
above. The values come from Theme settings → Layout.

Most sections also start with a Caption (the small line above the heading) and a
Heading.

Images and formatted text

Focal point and alt text are set on the image itself, in Content → Files or from
the image picker. Wherever the theme crops an image to a fixed shape — Hero, Slideshow,
product cards, collection tiles, columns, the Customer gallery, the cover images of the
Video strip, and review photos — the crop follows the focal point.

Formatted text. Headings (levels 1 to 6), quotes, lists, tables, and images typed in
a rich text editor look the same in product descriptions, collection descriptions,
pages, blog posts, ingredient pages, and the rich text fields of sections. Headings
typed inside a text are deliberately smaller than section headings: a level 2 heading
is 26 px at the default Heading size.

Hero

Two layouts: Text left, image right or Text over the image. Caption, heading,
text, and a primary and a secondary button. There is no separate crop setting: the
image follows its focal point, and its alt text comes from the image. Without alt text,
the section heading is used.

Spec card. Pick a Source product and the hero shows that product’s spec sheet
(chapter 8) as a card. Leave it empty to hide the card.

Slideshow

Up to six Slide blocks (image, caption, heading, subheading, button). Slide
height, Heading size, and optional Auto-rotate slides with a pause button.
Fill Slideshow description so screen readers announce what the slideshow is.

Rich text

Blocks: Caption, Heading, Paragraph, Button. Alignment Left or
Centered.

Editorial block and Image with text

One section, two entries in Add section. Image on the left or right, ratio 4:5,
1:1, or 16:9. Blocks: Caption, Heading, Paragraph, Steps (up to five
short steps), Data table (up to four label and value rows), Button.

Multicolumn

Up to twelve Column blocks with an image or an icon, a heading, text, and a link.
Columns on large screens, Columns on mobile, Text alignment, Media type
(Image, Icon, None).

Reassurance bar

Up to four Claim blocks: icon, heading, one line of proof. Style is Text or
Figures; Figures puts the number first and the label under it (“70 evenings”,
“24 shades”). Optional Note under the bar.

Featured collection

A collection, a Number of products, and Columns.

Featured product

A full buying block for one product, on any page: gallery, price, variant picker or
shade swatches, quantity, buy buttons, and accelerated checkout. Blocks: Title,
Stars and review count, Hook sentence, Price, Benefits list, Attribute
icons, Shade swatches, Variant picker, Buy buttons, Reassurance line,
Description, Custom Liquid, and app blocks. Benefits, attribute icons, and the
reassurance line work exactly as on the product page (chapter 5). On desktop the image
and the buying column are centered on each other, so neither side leaves a gap: keep
the Description block for products with few benefits, and drop it when the list
already fills the column.

The product name is a link to the product page. Changing the variant here does not
change the page address. With no product selected, the section shows placeholder
content.

Collection list

One Collection block per tile: collection, optional heading, short text, image, and
link. Show the shade ribbon adds a strip of color dots read from the collection
metafield custom.shades (chapter 8). A tile with no collection and no heading shows
“Collection name” until you fill it in.

Actives panel

A technical table of actives: name, dose, function, pH. It reads, in this order:

1. on a product page, the product’s actives (custom.actives);
2. otherwise the Active blocks you add to the section (name, dose, function, pH,
   link);
3. otherwise every entry of the Active ingredient metaobject, up to Number of
   rows.

Actives in pictures

Cards with a photo, a dose, a short text, and a role. On a product page it reads the
product’s formula (custom.formula, then custom.actives). Anywhere else, or when the
product has none, it shows the Active blocks you add, up to eight (image, name,
dose, text, role, link). A 1:1 aspect ratio is recommended for the images.

Step protocol

Up to six Step blocks: a heading and one line of text. Number the steps turns
the numbering on or off, and Step sets the word shown before the number.

Featured before / after

One pair with a comparison slider that works with the keyboard. On a product page it
shows the product’s first complete pair (custom.before_after). Anywhere else it uses
the section’s own settings: Before photo, After photo, Duration, and
Description. Duration is required: a pair without a duration is not displayed.
Legal note adds a line under the pair.

Customer gallery

Up to 24 Photo blocks: photo, caption, author, skin type, product shown. Visitors
can filter by skin type, and a photo with a product links to it. A 1:1 aspect ratio is
recommended for the photos.

Video strip

Vertical clips in a row. On a product page it reads the product’s customer videos
(custom.customer_videos). Anywhere else, or when the product has none, it shows the
Video and Photo blocks you add, up to twelve. A 9:16 aspect ratio is recommended
for clips and photos. Give each video a Cover image (without one, the first frame
of the video is used) and a Description, which is what screen readers announce.
Autoplay never starts for a visitor who asked for reduced motion or data saving, and
every clip has a visible pause button.

Customer reviews (manual)

This section displays reviews that you enter yourself. The theme does not collect,
import, or verify reviews. To collect reviews from your customers, install a review app
and add its app block to the product page or to an App slot section (chapter 10).

On a product page, the section shows that product’s reviews (custom.reviews) with
filters for skin type, age range, and concern, and nothing else. On any other page it
shows the Review blocks you add, up to 24 (rating, review, author, Verified
purchase mention, customer photo, filters, shade code, date). Blocks are never used on
a product page, so one product’s reviews can never appear under another product. A
filter appears once two different values exist.

Verified purchase mention shows “Purchase verified by the store” on the review. The
theme cannot check orders: you vouch for this mention yourself. Select it only when you
can match the review to an order.

Link to your review form adds a button under the reviews that leads to the page
where your review app collects reviews. The theme has no review form of its own. Leave
the setting empty and no button is shown.

Comparison

Pick two or three Products compared. The table reads each product’s actives, stated
concentration, texture, pH, skin types, and when to use (chapter 8). An empty field
shows a dash.

Pre-built bundle

Products in the bundle (or a Collection (fallback)) and an optional Bundle
product. With fewer than two products, the section stays hidden. The crossed-out total is the real sum of the individual prices. The bundle
price is the price of your bundle product; the theme never computes a discount. Without
a bundle product, the button adds each product at its normal price.

Skin quiz

Up to six Question blocks, each with up to four answers and an answer tag. At
the end, the quiz recommends products from Collection used for recommendations
whose product tags, custom.skin_types, or custom.concerns match the tags of the
chosen answers. Weight lets one question count more than another.

Save answers with the order is off by default. When on, the answers are added to
the cart attributes (they appear on the order) and to the customer tags at email
signup, and the visitor is told so under the result. Read chapter 13 before turning it
on. Offer email signup at the end shows Shopify’s standard customer signup form.

Show the result screen in the editor, under the Result screen header, previews
the result screen with sample products while you edit its headings and signup block. It
only applies in the theme editor: visitors always start at the first question. Select a
Question block to bring the questions back.

On a page, the quiz also shows the content you typed in the page, under the heading.

Ingredient glossary

Lists every entry of the Active ingredient metaobject with its function and a link
to its own page. On a page, it also shows the content you typed in the page, under the
heading. See chapters 7 and 8.

Article list

Latest articles from a Blog. Reading time is calculated from the article.

Collapsible content

Up to twenty Collapsible row blocks (heading and rich text). Open the first row
is rendered by the server. This is the way to build an FAQ by hand on any page. The
product FAQ section reads product data instead (chapter 5).

Video

A Shopify-hosted video or a YouTube or Vimeo URL, with a Cover image and Alt
text. An external video loads only after the visitor presses play: nothing is
requested from YouTube or Vimeo before that (chapter 13). Aspect ratio 16:9, 1:1,
4:5, or 9:16; Width page or full.

Email signup

A signup band with Layout Centered or Inline, a heading, a button label, and a
Legal note. It uses Shopify’s customer form: subscribers appear in Customers.

Contact form

Available on page templates. Subjects (one per line) fills the subject menu;
Information row blocks add lines such as an address or opening hours; Privacy
note adds a line under the form. The content you typed in the page shows under the
heading. The contact template ships with four example rows (Email, Response time,
Orders, Address): replace their text or remove them.

App slot

A full-width section made for app blocks, with an optional heading. It also accepts a
Custom Liquid block. With no block, it renders nothing at all.

Custom Liquid

A section for a snippet of Liquid or HTML. Read chapter 14 first.

5. The product page

Blocks of the Product page section

Blocks order freely in the buying column. Most can be added once. Both product
templates ship with the Description block under Short reassurance; move it or
remove it as you like.

Price. Show the tax note is on by default. The note follows your store
settings: “Taxes included.” appears only when your store prices include taxes, and the
link to your shipping policy only when that policy exists. With neither, no note is
shown. The unit price (“$1.20 / ml”) appears wherever a price does — product page,
cards, cart, and orders — when the variant has a unit price in Shopify.

Quantity tiers has two modes, chosen in Mode.

• Bundle variants (recommended): you create one variant per bundle (for example 1,
  2, and 3 bottles) with its own price, and the block shows your real prices as tiers.
  Name the product option Pack, Bundle, Quantity, Set, Format, or
  Lot, and put the number of units in each value (1 bottle, 2 bottles): the
  block reads that number to calculate the unit price. An option whose values look
  like a size (30 ml, 50 g) is never treated as a bundle.
  When a variant has a compare-at price, the block shows a badge; Badge text (bundle
  variants) sets its wording, and [percentage] is replaced by the number calculated
  from the variant’s price and compare-at price. Show unit price (bundle variants)
  adds the price per unit.
• Quantity with your own discounts: enter the quantities in Quantity tiers,
  comma separated (example 1,2,3). The block only changes the quantity added to the
  cart and shows the real price of each quantity: the variant price multiplied by the
  quantity. It shows no badge, no percentage, and no savings, because a theme cannot
  create, read, or apply a discount. It always shows the line “Any quantity discount is
  calculated at cart. The cart shows your final price.” If you run automatic quantity
  discounts (Discounts in your Shopify admin), customers see the discounted total in
  the cart and at checkout. To show savings on the product page, use Bundle
  variants.

Highlighted tier pins a label on the first, second, or third tier; Highlight
label sets its text (“Recommended” by default).

Subscription stays hidden until the product has a selling plan, created with
Shopify Subscriptions or any app that uses Shopify’s selling plans. With
custom.days_of_use filled, the block estimates the date the product runs out.
Cancellation note is empty by default and shows nothing until you fill it in. State
only what your subscription policy really allows, for example how to pause or cancel.

Accordion. Content picks the source: Actives and full ingredient list
(custom.formula, custom.actives, custom.inci), How to use
(custom.how_to_use), Information rows (four label and value pairs typed in the
block), or Free text.

Gift cards. A gift card product shows Shopify’s recipient fields (recipient email,
name, message, send date) in the buy buttons. The gift card page the customer receives
shows the balance, the code with a copy button, a 140 px QR code, an Add to Apple
Wallet button, the expiry date when there is one, and a print button.

Product sections

These sections sit under the buying column. Most are in the default product template
(How to use ships in the editorial product template, where it replaces the How to
use row of the buying column), and all of them can be added to any product template.
Each one is hidden on the storefront while its source is empty. The default template
orders them to sell: proof first (Actives in pictures, Before / after,
Week by week, Video strip), then the Matching routine, then the reference
sections (INCI composition, FAQ), then Customer reviews and recommendations.
The stars under the product title jump straight to the reviews. You
can reorder them freely. On desktop every section uses the full page width: INCI and
FAQ put their heading on the left and their content on the right, and reviews keep the
score and filters in a column that follows the scroll.

The Editorial product template

A second product template, editorial, opens with the Video strip and Before / after,
ahead of the Matching routine, and leaves Bought together, the accordions, and Mini reviews out of the buying
column. It keeps the Description block, adds the How to use section, and ships
without Actives in pictures and Week by week, which you can add. Assign it per product
in the product’s Theme template field.

6. Collections, search, cart, header, and footer

Collection grid. Caption, description, collection image, Show filters, Keep
the filter bar visible on scroll, Columns, Products per page, and an optional
Editorial band (after the grid). Filters and sorting use Shopify’s storefront
filtering: availability, price, product type, vendor, variant options, and any
metafield filter you add in the Search & Discovery app. Filtering updates the grid
without reloading the page.

Collections page. Lists your collections; Hide the home page collection keeps
Shopify’s default “Home page” collection out of the list.

Search. Same filters as collections. Suggested searches shows a few terms
before the visitor types. Predictive search in the header suggests products,
collections, and articles.

Cart. Drawer or page (Theme settings → Cart). Both show variant options, unit
price, selling plan, line properties, line and order discounts, the tax note, and
accelerated checkout. The cart page accepts app blocks and Custom Liquid blocks.
The Cart drawer section has a Suggested product and three reassurance lines.
Selecting Cart drawer in the theme editor opens the drawer so you can see your
changes.

Announcement bar. Up to three Message blocks that rotate; Time per
announcement sets the pace, and the rotation can be paused.

Header. Keep the header visible on scroll, Menu, and a Menu highlight:
a Featured product shown inside the menu panel with its own Column heading.
The header includes search, the customer account link, the cart, and country and
language selectors when your store has more than one. The country selector lists each
country by name, followed by its currency.

Footer. Blocks: Link column, Text column, Email signup. Show payment
methods shows the icons of the payment methods enabled on your store. Show store
policy links lists the policies you filled in Settings → Policies. Social icons
come from Theme settings → Social media.

Email signup pop-up. In the footer group. Enable pop-up is off by default.
Trigger: Exit intent, Scroll (Scroll depth), or Delay (Delay before
showing). Do not show again for sets the number of days before it can reopen. The
pop-up never opens on product and cart pages, and never for a logged-in customer.
Selecting the section in the theme editor
opens it, enabled or not, so you can write your text before you turn it on.

Blog posts and Article. The blog can show the latest piece as a feature. Under
an article, the “Products mentioned” block (its Heading is a setting) first shows
the products listed in the article metafield custom.related_products, up to six. An
article without that metafield shows the first three products of the Fallback
collection chosen in the Article section. With no metafield and no fallback
collection, the block is hidden. An article can also show a spec card for one
ingredient (article metafield custom.active, chapter 8).

Page not found. Add Link blocks to send visitors somewhere useful.

Password page. Shows your store message, a signup form, and the password form.

7. Page templates

Create a page in Online Store → Pages, then choose its Theme template.

The contact, glossary, and quiz templates show the page title (or the
section’s own heading when you set one), then the content you typed in the page, then
the rest of their section.

On the about template, Customer reviews (manual) ships without any Review
block: it shows a notice in the theme editor and nothing on the storefront until you
add reviews you really received. The Collection list tiles and the Featured
collection fill in the same way as on the home page (chapter 1).

Ingredient pages. Each entry of the Active ingredient metaobject gets its own
page when the definition has the Web pages option turned on (chapter 8). The page
shows the ingredient’s description, a spec card, and the products that contain it. In
the template’s Ingredient page section, Collection to scan sets where those
products are looked up. Set Theme settings → Search engine optimization → Glossary
page to the page that uses the glossary template, so ingredient pages link back to
it.

8. Product data: metafields and metaobjects

All of it is optional. Each missing field removes exactly one element and nothing else
moves. The theme reads these fields; it never creates them. Create only the ones you
plan to use.

How to create the definitions

Metaobject definitions — Settings → Custom data → Metaobjects → Add definition.

1. Enter the Name, then open the Type field and enter the type exactly as
   written below (for example active_ingredient). The type cannot be changed later.
2. Add each field with Add field: choose the content type, enter the name, then
   edit the Key so it matches the key below exactly.
3. Under Options, turn on Storefronts access. Without it, the theme cannot
   read the entries. Turn on Translations as well: it lets the Translate & Adapt
   app translate your entries when you sell in more than one language, and changes
   nothing otherwise.
4. For Active ingredient only, also turn on Web pages, and choose the theme’s
   metaobject template when Shopify asks for one.
5. Save. Create the definitions in the order below: some reference others.

Metafield definitions — Settings → Custom data → Products (or Variants,
Collections, Blog posts) → Add definition. Enter the name, set Namespace and
key exactly as written below (for example custom.hook), choose the content type,
and keep Storefronts access on.

Entries. Create metaobject entries in Content → Metaobjects. An entry saved as
Draft never appears on the storefront: set it to Active.

Keys are in English and final: they will not change in later versions.

Metaobject definitions

1. Active ingredient — type active_ingredient

A documented ingredient. Feeds the spec sheet, the Actives panel, the Ingredient
glossary, and its own page. Turn on Web pages.

2. Product active — type product_active

Links one ingredient to its real dose in one product. This is the single source for a
product’s formula: the spec sheet, Actives in pictures, and the composition accordion
all read it.

3. Product attribute — type product_attribute

One reassurance icon card. Feeds the Reassurance icons block.

Icon identifiers for beauty products: nickel-free, latex-free, paraben-free, fragrance-free,
silicone-free, alcohol-free, sulfate-free, essential-oil-free, vegan,
natural, organic, hypoallergenic, non-comedogenic, skin-ph, sensitive-skin,
reusable, refillable, recyclable, lightweight, long-wear, light-texture,
fast-absorbing, long-lasting, waterproof, spf, dermatologically-tested,
clinically-proven, ophthalmologist-tested, verified-reviews, made-in-france,
made-in-eu, pregnancy-safe, cruelty-free, free-shipping, free-returns,
money-back, secure-payment, human-support, fast-shipping,
discreet-packaging. An unknown identifier shows the card without an icon.

4. Product review — type customer_review

A review you enter yourself. Feeds Customer reviews (manual), Mini reviews, and
the star rating shown on the page when no review app provides one. These reviews are
never added to the structured data for search engines (chapter 10).

Only publish reviews you really received. The theme cannot check orders: you vouch for
the “Purchase verified by the store” mention yourself, so set verified_purchase to
true only when you can match the review to an order.

5. Before and after — type before_after

6. Customer video — type customer_video

7. Product FAQ — type product_faq

8. Result step — type result_step

One milestone of the Week by week section.

Product metafields

Namespace and key, content type, and where the value appears.

Write numbers the way your customers read them. In English: 1.5%, pH 5.5, 30 ml.
The theme keeps a number and its unit on the same line.

Variant metafields

For shade ranges (chapter 9). Settings → Custom data → Variants.

Collection metafield

Blog post metafields

Settings → Custom data → Blog posts.

A sensible order to fill things in

1. custom.hook and custom.benefits on your best sellers.
2. Your Active ingredient entries, then one Product active per ingredient and
   product, then custom.formula. Three places are right at once.
3. custom.inci, custom.how_to_use, custom.days_of_use.
4. Reviews, FAQ, before / after, videos, as you collect them.

9. Selling a shade range

Any option with Shopify swatches is shown as swatches. When at least one value of
an option carries a native Shopify swatch (a color or an image), the Variant picker
shows that option as round swatches, whatever the option is called: Finish, Material,
or a name in any language.

The option name only matters for the fallbacks. A product option whose name
contains Shade or Color is treated as a shade option (also recognized: the
British spelling of Color, and the French Teinte and Couleur). For a shade
option, a value without a Shopify swatch falls back to the variant metafield
custom.shade_hex, then to the variant image.

Two blocks can display a shade option:

• Variant picker with Show option swatches on (the default): round swatches,
  using the Shopify swatch of the option value (color or image) first, then
  custom.shade_hex, then the variant image. Turn Show option swatches off to show
  every option as plain buttons.
• Shade swatches: the grouped selector, for ranges with many shades.

With two or more undertones filled in (custom.shade_undertone), the grouped selector
shows the current shade, then one group per undertone, one row per shade: dot, code,
name. One group is open at a time, starting with the group of the selected shade.
Shades sort by custom.shade_depth.

It degrades in steps, each on its own:

• fewer than two undertones: one plain list, no group headings;
• a shade with no undertone: it follows the groups, rather than disappearing;
• an undertone other than cool, neutral, warm, or olive: shown as you typed it.

A sold-out shade stays selectable and is marked “Sold out”; the buy button is what
closes. The selected shade is carried to the cart.

Both blocks have a Link to the quiz and a Link label (“Find my shade”).

Name your shades so they travel alone. In the cart, the order confirmation, and the
packing slip, your customer sees the variant name with no group around it. “Porcelain
Neutral” survives that trip. “Porcelain N” does not.

10. Reviews and supported apps

The theme works without any app.

What the theme does with reviews

The theme displays reviews; it does not collect, import, or verify them. Customer
reviews (manual) and Mini reviews show the Product review entries you enter
yourself in custom.reviews (chapter 8), or the Review blocks you add on a page
other than a product page. To collect reviews from your customers, use a review app
and add its app block (see below). “Purchase verified by the store” is a mention you
vouch for yourself.

Star ratings

Stars on cards and product pages come from the first source that has a value:

1. Shopify’s standard product review metafields, reviews.rating and
   reviews.rating_count. Any review app that writes these standard metafields works;
   Judge.me does.
2. The rating metafields written by Yotpo (yotpo.reviews_average,
   yotpo.reviews_count) or Loox (loox.avg_rating, loox.num_reviews).
3. Your own Product review entries in custom.reviews: the average is calculated
   from them. An entry without a rating is left out of the average and of the count.

The standard reviews.rating metafields are the dependable path. App-specific
metafields belong to their apps and can change without notice.

Structured data for search engines

The rating in the product structured data (JSON-LD) reads only reviews.rating and
reviews.rating_count, the standard metafields that review apps write. Reviews you
enter yourself are shown on the page and are never added to the structured data:
neither their average nor the individual reviews. App-specific metafields feed the
stars on the page, not the structured data: review apps publish their own. Without a
value in reviews.rating, the product markup carries no rating at all.

Review widgets and other apps

A review app’s own widget is an app block. App blocks can be added to the Product
page section, the Featured product section, the Cart page, and the App
slot section on any page.

Shopify features the theme displays

What needs no app

Quantity tiers, Bought together, Matching routine, Pre-built bundle, product
recommendations, the Skin quiz, Comparison, the spec sheet, the Ingredient glossary,
before / after, FAQ, reviews you enter yourself, unit pricing, multiple currencies, and
email signup.

11. Languages and markets

The theme’s own text ships in English and French. Text you type in the theme
editor and your product data can be translated with Translate & Adapt or any
translation app. Turn on Translations on a metaobject definition to translate its
entries.

Country and language selectors appear in the header and footer when your store has
more than one. Prices, unit prices, and the tax note follow the customer’s market.

The rule that puts a space before % and currency symbols (French: 10 %; English:
10%) travels with the translation, in the theme’s language files under General →
Typography.

Right-to-left layouts are not supported in version 1.0. Right-to-left text
displays, but the layout stays left to right.

12. Accessibility

In the Dosage style, every text and background pair the theme uses measures at least
4.5:1, the WCAG AA minimum. The lowest pair, the alert color on the neutral background,
measures 4.8:1; body text on the page background measures 18.8:1. Form field borders
clear the 3:1 required of interface components.

If you change the colors, keep Check contrast in the editor on, and keep
Technical text above 4.5:1 on both your page background and your secondary
background.

Every interactive element works with the keyboard and shows a visible focus. Drawers
and the pop-up keep focus inside while open, close with Escape, and return focus to the
control that opened them. Accordions announce their state. Videos never autoplay for
visitors who ask for reduced motion, and every moving element has a pause control.
Reading text is at least 16 px on mobile.

You are responsible for the content you add: alt text on images, descriptions on
videos, and the contrast of colors you choose.

13. Privacy and consent

• Email signup, Email signup pop-up, footer signup, quiz signup, contact form, and
  password page use Shopify’s own forms. Subscribers and messages go to your Shopify
  admin. Each signup has a Legal note setting for your consent wording. Double
  opt-in is a Shopify setting: Settings → Customer privacy.
• Tags. Signup forms add tags such as newsletter to the customer. Tags are for
  segmentation only; the theme never uses them to grant a discount or an advantage.
• Skin quiz. Nothing is stored unless you turn on Save answers with the order.
  When on, answers are saved to the cart attributes and the customer tags, and the
  visitor is told. Skin type is personal data: describe this processing in your
  privacy policy first.
• Browser storage. The pop-up stores one entry in the visitor’s browser
  (theme-capture-…, a date) to remember not to reopen: for the number of days you
  set, or 365 days after a signup. It holds no personal data. The theme sets no cookie
  of its own.
• Third-party content. The only third-party content is a YouTube or Vimeo video
  that you add yourself, in the Video section or in a product’s media. In both
  places the player loads only after the visitor presses play, through
  youtube-nocookie.com or player.vimeo.com with dnt=1. No request goes to
  YouTube or Vimeo before that click.
• Cookie banner. The theme works with Shopify’s customer privacy banner
  (Settings → Customer privacy).

14. Editing code

You never need to edit code to use the theme. If you do:

• Duplicate your theme first (Online Store → Themes → … → Duplicate) and work on
  the copy.
• The Custom Liquid section and blocks are the safest place for small additions,
  because they survive theme updates.
• Code changes and custom code are not covered by theme support, and edited files are
  not updated automatically when a new version is released. For custom development,
  hire a Shopify Partner: https://www.shopify.com/partners/directory

15. FAQ

A section I added shows nothing on my storefront.
Its source is empty. Sections that read product data render nothing until the data
exists, and explain what they need in the theme editor. Check the metafield, the
metaobject entries (Active, not Draft), and Storefronts access on the definitions.

I created the metafields but nothing appears.
Check the namespace and key, letter for letter (custom.formula, not
custom.formulas), the content type, and Storefronts access. Products and
collections created through an app or the API must also be published to the Online
Store sales channel.

How do I get stars without a review app?
Create the Product review definition, add the reviews you received as entries, and
attach them to the product in custom.reviews. The average is calculated for you and
shown as stars on the page. These stars are not sent to search engines: the structured
data only reads the rating a review app writes. When you install a review app later,
its rating takes over (chapter 10).

Does the theme collect reviews?
No. Customer reviews (manual) displays reviews you enter yourself. To collect
reviews from customers, install a review app and add its app block to the product page
or to an App slot section.

How do I add filters for skin type, concern, or undertone?
Install Shopify’s Search & Discovery app, open Filters, and add the product
metafield or variant option as a filter source. The theme displays whatever filters
Shopify returns.

The Subscription block does not show.
The product has no selling plan yet. Create one with Shopify Subscriptions or your
subscription app.

Can I show a discounted price for a quantity?
Use Quantity tiers in Bundle variants mode: each bundle is a real variant with
a real price. In Quantity with your own discounts mode the theme shows the real
price of each quantity, no badge and no percentage, and the line “Any quantity discount
is calculated at cart. The cart shows your final price.”, because only the cart knows
your discounts.

How do I build an FAQ page?
Add the Collapsible content section to a page. For per-product questions, use the
Product FAQ metaobject and the FAQ section.

Where is the pop-up? I enabled nothing and I see it in the editor.
Selecting Email signup pop-up in the theme editor opens it so you can edit it. It
appears on the storefront only after you check Enable pop-up, never on product or
cart pages, and never for a logged-in customer.

Can I use my own fonts?
The font pickers list the Shopify font library. Custom font files are a code change
(chapter 14).

Does the theme support right-to-left languages?
Not in version 1.0. See chapter 11.

How do I update the theme?
Updates arrive in Online Store → Themes. Shopify carries your settings over to the
new version. Code edits are not carried over.

Is a cart drawer or a cart page better?
Both are complete. Choose in Theme settings → Cart → Cart type.

16. Support

Write to contact@glowupagence.com or use the support form:
https://glowupagence.com/dosage-theme/support/

We reply within one business day, Monday to Friday. Please include your store address
(for example https://storename.myshopify.com), the page where the problem shows, and
a screenshot.

Support covers questions about installing and using the theme, its settings and
sections, the product data described here, and fixing bugs in the theme.

Support does not cover custom design or development, changes to the theme code,
third-party apps, or store setup outside the theme. For those, hire a Shopify Partner.

17. Release notes

1.0.0 — initial release

• One style, Dosage.
• Spec sheet on the product page and the hero, with each active and its real dose.
• Ingredient glossary with one page per ingredient, linked from every product that
  contains it.
• Dated before / after comparison, customer video strip, customer gallery.
• Customer reviews you enter yourself, filterable by skin type, age, and concern; star
  ratings from Shopify’s standard review metafields (written by apps such as Judge.me), Yotpo, or Loox. The
  theme does not collect or verify reviews.
• Shade swatches grouped by undertone and sorted by depth; any option with Shopify
  swatches is shown as swatches.
• Quantity tiers, Bought together, Matching routine, Pre-built bundle, Subscription
  with a run-out estimate, cost per use.
• Skin quiz, Comparison, Step protocol, searchable INCI list, Week by week, How to use,
  product FAQ.
• Featured product, quick add on product cards, Slideshow, Video, Multicolumn,
  Collapsible content, Image with text, Custom Liquid section and blocks, app blocks.
• Cart drawer or cart page with unit prices, discounts, tax note from store settings,
  and accelerated checkout; gift card page with QR code and Apple Wallet; gift card
  recipient fields.
• Predictive search, storefront filtering, country and language selectors, pickup
  availability, ten social media links, store policy links in the footer.
• English and French. Right-to-left layouts are not supported in this version.