Product page example · Skincare

Skincare product landing page example: a fragrance-free moisturiser

A product page for Quillfern, a fictional skincare brand. It says what the cream does in one sentence, then covers the routine, the ingredients, what is left out and who should patch-test first.

Page type
Product page
Canvas
Desktop · 1280 px
Sections
6
Brand
Quillfern (demo brand)
Full-page screenshot of Quillfern: barrier cream, routine, ingredients and who should patch-test

Download and usage details

Files
HTML + CSS · images included
Usage
Free to edit and use in personal and commercial projects. Attribution is optional. Do not resell or redistribute the templates themselves as templates.
Forms, if included
They look complete but do not send anything. Point the form at your own form service or email tool before you publish.
Fonts
Fonts load from Google Fonts
Demo content
Every brand is a fictional demo brand, and the copy was written for that demo. Replace product facts, offers and any testimonials with your own, and check every claim before you publish.
All templates →
01 / THE BRIEF

What we typed

A product page for the Quillfern Barrier Cream: a 50 ml, fragrance-free moisturiser with ceramides, niacinamide and squalane. Open with one plain sentence on what it does: it helps dry, easily irritated skin hold on to moisture. Then cover: how to use it in a two-step routine (morning and night, after cleansing); what is in it and why each ingredient is there; what it leaves out (no fragrance, no essential oils, no drying alcohol); who it suits and who should patch-test first. Price: $28 for 50 ml, free shipping on orders over $35. Main action: Buy on the Quillfern store. Do not invent customer reviews, star ratings, percentages, clinical results or awards. In the footer, add one line: Quillfern is a demo brand created to show what Octet Prow can build. It is not a real company and nothing here is for sale.

02 / DESIGN SYSTEM

Quillfern Quiet Barrier

  • primary · #B98E68
  • secondary · #6D7F63
  • tertiary · #A9744E
  • surface · #FBF7F1
  • outline · #C6B8A7
  • inverse · #33302A
  • Serif · Fraunces
  • Sans · Inter

Generated once for the project from its brief. Every page in the project follows it.

03 / STRUCTURE

How the page is put together

  1. OpeningA cream that helps dry, easily irritated skin hold on to moisture.What the cream does in one plain sentence, the price and the buy action.
  2. 01Two steps, morning and night.The two-step routine for morning and night.
  3. 02Three ingredients, and the reason each one is there.Each ingredient and the one job it does.
  4. 03Three things that are not in the tube.What the formula leaves out, and why that matters for irritated skin.
  5. 04Dry, easily irritated skin — and the people who have to test first.Who it suits, and who should go slowly and patch-test first.
  6. 05One tube, $28, ordered from the Quillfern store.The buy block: one size, one price, shipping terms.
04 / REVIEW

What we checked and changed

We read every line for invented facts. One sentence said a tube lasts about three months for most people, a figure we had not supplied. We asked the editor to remove it; the page now only says that very dry skin uses a little more.

MORE EXAMPLES
MAKE ONE LIKE THIS

Start from your own product and the question your readers ask.

Start creating