How to Build a High-Converting Shopify PDP for Skincare Brands

Last updated
Expert reviewed
5 min read
Simeon Mantel
Simeon Mantel
CEO at Fudge.

Key takeaways

  • A Shopify skincare PDP has to answer questions a general product page never faces: will this suit my skin type, will it break me out, what is the concentration, and can I layer it with what I already own.
  • Routine context is the highest-value skincare merchandising move. Where the product sits in an AM or PM routine, what to pair it with, and what not to layer it with turns a cross-sell into advice.
  • Ingredient data belongs in metafields and metaobjects, not the description field. An ingredient glossary stored once as a metaobject can be referenced by every product that uses it.
  • Claims wording is regulated. In the US the line between a cosmetic and a drug turns on intended use, and in the EU cosmetic claims must meet six common criteria including evidential support.
  • Trial risk reversal matters more here than in most categories: a travel size as a real variant, a returns policy visible on the PDP, and subscription framed as convenience rather than lock-in.

Most product page advice is category-neutral. It tells you to fix your hero image, tighten your headline, and add reviews. All true, and all insufficient for skincare.

A Shopify skincare PDP fails on questions a general page never has to answer. Will this work on my skin type. Will it break me out. What is actually in it. How long until I see anything. Does it conflict with the acid I already use at night. Is it fragrance-free. This guide covers only the skincare-specific parts. For the general fundamentals, start with our guide to a high-converting Shopify product page and come back here.

Why you can trust us

We have been in the Shopify space for over four years and have worked with hundreds of Shopify brands on their storefronts, including beauty and skincare merchants. We build Fudge, an AI storefront editor with a 5.0 rating on the Shopify App Store and Built for Shopify status, so we work directly on the theme layer where these blocks live.


What a skincare buyer is actually asking

Every extra question a shopper cannot answer on the page is a reason to close the tab and go read a Reddit thread instead. Skincare buyers arrive with a specific set.

The questionWhat answers it on the page
Will this suit my skin type?An explicit skin-type line, not a vague “for all skin”
Will it break me out?Full ingredient list, free-from attributes, reviews from similar skin
What is actually in it?Hero ingredient with concentration, plus the full INCI list
How long until I see results?A stated timeframe tied to the study or usage instructions
Can I use it with what I already own?An explicit “pairs with” and “do not layer with” block
Is it safe while pregnant?Formulation facts plus a pointer to a doctor, never a safety claim
Is it fragrance-free?A specific attribute, visible above the fold if it is a selling point

Answer these in the order a shopper thinks of them, not in the order your theme happens to stack sections.


Above the fold on a skincare PDP

The top of the page has one job: confirm fit fast. Five things earn the space.

The product name plus a “what it does” descriptor. A fanciful name alone forces the shopper to hunt. Pair it with a plain function: serum, exfoliant, barrier cream. Concentration in the name is worth copying: The Ordinary sells a product called Niacinamide 10% + Zinc 1%, and Paula’s Choice sells a 2% BHA Liquid Exfoliant.

The hero concern it solves. One concern, stated once. A product that claims to fix everything reads as fixing nothing.

Skin-type fit, stated explicitly. “Suited for: all skin types” is a real line on The Ordinary’s page, sitting alongside a “Targets” list of concerns. Even a broad answer beats silence, because silence makes a sensitive-skin shopper assume the worst.

Size and price per ml or oz. Skincare is bought on value-per-use, and a 30ml serum against a 50ml at a different price is hard to compare in your head. Shopify has a native unit price field that renders on product, collection, cart, and checkout pages on Online Store 2.0 themes, and displaying it is a legal requirement in some regions.1 In Liquid it reads through variant.unit_price and the unit_price_with_measurement filter.2

One clear add to cart. Not an add to cart competing with a subscribe toggle, a bundle upsell, and a quiz link at equal weight.


The single biggest difference between a skincare PDP and a generic one is that the ingredient list is a reason to buy, not a compliance obligation you bury in an accordion nobody opens.

Lead with the hero ingredient and its concentration

Where you disclose concentration, say it. Both examples above put the percentage in the product title. If you do not disclose, say something useful about the form instead: which derivative, at what pH, in what delivery system.

There is a technical reason concentration matters that most brands never explain to shoppers. The FDA requires cosmetic ingredients to be declared in descending order of predominance, but ingredients present at 1% or less may be listed in any order after the ones above 1%, and colour additives may follow in any order after that.3 So the position of an active in an INCI list tells a shopper almost nothing once you get past the first few entries. Disclosing the number removes the guesswork.

Put the full INCI list on the page

Some brands hide it. Ingredient-conscious buyers will find it anyway, and they will trust the brand that made it easy. Put the full list in an expandable block close to the buy box rather than at the bottom of the page.

One detail worth copying: The Ordinary’s ingredient block carries a note that formulations are updated over time and the list shown may differ from the box depending on region and purchase date. That is honest, and it pre-empts a support ticket.

Translate the list into plain English

The INCI list is a legal document written in Latin and chemistry. Next to it, run a short glossary of the ingredients that matter: the name a shopper recognises, what it does, and one line on who it suits. Five to eight entries is plenty. Translating all forty is noise. For the mechanics, see our guide to adding ingredients or care instructions in Shopify.

Make “free from” specific, not fear-based

“Clean” is a marketing word with no fixed meaning. “Hypoallergenic” has less meaning than most people assume: the FDA states plainly that there are no federal standards or definitions governing the term, and that manufacturers are not required to substantiate the claim.4

Specific attributes are more credible and more useful. The Ordinary’s page lists a pH range of 5.00 to 6.50 alongside alcohol-free, oil-free, silicone-free, vegan, and cruelty-free flags. Those are checkable facts a shopper can act on. “Free from 1,300 nasties” is a fear pitch that invites the shopper to distrust the category rather than trust you.

How to store ingredient data on Shopify

Do not type this into the product description. Descriptions are unstructured, unfilterable, and impossible to update at scale.

Use product metafields for per-product data. Create definitions under Settings, then Custom data, then Products. A single-line text field for the hero ingredient and concentration, a multi-line text field for the full INCI list, a list field for free-from attributes. Once defined, the field appears on every product of that type and can be connected to a compatible block in the theme editor.

Use metaobjects for anything shared across products. Metaobjects are standalone, multi-field data structures that can be referenced from many resources, which is exactly what an ingredient glossary is. Define an Ingredient metaobject with fields for INCI name, common name, what it does, and who it suits. Create one entry per ingredient. Then give products a metaobject reference list metafield and point each product at the four or five entries that apply.

The payoff is that when you rewrite your niacinamide explainer, it updates on every product that uses niacinamide. That is the difference between a data model and a copy-paste habit.

Want ingredient blocks that match your theme? Describe them to Fudge.
Try Fudge for Free

Routine context and cross-sell that helps rather than pads

This is the highest-value skincare-specific move on the page, and most stores skip it. A generic cross-sell says “you might also like.” A skincare cross-sell says where this product sits in a routine and what belongs next to it. That reads as advice, and advice converts.

Four pieces of data do the work.

Step order. The Ordinary labels its serum page “STEP 2: TREAT” above the product name. The shopper immediately knows this is not a cleanser and not a moisturiser.

AM, PM, or both. A one-word answer that removes a real point of confusion, especially for actives.

Pairs with. Paula’s Choice runs a “Complete Your Routine” block organised by stage: Cleanse, Exfoliate, Moisturize, each with a named product and an add to bag, with the current product occupying its own stage. It is a cross-sell that reads as a routine.

Do not layer with. The most underused block in skincare ecommerce. The Ordinary’s page carries an explicit “Do not use with” list naming direct and indirect vitamin C, plus a compatibility tool for checking any two products in the range. Telling a shopper what not to buy alongside this is a strong trust signal, and it prevents the “it irritated my skin” review a bad pairing would have caused.

On Shopify, model routine step and AM/PM as product metafields with a fixed list of allowed values, and model “pairs with” and “do not layer with” as product reference list metafields so the blocks render real product cards with live prices and stock. For more patterns worth borrowing, see our roundup of the best Shopify stores in beauty and cosmetics.


Proof in a category where claims are regulated

Skincare proof has a credibility problem: shoppers have seen too much of it. The fix is specificity.

Before and after imagery and its limits

Before and after shots work when the concern is visible: texture, congestion, redness. They fail for hydration, barrier support, or anything a photo cannot show, and a shopper who senses a stretch stops believing the rest of the page.

Keep lighting, distance, and expression identical between shots, state the timeframe and usage, and do not retouch. If you cannot produce honest before and afters, do not fake the format with stock photography.

Present study results the way a careful brand does

Both PDPs referenced above publish clinical claims with the sample size in the footnote. Paula’s Choice states its pore and oil claim is based on an independent clinical study with 32 subjects after 4 weeks, and a separate barrier claim on a study of 29 subjects. The Ordinary footnotes its results to a clinical study of 35 subjects applying the product twice daily for 8 weeks.

Copy the structure: the claim, then the sample size, the duration, and whether the result was measured or self-reported. A small study honestly described beats a big number with no methodology attached.

Watch the verbs. Both brands write “visibly reduce” and “reduces the appearance of pores” rather than “shrinks pores.” That wording is deliberate, and the next section explains why.

These are different claims and shoppers conflate them. “Dermatologist-tested” means a dermatologist was involved in testing, which says nothing about the outcome. “Dermatologist-recommended” implies endorsement and needs real substantiation behind it. If you use either, be ready to say what the testing was and who did it.

Reviews filtered by skin type and concern

A five-star average is weak proof in skincare. A five-star average from people with your skin type is strong proof.

Review platforms support this through custom attributes: capture skin type, skin concern, and age at review time, then let shoppers filter the widget by those attributes. Three to five attributes is the practical limit before response rates suffer.

Two smaller details raise credibility. Show the full rating distribution rather than only the average, as Paula’s Choice does with a per-star breakdown across its 5,000-plus reviews. And say your policy out loud: The Ordinary’s review section states that the brand posts all reviews, positive or negative.

Unpolished customer photos also carry more weight here than studio imagery, because they show the product on skin that is not professionally lit. Place a UGC strip below the reviews rather than competing with the hero gallery. For implementation options, see our guide to adding review widgets in Shopify.


A short note on claims wording

This is not legal advice, and a regulatory specialist should review your copy before it ships.

In the US, whether a product is a cosmetic or a drug is determined by its intended use. The FD&C Act defines drugs in part as articles intended for the diagnosis, cure, mitigation, treatment, or prevention of disease, and articles intended to affect the structure or any function of the body, so claims such as restoring hair growth, reducing cellulite, or changing melanin production can make a product a drug even if it is marketed as a cosmetic.5 In the EU, Commission Regulation (EU) No 655/2013 sets six common criteria that every cosmetic claim must meet: legal compliance, truthfulness, evidential support, honesty, fairness, and allowing informed decisions.6

That is the whole reason careful brands write “reduces the appearance of” rather than “removes.”


Trial risk reversal for a high-perceived-risk purchase

Skincare carries a risk a t-shirt does not: the product might make your face worse. Price the risk down.

Sell a travel or sample size as a real variant. Paula’s Choice offers its exfoliant in a 1 fl. oz. travel size and a 10-count pad format alongside the 4 fl. oz. full size, all in the same variant selector. An unsure shopper gets a low-commitment entry point without leaving the page.

Put the returns or satisfaction policy on the PDP, not in the footer. The Ordinary states a 365-day returns policy in the buy box area, and Paula’s Choice shows a 100% money-back guarantee near the proof block. If your policy is good, it belongs where the decision happens. See our guide to adding guarantees to a Shopify product page.

Frame subscription as convenience, not lock-in. Skincare is genuinely consumable, so replenishment is a real benefit. Say the cadence, the discount, and how to cancel in the same block. Hiding the cancellation terms costs more in trust than it earns in retention.

Handle the pregnancy question without answering it. Do not make a safety determination on a product page. State the formulation facts, note the actives present, and direct the shopper to a healthcare professional.


Filtering, variants, and how switching should behave

Skincare catalogues are browsed by skin type and concern, not by collection name.

Store skin type and concern as structured data, either as tags or as list metafields, then expose them as storefront filters. A shopper who can filter to “oily, congestion” reaches a shortlist in one click instead of reading twelve product pages. If the routing problem is bigger than a filter can solve, a guided flow works better: see our guide to building a Shopify quiz funnel.

Variant switching has to update everything that changed. For skincare that usually means size, so switching should update the price, the unit price, the packaging image, availability, and the URL.

One skincare-specific trap: if a variant is a different strength rather than a different size, the ingredient block and the usage instructions have to change with it, which means those fields belong on the variant rather than the product.


Mobile and page speed

Most skincare traffic is mobile, and the two heaviest things on a skincare PDP are the two most skincare-specific: the ingredient blocks and the review widget.

Ingredient content should collapse, not disappear. Accordion the full INCI list, usage instructions, and the glossary. Keep the hero ingredient and the skin-type line expanded, since those drive the decision. Do not stack six closed rows in a row either, since a wall of them reads as evasion. Group into ingredients, how to use, and shipping and returns.

Review widgets are the usual bloat source. Most third-party review apps inject their own scripts, fonts, and stylesheets, often loading whether or not the shopper scrolls that far. Load the widget lazily, keep the summary rating server-rendered so the layout does not shift, and measure the actual weight rather than assuming.

A sticky add to cart earns its place here because skincare pages are long. The shopper who has just finished the ingredient glossary should not have to scroll back up.


What to build where

Some of this is a theme setting, some needs data modelling, and some needs a custom section. Knowing which saves a lot of wasted effort.

PDP elementWhere it lives
Hero descriptor and concern lineTheme setting or a product metafield
Size and price per ml or ozVariants plus Shopify’s unit price field
Hero ingredient and concentrationProduct metafield, single-line text
Full INCI listProduct metafield, multi-line text, in a collapsible row
Ingredient glossaryMetaobject entries, referenced from many products
Routine step and AM/PMProduct metafield with a fixed list of values
Pairs with, do not layer withProduct reference list metafields
Free-from attributesTags or list metafield, reused as storefront filters
Reviews filtered by skin typeReview app custom attributes
Sticky add to cartTheme setting in most 2.0 themes, otherwise custom
Study results with footnoteCustom section
Before and after comparisonCustom section

The metafield work is one-time setup that pays off across the whole catalogue. Our guide to adding metafields to Shopify products covers the definitions step.

The custom sections are where most skincare brands stall, because no theme ships with a routine-step block or a layering-conflict block. That is the gap Fudge fills: you describe the block, and it writes the Liquid, CSS, and JavaScript into your theme, reading your existing brand and product data. The output is native theme code rather than an app-rendered layer, so there is no extra script on the page and the block stays put if you ever remove Fudge.


FAQ

What should be on a skincare product page?

Beyond the standard product page elements, a skincare PDP needs skin-type fit stated explicitly, the hero ingredient with its concentration, the full INCI list, plain-English ingredient translations, routine context covering step order and AM or PM, a layering-conflict block, reviews filtered by skin type, and a trial size or returns policy visible near the buy box. Price per ml or oz belongs above the fold so the value is comparable.

Should I show the full ingredient list on my Shopify product page?

Yes. Ingredient-conscious shoppers will look it up anyway, and the brand that makes it easy earns the trust. Put the full INCI list in an expandable block near the buy box, and run a short plain-English glossary of the five to eight ingredients that actually matter next to it.

How do I store ingredient data on Shopify products?

Use product metafields for per-product values like the hero ingredient, concentration, and the full INCI list. Use metaobjects for anything shared, such as an ingredient glossary: define an Ingredient metaobject once, then reference the relevant entries from each product with a metaobject reference list metafield. Editing the glossary entry then updates every product that uses it.

Can I say my skincare product treats acne on the product page?

Treating or preventing a disease is a drug claim in the US, not a cosmetic one. The FD&C Act defines drugs partly as articles intended to diagnose, cure, mitigate, treat, or prevent disease, or to affect the structure or function of the body, and that intended use can be established by your marketing copy. This is why careful brands write about the appearance of blemishes rather than treatment. Have a regulatory specialist review your claims.

How do I let shoppers filter reviews by skin type?

Review platforms support custom attributes collected at review time, such as skin type, skin concern, and age, which then become filters on the widget. Keep it to three to five attributes so response rates stay high. Showing the full star distribution alongside the average adds more credibility than the average alone.

Do before and after photos work for skincare?

They work when the concern is visibly photographable, such as texture or congestion, and they fail for claims a photo cannot show like hydration or barrier support. Keep lighting, distance, and expression identical between shots, state the timeframe and usage, and do not retouch. A shopper who senses a stretched image stops trusting the rest of the page.

Should a skincare brand sell sample or travel sizes on the PDP?

It is one of the strongest risk reducers in the category, because the perceived risk of a bad reaction is high. Sell the travel size as a real variant in the same selector as the full size rather than as a separate product, so an undecided shopper gets a low-commitment entry point without leaving the page.

Simeon's signature
Build a skincare PDP that answers every question.

Footnotes

  1. Shopify Help Center, “Displaying unit prices for products” - the unit price displays on product, collection, cart, and checkout pages on Online Store 2.0 themes, and showing it is a legal requirement in some regions. https://help.shopify.com/en/manual/products/details/product-pricing/unit-pricing

  2. Shopify Dev, “Unit pricing” - variant.unit_price and variant.unit_price_measurement rendered with the unit_price_with_measurement filter. https://shopify.dev/docs/storefronts/themes/pricing-payments/unit-pricing

  3. FDA, “Cosmetics Labeling Guide” - ingredients must be listed in descending order of predominance, but ingredients present at a concentration not exceeding 1% may be listed in any order after those above 1%, and colour additives may be listed in any order after the non-colour ingredients [21 CFR 701.3(f)(2) and (f)(3)]. https://www.fda.gov/cosmetics/cosmetics-labeling-regulations/cosmetics-labeling-guide

  4. FDA, “Hypoallergenic Cosmetics” - “There are no Federal standards or definitions that govern the use of the term hypoallergenic,” and manufacturers are not required to submit substantiation of the claim to FDA. https://www.fda.gov/cosmetics/cosmetics-labeling-claims/hypoallergenic-cosmetics

  5. FDA, “Is It a Cosmetic, a Drug, or Both? (Or Is It Soap?)” - drugs are defined in part by intended use under FD&C Act sec. 201(g)(1), and FDA gives restoring hair growth, reducing cellulite, and changing melanin production as examples of claims that establish a product as a drug. https://www.fda.gov/cosmetics/cosmetics-laws-regulations/it-cosmetic-drug-or-both-or-it-soap

  6. Commission Regulation (EU) No 655/2013 of 10 July 2013, made under Article 20(2) of Regulation (EC) No 1223/2009, lays down six common criteria for the justification of cosmetic claims: legal compliance, truthfulness, evidential support, honesty, fairness, and informed decision-making. https://eur-lex.europa.eu/eli/reg/2013/655/oj

You might also be interested in

Building a Multi-Currency Shopify Storefront Without Sacrificing Speed
Multi currency Shopify speed depends on native Markets vs a converter app. How presentment currencies, rounding, and CLS decide your Core Web Vitals.
Klaviyo + Shopify: A Practical Setup Guide
Setting up Klaviyo on Shopify - install, flows that matter, segmentation, and what to skip. Practical guide for stores under $5M and beyond.
Service Workers for Shopify: A Practical Guide
Service workers on Shopify hit a hard scope limit: theme assets are not the store root. What works, the checkout risk, and how to kill a bad one.