Shopify beauty stores

A pack shot cannot explain an undertone, a texture or the order of a skincare routine. These 15 stores use model photographs, comparisons and product guides to answer those questions. The examples concern shopping information; they do not establish product effectiveness.

15 examples Last reviewed Nov 11, 2026

Jones Road

Shade comparisons on different skin tones

Jones Road combines swatches, written shade descriptions and photographs of different skin tones in its Compare Shades view. Complexion filters narrow the comparison, and a persistent shade-finder link offers more help. The photographs and descriptions supply context about coverage and undertone that a small color dot cannot convey.

For your store

Pair swatches with readable shade descriptions and consistent photographs on a range of skin tones.

Visit website

ILIA

Formula first, shade second

ILIA’s guide compares coverage, finish and other formula characteristics before introducing shade choices. Texture photographs make those differences visible, while collection cards also expose the available colors. The sequence lets shoppers decide which kind of result they want before finding a shade within that formula.

For your store

Separate formula selection from shade selection and explain the practical differences between formulas.

Visit website

Kosas

A shade drawer alongside the collection

Kosas opens detailed shade selection in a side drawer over the collection. Model photographs and undertone descriptions have space beside the swatches, while the product grid remains visible behind the panel. Customers can investigate a large shade range without first leaving the collection for a separate product page.

For your store

Give detailed shade choices a panel with room for photographs and descriptions.

Visit website

Glossier

An itemized custom skincare set

Glossier’s skincare builder separates the routine into categories and ends with a summary of the selected products and prices. Ordinary collection cards still support inline variants for someone replacing a familiar item. In the builder, the itemized summary makes it possible to check the entire routine before adding the set.

For your store

Show each step of a routine and summarize every selected item and price before adding the set.

Visit website

Glow Recipe

A short purpose beneath the product name

Glow Recipe adds brief concern or product-purpose descriptions below its branded names. Size and shade options also appear early in collection browsing. Those few words help customers distinguish formulas without opening every page, especially when a memorable name says little about where the product belongs in a routine.

For your store

Explain the product’s intended role beneath its branded name, using supported claims.

Visit website

Dieux Skin

The skincare range in one grid

Dieux Skin presents its compact skincare range in a single grid, with volume selectors on the cards. Product pages then explain formulation and packaging in more detail. The collection is small enough to compare directly, without splitting a handful of products across a deep category structure.

For your store

Use a clear single-view range when the catalogue is small, and reserve detail for the questions each product raises.

Visit website

Rhode

A routine with a named role for each step

Rhode connects its products through a numbered routine with short descriptions of each role. The selected Prep step pairs texture and application imagery with the product. Large editorial photographs establish the visual style, while the sequence explains how the items relate and when each is used.

For your store

Label the role and order of each item in a routine rather than relying on branded names alone.

Visit website

Saie

Undertones explained with portraits

Saie’s shade finder illustrates neutral, cool, warm and olive undertones with model photographs and definitions. The terms are explained where shoppers need to use them. Application content continues the instructional approach beyond shade selection, giving visitors guidance on both choosing and using the makeup.

For your store

Explain unfamiliar selection terms with examples before asking the customer to use them.

Visit website

Supergoop!

A formula table with a You Are Here marker

Supergoop! compares related formulas in aligned columns on the product page and marks the current item with You Are Here. Texture photographs and routine sections add context. A shopper can compare the same attributes across the range without keeping several pages open. The comparison presents product information; it is not independent evidence of efficacy.

For your store

Compare related formulas using consistent attributes and clearly identify the product the visitor is already viewing.

Visit website

Summer Fridays

Choose the shades inside a lip kit

Summer Fridays gives each component in its lip-kit builder a shade choice within the same flow. Elsewhere, swatches and size controls update cards directly. The builder lets a customer assemble the color combination they want, with individual selections that can be checked before adding the kit.

For your store

Show every configurable item in a kit and repeat the chosen shades in the final summary.

Visit website

Tower 28

Shade guidance followed by the product selector

Tower 28 places a working shade selector immediately after the matching guidance. Once shoppers have read the explanation, they can choose a concealer shade on that page. Relevant options also appear on homepage and collection cards, keeping the selection close to the information used to make it.

For your store

Place a clearly labeled product selector directly after the guidance that helps a customer use it.

Visit website

Nécessaire

Shop Eucalyptus or Santal across the routine

Nécessaire’s scent guide groups body products under fragrance families, including Eucalyptus and Santal. Formula information remains visible in product names and cards. Someone returning for a familiar scent can find it across several product types, alongside the ordinary route through functional categories.

For your store

Offer scent-based browsing when a fragrance spans several product categories.

Visit website

OUAI

Scent stories with their matching products

OUAI brings hair, body and fragrance products together on a scent page. Melrose Place and St. Barts each have editorial copy beside the matching range, while ordinary product categories remain available. The shared scent explains why the products are grouped together; each item still needs its own format and size label.

For your store

Group products around a shared scent while keeping format, size and use clear for each item.

Visit website

MERIT

Editorial headings and restrained product labels

MERIT pairs large serif headings with smaller, restrained product labels. Solid buttons identify purchase actions. The typography separates longer brand material from the information needed to shop, creating a visible hierarchy with relatively few colors or badges.

For your store

Make product labels and buying controls easy to distinguish from editorial headings.

Visit website

Topicals

A restock notice for the unavailable item

Topicals replaces the purchase action on unavailable products with a waitlist route. The shown dialog asks for a phone number to notify the shopper when that item returns. The request stays tied to the product they were considering, with availability stated before they try to buy it.

For your store

Show availability plainly and offer a product-specific notification option with clear consent when an item cannot be purchased.

Visit website

Beauty website design for choosing a shade

A shade name is only a starting point. Show the color on skin, describe its undertone and keep the lighting and framing consistent enough for comparison. Jones Road uses photographs across different skin tones; Saie pairs portraits with undertone guidance. These approaches give the buyer information that a photograph of the packaging cannot supply.

Separate formula choice from shade choice when both affect the purchase, as ILIA does. Keep the selected product and shade visible as shoppers move through a guide. A long quiz is unnecessary if a few labeled photographs answer the same question.

How Shopify skincare stores explain a routine

A skincare routine needs a named role for each product and an understandable order of use. Rhode presents those roles as steps, while Glossier itemizes the products inside a custom set. A customer should be able to tell what they are buying, how much of each item is included and whether the set duplicates something they already own.

Use product comparisons when formulas have overlapping names or purposes. Keep ingredients, use instructions and relevant cautions available on the individual product page. Routine labels and polished imagery describe the shopping experience; they do not establish that a formula will deliver a particular result.

Common questions

What should a beauty store show besides product photographs?

Shade descriptions, texture examples, volume, how-to-use guidance and relevant product comparisons can answer questions a pack shot cannot. Choose the information that affects the particular product decision.

Does every beauty store need a shade quiz?

No. A compact range may be better served by consistent swatches and well-labeled model photography. A quiz is useful when its questions lead to a meaningful, explainable difference in recommendations.

Do these designs prove the products work?

No. The examples show how stores present information and support shopping. Ingredient, efficacy and health claims need their own evidence and review.

What belongs in a makeup shade guide?

Show the shade on skin, describe its undertone and use consistent lighting. Explain which product and finish the image represents. If a guide recommends a shade, let the shopper see that choice in the product selector before adding it to the cart.

How should a skincare store present a routine?

Explain the role and order of each step, then link to the relevant products. For a set, list the contents and sizes explicitly. Keep individual ingredients, instructions and cautions available rather than relying on the routine name to explain every product.

Make the change in your theme

Give Fudge a goal and a reference. It suggests changes for your store, builds a draft in your Shopify theme and reports back. You review each change before it goes live.

See how the store editor works

Related collections

All collections

1.Jones Road

Shade comparisons on different skin tones

2.ILIA

Formula first, shade second

3.Kosas

A shade drawer alongside the collection

4.Glossier

An itemized custom skincare set

5.Glow Recipe

A short purpose beneath the product name

6.Dieux Skin

The skincare range in one grid

7.Rhode

A routine with a named role for each step

8.Saie

Undertones explained with portraits

9.Supergoop!

A formula table with a You Are Here marker

10.Summer Fridays

Choose the shades inside a lip kit

11.Tower 28

Shade guidance followed by the product selector

12.Nécessaire

Shop Eucalyptus or Santal across the routine

13.OUAI

Scent stories with their matching products

14.MERIT

Editorial headings and restrained product labels

15.Topicals

A restock notice for the unavailable item

Beauty website design for choosing a shade

How Shopify skincare stores explain a routine

Common questions

Make the change in your theme

Related collections

Jones Road

ILIA

Kosas

Glossier

Glow Recipe

Dieux Skin

Rhode

Saie

Supergoop!

Summer Fridays

Tower 28

Nécessaire

OUAI

MERIT

Topicals