Can I adapt this for supplements, haircare, or other formula-led products?

Yes. Barrier Serum 04 is a placeholder; the structure is a generic formula argument - hero bottle with price, an actives column with percentages, a texture macro, a usage-steps pane, and a close with trust line. Anything sold on what is inside it fits: supplements swap the actives for doses, haircare keeps the percentages, even food products can run the same sequence. Rewrite the four percentage rows, swap the photos, and the clinical-calm register carries over unchanged.

How does the percentages pane work?

Pane 2 stacks four rows down the left side, each led by a 150px Inter Tight numeral - 5% niacinamide for barrier, 2% ceramide complex to seal, 1% allantoin to calm, 0.5% squalane for slip - beside the bottle with its dropper lifted on a sage circle. Each percentage counts up with PaneFlow's number-roll animation and lands within two seconds, so the figures feel measured rather than animated for its own sake. The headline above sets the tone: "Four actives. No noise."

Skincare PDP Template - Ingredient Percentages

Q: Where would I use this besides the product page itself?

Three places. Embedded on the PDP - export to HTML, React, Vue, or Svelte and mount it where the static bottle photos sit, so the gallery explains the formula while the buy box sits beside it. On social - the 1:1 format exports to video or image sequence for Instagram without cropping, and the percentages pane works as a standalone looping ad. And in launch emails - individual panes export as stills that keep the sage system consistent across channels.

A product gallery for skincare and beauty brands that sell on formula rather than fantasy. Five square panes of pale sage lab minimalism built around the fictional Rena Lab Barrier Serum 04 - a frosted-glass dropper bottle at $48 - with a persistent "RENA LAB - Nº04" mono chip anchoring the top corner of every pane. Instead of rotating the bottle five times, the sequence makes the argument a formulation-literate customer actually wants: what is in it, at what percentage, what it feels like, and where it fits in a routine.

#What Makes This Template Stand Out

The percentages are the design. Pane 2 turns the ingredient list - usually a wall of INCI text behind an accordion - into four giant Inter Tight numerals stacked down the left: 5% niacinamide for barrier, 2% ceramide complex to seal, 1% allantoin to calm, 0.5% squalane for slip. Each figure counts up with a number-roll while the bottle sits to the right, dropper lifted, a drop forming. The headline above says everything about the voice: "Four actives. No noise."

Texture gets a full pane because texture closes the sale. A full-bleed macro of the serum smeared on sage acrylic carries a single line - "Milky gel. Gone in twenty seconds." - answering the will-it-feel-sticky question in nine words. It is the pane that does the job of a thousand-word review.

The routine pane positions the product instead of just praising it. Three rounded sage cards - 01 cleanse, 02 serum, 03 moisturize - connect with a thin drawn line under "Three steps. Twice a day." with an "AM + PM" chip below. The close pulls back to the bottle beside its recyclable box, lands "Barrier, rebuilt." in Space Grotesk, and finishes with an ink pill reading "Add to routine - $48" over the trust line "Dermatologist tested · Vegan."

Clinical pastel palette: pale sage field, sage panel circles, ink type, muted green numerals
Actives pane with four 150px percentage numerals that number-roll in beside the lifted dropper
Full-bleed serum smear macro with a single texture line: "Milky gel. Gone in twenty seconds."
Three-step routine cards connected by a self-drawing line, with an AM + PM chip
Hero bottle on a sage circle with price chip, product name, and "FRAGRANCE FREE · PH 5.5" meta
5-pane 1:1 format with lab-calm fades, built for PDP embeds and square social cuts

#Who Should Use This Template

DTC skincare and beauty brands whose positioning is evidence over hype. The percentage pane speaks directly to the ingredient-literate customer who reads labels before reviews.
Ecommerce teams replacing static PDP galleries with one embed that covers formula, texture, and routine - the three questions that otherwise live in three different page sections.
Founders launching a hero SKU who need the product page, the Instagram announcement, and the press-kit visuals to share one visual system from day one.
Agencies and studios serving beauty clients who want a formula-explainer format they can re-skin per brand by swapping palette, photos, and four rows of actives.

#Best Use Cases

#Product Detail Page Galleries

Export to HTML, React, Vue, or Svelte and mount the gallery in the image slot of your product page. The square format sits cleanly in both desktop two-column and mobile single-column layouts, and the closing "Add to routine - $48" pill hands off to your real cart button. The formula story plays itself while the shopper reads the buy box.

The 1:1 format exports to video or image sequence for Instagram with no recomposition. The actives pane runs as a standalone looping ad - rolling percentages give the creative motion without extra production - and the texture macro works as the organic follow-up post. One project, a week of launch content.

#Routine and Education Pages

Skincare brands win on education, and the routine pane is built to anchor a "how to use it" section anywhere on the site. Embed the full gallery on a routine-builder page or a comparison landing page, where the three-step cards and the AM + PM chip do the explaining that usually requires an illustrated guide.

#How to Customize This Template

Open PaneFlow and select "Skincare PDP - Ingredients" from the template gallery
Replace the hero bottle photo on the sage circle, then edit "Barrier Serum 04", the "FRAGRANCE FREE · PH 5.5" meta line, and the "$48" price chip
Update the persistent "RENA LAB - Nº04" mono chip with your own brand and product number
Rewrite the four percentage rows on pane 2 with your actives - keep each to numeral, name, and a one-word role
Swap the serum smear macro on pane 3 and rewrite the texture line in under ten words
Edit the three routine cards and the "AM + PM" chip on pane 4 to match where your product sits in the regimen
Replace the bottle-and-box photo on the close, then update the "Barrier, rebuilt." headline, the CTA pill, and the "Dermatologist tested · Vegan" trust line
Export to HTML, React, Vue, or Svelte for the product page embed, or to video for Instagram and paid social

Beauty Drop - Luxe - the launch-moment announcement to this template's evidence-calm PDP
Fashion PDP - Fabric & Fit - the same quiet inspection sequence applied to a garment
Coffee PDP - Origin Story - provenance-led product storytelling with the same stat-numeral move
Product Page Gallery - E-Commerce - the general-purpose PDP gallery when you need fewer opinions

PaneFlow for Ecommerce - product galleries, lookbooks, and PDP embeds for teams that sell things
PaneFlow for Product Launches - teasers, reveals, and launch-day assets from one source file
PaneFlow vs Canva - how PaneFlow goes beyond Canva for animated, code-exportable product pages

Start with Skincare PDP - Ingredients

Open this template in PaneFlow, customize it to match your brand, and export as HTML, React, Vue, or video.

Use This Template Browse All Templates

Skincare PDP - Ingredients Template