Getting started

What's in your download

The three zips are the same theme. A preset only decides the starting colours, fonts, home page, product page, header and footer, and you can change all of them afterwards. Products, photos and demo text are not included: a fresh install shows your own products, and sections that need a product or collection show placeholder cards until you choose one.

Presets

Bloom's product page leaves out the clinical results block; Daily's product page swaps the formula block for the supplement facts panel and leaves out "Suits your skin". The fourth palette, Nocturne, has no preset of its own; choose it in Theme settings › Colors on any preset.

Add the theme

1. Download your purchase on a computer and pick the zip for the preset closest to your store. Don't unzip it.
2. In Shopify admin, go to Online Store › Themes, then Add theme › Upload zip file, and choose the zip. Derma appears in your theme library, unpublished.
3. Click Customize to open the theme editor. Your live store doesn't change until you publish.
4. When the store looks right, go back to Online Store › Themes, open the … menu on Derma and choose Publish.

Set-up checklist

Work through these in order; each step points to the chapter that covers it.

1. Palette and fonts. Theme settings › Colors › "Color palette", then Typography. See chapter 2.
2. Logo. Theme settings › Brand › "Use a custom logo" and "Logo". With it off, the header shows your shop name in the heading font.
3. Menus. Create the menus in Online Store › Navigation and choose them in the header and footer. See chapter 3.
4. Free shipping. Theme settings › Commerce › "Free shipping over". Each preset ships with a demo amount (Derma 60, Bloom 50, Daily 0). Set your real threshold, or 0 if you don't offer free shipping. This only controls the messages; create the shipping rate itself in Settings › Shipping and delivery.
5. Skin and formula data. Create the Ingredient and Clinical study metaobject definitions and the derma product metafields, then fill them in for your products. This is what makes Derma's product page work. See chapter 7.
6. Filters. Install Shopify's free Search & Discovery app and add the Skin type, Concern, Key ingredient and Strength filters. The skin quiz depends on them. See chapters 7 and 10.
7. Quiz and glossary pages. Create a page with the page.skin-quiz template and one with page.ingredients, and choose them in Theme settings › Skin and formula. See chapter 7.
8. Home page. Choose the collections and products for the featured sections, replace the demo text, and check every figure and claim is yours. See chapters 4 and 8.
9. Product page. Open a product in the editor and connect the accordion rows to your metafields. See chapter 6.

Store details the theme reads