Product Detail

Full PDP layout extracted from a Clean Cosmetics product page — image gallery, price/rating/description, size + quantity selectors, and expandable Product Details / How to Use / Ingredients sections.

Composed ofBadge Button Rating

Configurator

New

Step 2: Treat

Caffeine 3% + Escin 1% Face Serum

4.8(142)

$9.00 USD

An energizing serum formulated with caffeine and escin, aimed at refreshing the look of tired, dull skin and supporting facial definition over time.

Targets: Early Signs of Aging, Dullness, Advanced Signs of Aging

Suited for: All Skin Types

Format: Serum: Emulsion

Key ingredients: Caffeine, Escin

Product Details

A serum-textured formula built around caffeine and escin, intended to energize the look of tired, dull skin while supporting a firmer, more defined appearance over time.

How to Use

Apply a few drops to the face in the morning and evening.
Avoid the eye contour and contact with the eyes.
For morning puffiness, massage in for 1–3 minutes to support microcirculation.

Ingredients

Aqua/Water/Eau, Ethyl Macadamiate, Ethylhexyl Olivate, Caffeine, Propanediol, Glycerin, Maltodextrin, Escin, Bacillus Ferment, Pentylene Glycol, Cetearyl Olivate, Sorbitan Olivate, Sodium Stearoyl Glutamate, Isoceteth-20, Xanthan Gum, Hydroxyethylcellulose, Citric Acid, Sodium Citrate, Sodium Hydroxide, Malic Acid, Trisodium Ethylenediamine Disuccinate, Tocopherol, Salicylic Acid, Ethylhexylglycerin, Phenoxyethanol, Chlorphenesin.

BadgeTitlePriceDescription

Usage

<ProductDetail
  images={["/products/caffeine-3-escin-1-face-serum.png"]}
  badge="New"
  regimenStep="Step 2: Treat"
  title="Caffeine 3% + Escin 1% Face Serum"
  rating={4.8}
  reviewCount={142}
  price="$9.00 USD"
  description="An energizing serum formulated with caffeine and escin, aimed at refreshing the look of tired, dull skin and supporting facial definition over time."
  targets="Early Signs of Aging, Dullness, Advanced Signs of Aging"
  suitedFor="All Skin Types"
  format="Serum: Emulsion"
  keyIngredients="Caffeine, Escin"
  sizes={["30ml"]}
  defaultSize="30ml"
  details="..."
  howToUse={["...", "..."]}
  ingredients="Aqua/Water/Eau, ..."
/>

Props

Prop	Type	Default	Description
images	string[]	—	Gallery images; arrows appear automatically once there's more than one.
badge	string	—	Optional tag over the top-left of the image (e.g. "New").
regimenStep	string	—	Small eyebrow above the title (e.g. "Step 2: Treat").
title	string	—	Product name.
rating / reviewCount	number	—	Passed straight to Rating.
price	string	—	Formatted price string.
description	string	—	Short paragraph under the price.
targets / suitedFor / format / keyIngredients	string	—	Optional spec rows; each renders only when provided.
sizes	string[]	—	Size chips.
defaultSize	string	—	Initially-selected size.
details / howToUse / ingredients	string / string[] / string	—	Power the three accordion sections; each is omitted from the accordion entirely when not passed.

Do's and Don'ts

·Reproduce the INCI ingredients list verbatim — it's a factual regulatory disclosure, not marketing copy.
·Write description, details, and howToUse as original paraphrase rather than copying marketing copy from the live site.

Don't

·Don't leave sizes empty — the size-chip row and Add To Cart button assume at least one option.
·Don't stack more than three accordion sections; Product Details / How to Use / Ingredients is the pattern the layout was built for.