# Getting started

Chapter 1 of the Derma user guide.

## What's in your download

| File | What it is |
| --- | --- |
| `Derma-1.0.0-derma.zip` | The theme with the **Derma** preset: a clinical skincare lab |
| `Derma-1.0.0-bloom.zip` | The theme with the **Bloom** preset: clean beauty and cosmetics with shades |
| `Derma-1.0.0-daily.zip` | The theme with the **Daily** preset: supplements and wellness |
| `Derma-user-guide.pdf` | This guide |
| `LICENSE.txt` | Your licence: one store per purchase |

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

| Preset | For | Palette | Fonts | Media shape | Starts with |
| --- | --- | --- | --- | --- | --- |
| Derma | Dermatologist-led skincare, dermal clinics | Clinic | Instrument Serif, Instrument Sans | Arch | Hero, promise row, best sellers, skin finder, clinical results, routine, ingredient glossary teaser, press logos, journal. Cards 4:5, Fit. Compare on. |
| Bloom | Clean beauty, cosmetics with shades | Petal | DM Serif Display, DM Sans | Dome | Hero, promise row, categories, featured collection, shade finder, shop the look, image with text, results, newsletter. Cards 3:4, Fill, swatches and hover image on. |
| Daily | Supplements and wellness, subscriptions | Tonic | Figtree 600, Figtree 400 | Arch | Hero, promise row, essentials, supplement finder, daily stack routine, results, image with text, blog posts. Cards 1:1, Fit. Supplement facts on the product page. "Ships today" on. |

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**.

> **Note:** Each licence covers one store. You can upload the other preset zips to the same store to compare them.

> **Tip:** If you're switching from another theme, keep the old one in your library until Derma is ready. You can preview Derma with your real products the whole time.

## 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

| Shown in the theme | Set it in |
| --- | --- |
| Policy links in the footer | Settings › Policies |
| Payment icons in the footer | Settings › Payments |
| Country and language selectors | Settings › Markets and Settings › Languages |
| Account button in the header | Settings › Customer accounts |
| Tax note under prices | Settings › Taxes and duties |
| Pickup availability | Settings › Locations and Settings › Shipping and delivery › Local pickup |
| Star ratings on cards and product pages | A reviews app that sets the standard `reviews.rating` and `reviews.rating_count` metafields |