The product page
Chapter 6 of the Derma user guide.
The default product template has five sections: Product (the media and buy box), Formula and use with the Formula block, a second Formula and use band with How to use and Clinical results, Routine built from the product, and Product recommendations ("Pairs well with"). Bloom's product page drops Clinical results; Daily's uses Supplement facts in place of Formula and has no "Suits your skin".
Product section settings
| Setting | Default | Notes |
|---|---|---|
| Show breadcrumbs | On | |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
| Show media captions | Off | Shows each image's alt text in a pill over the two square images under the main media |
| Show oversold variants as pre-orders | Off | For tracked variants that keep selling at zero stock. Connect a true or false product metafield to choose per product. |
| Show single-delivery purchase options as pre-orders | Off | For products sold only through a pre-order app. Leave off for try before you buy. |
| Pre-order note | Shown under the button, for example "Ships in March". Give a date or a range. Connect a product metafield to set it per product. |
The gallery shows images, videos, external videos and 3D models (with "View in your space" on supported phones). Each product's images sit on a tinted well coloured by its derma.tint metafield, in the theme's media shape.
Product blocks
| Block | What it shows | Settings |
|---|---|---|
| Product metadata | Product type (linked to the collection of the same name when there is one) and the rating your review app saves | "Show vendor in metadata" (off), "Rating link" (default #reviews; where the rating jumps to, or blank for no link) |
| Product vendor | The vendor | |
| Title | The product title, with the formula line above it | "Show formula line" (on): from derma.formula, or else the first two key actives with their strengths |
| Description | A short benefit or the full description | "Show": Short (default; derma.benefit_long, or else the first paragraph of the description) or Full description |
| Suits your skin | The product's skin types and concerns as chips, highlighting those that match the shopper's saved skin profile | None. See chapter 7. |
| Price | Price, compare-at price, unit price | "Show tax note" (on) |
| Variant picker | One selector per option (below) | |
| Buy buttons | Quantity, add to bag, subscriptions, accelerated checkout | See below |
| Inventory | In stock, "Only 4 left" (using Theme settings › Commerce › "Low stock threshold"), sold out; adds "ships today" when that setting is on | |
| Back-in-stock request | A form shown only when the selected variant is sold out | "Heading" (default "Email me when it's back"), "Text". Requests are emailed to your store's sender address. Nothing is sent to shoppers automatically: reply when the stock is back. |
| Pickup availability | Whether the selected variant can be picked up, and where | Needs local pickup set up in Shopify; hidden otherwise |
| Details | A spec table of Shopify data and metafields | See below |
| Assurance | A list of short promises, such as shipping and returns | Assurance row blocks: "Icon" and "Text" (bold the words that lead the line; default "Free shipping over $60. Arrives in 2 to 4 business days.") |
| Collapsible row | An accordion row | See "Connect the accordion rows" below |
Buy buttons settings:
| Setting | Default | Notes |
|---|---|---|
| Show subscription options | On | Appears when the product has subscription plans |
| Show quantity selector | On | |
| Show accelerated checkout buttons | On | Customers see the payment methods available on their device |
| Show Shop Pay Installments | On | Appears when Shop Pay Installments is enabled on your store |
| Show sticky add-to-cart bar | On | Product pages only. Appears when the add-to-cart button scrolls out of view. |
| Show refill link | On | Links to the product chosen in derma.refill, with the saving against this product's price |
| Returns note | Shown under the add-to-cart button. Leave empty to hide. |
Details (spec table) settings: "Heading" (default "Details"), "Spec row position" (Above or Below product details), "Show SKU", "Show product type", "Show vendor in spec table", "Show weight", "Show variant options" (all on) and "Show barcode" (off). Add Detail row blocks for metafields: "Label" (default "Texture"), "Product metafield" (the namespace and key, such as derma.texture), "Value" (used when the metafield is empty; a typed value shows on every product) and "Unit" (shown after the value, such as ml or %). Lists, yes/no values, measurements and dates are formatted for the shopper's language; rows with no value are hidden.
Variants, sizes and shades
- An option named Shade, Colour or Color whose values have swatches (set in the product's option in Shopify admin) shows as swatch circles. When the value names include Warm, Neutral, Cool or Olive (for example "3W Warm"), the swatches are grouped under those headings. The chosen shade's note comes from the variant metafield
derma.shade_note(for example "light, warm undertone"). - Options with more than eight values show as a dropdown.
- Every other option shows as pills. A variant's
derma.notemetafield (for example "Save 15%") appears inside its size pill. - Products with more than 250 variants are supported: combinations beyond the first 250 are looked up as shoppers choose.
Subscriptions, pre-orders, gift cards and B2B
- Subscriptions: install a subscription app (such as Shopify Subscriptions) and add selling plans to products. Buy buttons shows the purchase options; a product sold only by subscription opens quick view from cards.
- Pre-orders: use the two pre-order settings above, or a pre-order app. The button reads "Pre-order" and your pre-order note shows under it.
- Gift cards: gift card products show Shopify's recipient form (recipient email, name, message and send date).
- B2B: for customers buying for a company location, the buy box shows quantity rules ("Minimum 10 · Multiples of 5") and volume pricing ("10+ $4.00") from their B2B catalog. Add the Quick order (stockists) section to the product template for a table of every variant. Stores without B2B see no change.
Connect the accordion rows to metafields
The default product template has four Collapsible rows: How to use, Full ingredient list, Patch test and safety and Shipping and returns. The first three ship with empty content, because a theme can only connect a setting to a metafield your store has already defined. Until you connect them, they are hidden from shoppers (the editor shows a note).
- Create the metafield definitions in chapter 7 (at least
derma.directions,derma.inciandderma.patch_test). - Open a product in the theme editor and select the How to use row.
- In "Content", click the Connect dynamic source icon and choose Product › Directions (
derma.directions, rich text). - Do the same for Full ingredient list with
derma.inci(multi-line text) and Patch test and safety withderma.patch_test(multi-line text). - Save. Every product using this template now shows its own text, and rows hide on products without a value.
Edit Shipping and returns to match your real policy; it is plain text shared by every product.
The Formula and How to use blocks lower down already read the same metafields. Keep the rows if you like accordions near the buy button, or remove them to avoid repeating the content.