How many times have you visited a website and decided to leave because you didn’t like the design and copy, or because the pages took too long to load?
Chances are, you've done this many times.
Businesses have only a few seconds to capture a visitor's attention online, which is why it’s important for brands to ensure their websites are optimized for an easy and valuable shopping experience. If you’re in the midst of creating or updating your website, the best way to get started is by comparing the top brands' sites in your industry.
For all the beauty brands out there, here are the best beauty websites—specifically their product pages—for online makeup stores, skincare stores, self-care brands and more for you to get inspired from.
1. Doe Lashes
If you’ve heard of Doe Lashes before, you know their branding game is strong. Full of vibrant colors and bold typography, it’s easy to spot something that’s from Doe Lashes without even seeing the brand’s name—and the product page is no different.
In addition to the soft sunset-looking pink background (which blends into purple as you scroll), many of the products have bright blue, pink and yellow backgrounds that nicely contrast each other as you browse.
Source: Doe Lashes
When you hover your cursor over the products, the images automatically change so you can see a different angle of Doe’s lash tools and kits, or you can view what a certain lash set looks like on a real pair of eyes. This lets customers see if a product matches the look they’re going for without having to waste time clicking on the unique page.
When it comes to the products you recommend to customers, personalization is important. Doe Lashes used an ecommerce quiz to collect 3X more emails and drove an 11% increase in AOV with personalized recommendations. If you want to see how they did it, you can check out their story here.
2. 100% Pure
From a design standpoint, 100% Pure’s pages are simple, and the image backgrounds are consistent with every product. Where 100% Pure’s product page gets interesting is how they let customers know when an item is out of stock. For some items, customers can click “notify me,” so the brand collects email opt-ins to reach out to customers who are interested in purchasing that product when it’s back in stock. This is a smart way to grow your email list in a natural way.
Whenever there’s a product that’s been mentioned by a well-known company or recognized with an award, 100% Pure addd the certification in the corner of the product’s image to build credibility.
Source: 100% Pure
3. Jeffree Star Cosmetics
Not only is Jeffree Star Cosmetics another great example of a brand with strong branding (because of the name behind the brand), but Jeffree’s personality shines through with every part of the website and its products—not just with the design.
Source: Jeffree Star Cosmetics
If you look at the names of the products on the page, you’ll see items called “Thirsty Palette,” “Conspiracy Palette,” and “Cremated Eyeshadow Palette.” The product names are interesting because Jeffree names many products based on personal events. For example, the Conspiracy Palette was created in collaboration with another popular YouTuber, Shane Dawson, who’s well-known for his conspiracy theories. Each shade in this palette is named after something that Jeffree and Shane share a love of, too.
Jeffree Star’s product page shows the importance of ensuring your website design, copy, product naming and messaging are all aligned with your brand’s voice. I’d rate this product page example 10/10 Thirsty Eyeshadow Palettes.
4. JLO Beauty
It’s no surprise that JLO absolutely crushed the aesthetic of her website’s product pages (and other pages too). Considering the brand is all about getting the “JLO glow” that she’s so well-known for, it was a good design idea to give the product page elements and images the same glowy effect.
The brand also bundles together products that work well as a routine, helping customers choose items for a specific look. Customers can choose to purchase the “Star Power Duo,” which is meant to introduce you to JLO’s look. If you don’t want to purchase both items, they’re also listed below the bundle to easily be purchased separately, too.
Source: JLO Beauty
5. Fenty Beauty
A common constraint customers have when purchasing beauty products online is knowing what colour or shade a product actually looks like outside of the bottle. One element of Fenty Beauty’s product page to combat this is the alternating images when you hover your cursor over top of a product.
Specifically for the lipstick section, the image changes to show you a swatch of what the colour looks like—this is important for increasing the purchase rate of your products since customers will feel more confident to buy the lipstick when they have a better image of the shade.
Source: Fenty Beauty
Products with awards and mentions also have the certification in the corner of the product image, and there are reviews listed underneath for customers to see how satisfied other shoppers have been.
6. INH Hair
Just as the name suggests, INH Hair sells hair products, such as extensions, styling tools, wigs and accessories. Many of the products feature before and after photos, so browsers can easily see the results of using one of INH Hair’s clip-in ponytail extensions.
Source: INH Hair
At the top of the ponytail page, INH Hair states, “Over 100,000 ponytails sold.” By telling customers they’ve sold over 100,000, they're increasing brand and product credibility, which could reduce the lead time for a customer to decide to buy one of INH Hair’s ponytails.
On the bottom-right corner of the page, INH Hair has a live chat support widget, powered by Gorgias. The live chat feature floats in the same corner from page-to-page, so whether you’re looking at extensions, styling tools or a specific product, you can easily ask questions or get support.
Do you want to see a list of over 200 product pages from Shopify brands? Download the full PDF here.
7. Kylie Cosmetics
If you have any interest in the beauty world, then you know about Kylie Cosmetics. This brand was founded by the American TV personality, Kylie Jenner, and became popular for people hoping to achieve the same plump lips that Kylie is well-known for.
On the product pages, new products are simply marked with a pink lip-shaped sign on the top-right corner of every photo, so customers don’t ever have to miss getting their hands on something recently released. Every product also has its reviews listed underneath, and considering Kylie’s products sit around the 4- to 5-star rating these reviews build product credibility.
Rather than getting an evasive pop-up on your screen, when there’s an offer the product page features a pop-up on the left-hand side that follows you as you browse through the product catalogue.
Source: Kylie Cosmetics
8. ColorPop Cosmetics
ColorPop cosmetics lives up to its name; it’s a pop of color! The name of the brand is already well-known in the direct-to-consumer world, and the product pages on their site only enhance that strong brand image.
Source: ColorPop Cosmetics
The product pages on ColorPop's site are nicely organized for consumers. This is important because ColorPop sells a large variety of beauty products, from eyes, lips, face and makeup tools, there’s a lot for customers to sort through. When you click into one product category, like “eyes,” you’re brought to another set of categories that break it down further, such as eyeshadow palettes, lashes, mascara and eyeliner. For a brand that sells many products, keeping your product pages organized makes the experience for your customers easier.
For product pages with a lot of glam, interactive images and high-quality design, ColorPop’s website also loads fast, and we all know the importance of a speedy website.
9. Soko Glam
When it comes to consistency, Soko Glam is the queen of the game. Their product page offers a clean aesthetic with white backgrounds and product images with soft blues, pinks, yellows and greens. However, one notable difference from Soko Glam’s product pages compared to other brands is the ability to “heart” a product.
Source: Soko Glam
In the top-right corner of every product image, you can click the heart to add that product to your wish list. Then, on the right side of the navigation menu, you can click the heart to see all of the items you’ve added to your wish list. Not only is this helpful to come back to products you know you’re interested in purchasing later, but you can also share your wish list via email, Facebook or Twitter.
10. Muddy Body
Sometimes, a simple and clean design is all it takes to have a successful product page, which is exactly what I like about Muddy Body’s. Not only is the page consistent with how the products are displayed, but the pages load extremely fast when clicking from product-to-product and category-to-category, so customers never have to feel the frustration of a page that takes forever to load.
Source: Muddy Body
on the bottom-right corner of the page, Muddy Body has a Facebook Messenger widget where you can engage with the brand to ask questions or get matched with a product through an interactive conversation. When you start the chat, Muddy Body’s Messenger bot asks you questions about what you’re looking for, your skin type, skin concern and more. At the end, it matches you to a full skincare routine and shares a 20% off discount code. With this Facebook Messenger bot floating around on all of the product pages, Muddy Body is engaging with customers in a more personalized way by giving them 1:1 assistance with finding a skincare solution.
Source: Muddy Body
11. Ella + Mila
Ella + Mila has a simple product page design with a Facebook Messenger chatbot in the corner of the page. In Ella + Mila’s conversation, they offer customers a discount for engaging with them on Messenger, and then the customer can type in questions such as “What’s your shipping policy?” to get an immediate response.
Similar to the Messenger chat, Ella + Mila also has a loyalty program widget on the bottom-right corner of the page—powered by Smile—where customers can choose to sign up for the brand’s loyalty program on any product page they’re browsing. Giving customers the ability to join Ella + Mila’s loyalty program from any page helps the brand increase marketing opt-ins from customers signing up to get rewards.
Source: Ella + Mila
The dynamic photos on Ella + Mila’s product pages are a great addition for customers to see how a nail color looks on a real set of nails. As you hover over each product, the image changes to show a model’s hand with the nail color painted on it to give customers a look at what the colour looks like outside of the bottle.
12. Wakeheart
Getting into more of the self-care side of the beauty industry, Wakeheart sells a line of fragrances and collaborates with well-known influencers, like the Dolan twins. On the bottom-right corner of every product page (and other pages), customers can interact with Wakeheart directly through the on-site Facebook Messenger chat. When you start the conversation, Wakeheart’s bot will ask you what you’re interested in and shares more about the products they sell.
Additionally, underneath each product, Wakeheart clearly identifies that they offer consumer-friendly payment options; customers can choose to purchase items in four payment installments versus paying full price right away. 53% of consumers claim they would spend more if payment installments were available at their favorite store, so it's a good idea to let customers know when you offer it.
Source: Wakeheart
13. Vanity Planet
Vanity Planet’s product pages feature an easy filtering system that slides from the right side of the page. Without taking up too much space, consumers can sort through products by price, color and collection to find exactly what they’re searching for. And the best part? It’s speedy. It takes no longer than 1 second for the page to update once you apply your filters.
Source: Vanity Planet
When looking under a specific product category, customers can easily add any item to their cart without having to click into the unique page. If Vanity Planet doesn’t have an item in stock, it changes the CTA to say “sold out” or “pre-order,” giving customers clear expectations about what’s currently available.
14. Function of Beauty
Function of Beauty offers a different experience than most beauty brands because its products start with a quiz. Since the success of Function of Beauty’s products is based on matching customers with a personalized shampoo and conditioner bundle to help combat their hair concerns, it makes sense why products aren’t shown until customers build their “hair profile” through the quiz.
Before taking the quiz, customers are able to see reviews and read the product information and ingredients. Sharing this information upfront is important for customers to decide if they want to take the time filling out their hair profile to get their personalized product.
Source: Function of Beauty
15. Get Beast
There’s a common theme with brands in this list showing their reviews under every product on the main pages—I’ve already stated this is a good way to build brand credibility and trust. But, one notable difference on Get Beast’s product pages is their category icons underneath the product photo.
You can see it in the image below, but each product has one or a few icons underneath that identify what category it fits under. For example, the little bottle underneath the “balancing mask” means it falls under the skincare category. The “YAWP Face Wash” on the right-hand side has three icons, which means it falls under the shave, shower and skincare categories. These icons are a helpful way for customers to click into a category to search other similar products for their routine.
Source: Get Beast
Are you interested in the top beauty trends driving success for leading brands? Download our 50+ page guide about turning your store browsers into buyers here.
16. Glossier
Glossier is another big name in the DTC beauty category. Well-known for its strong community, over the years, Glossier has built connections with customers using brand merch, grant programs, blogging and more.
Aside from their A+ community game, Glossier offers a helpful experience for customers by including a category page called “shop our sets.” Under this category, Glossier offers customers bundles of items that would go well together—from skincare, lip kits, to brow kits and eye kits, customers can easily purchase an entire routine instead of having to track down each individual item on their own.
Source: Glossier
17. Curlmix
Similar to Glossier, Curlmix has put together product bundles on their website for customers to find a haircare routine with the click of a single button. However, one difference on Curlmix’s product pages are the banner photos that explain the products, information about them and how to use them. With every product page you visit, the banner changes to match the category the customer is looking at.
Source: Curlmix
18. Spectrum
Spectrum’s product page follows all of the ecommerce beauty brand best practices. The design is clean, the product images are consistent and there are ratings and reviews listed under every product. Two key parts of Spectrum’s product page experience are the loyalty program widget and the “as seen in Glamour” icons. The “Glamour” icon is one of the essential credentials in the beauty industry to build credibility and trust with consumers.
Source: Spectrum
Spectrum’s loyalty program is called “Spectrum Collections,” which is also powered by Smile Rewards. With this program hovering on the bottom-right corner of every product page, customers can easily join the “Spectrum Squad” to start earning points. This is a powerful strategy to increase retention and community.
19. Spongelle
Spongelle is a self-care and body-care brand, selling exfoliating and moisturizing shower sponges infused with body wash. The most notable feature on their product page is the interactive video content as the product page banners. Before customers view the products, they get to see a high-definition video clip of people using the products listed in that category, so customers can understand what the products look like and how to use them.
Source: Spongelle
Another feature that’s part of Spongelle’s product pages is the currency change. How often have you been disappointed after adding items to your cart only to find out they’re in a different currency than you originally thought? To avoid that disappointment, Spongelle lets you change the currency from the moment you land on their website, so you can trust the prices you see as you browse.
20. Green People Organic Lifestyle
One helpful part of Green People Organic Lifestyle’s product pages is the facts and tips they share in the banner photos. For each product page and category, there are three different banner photos that share information about why that product is important, tips on self-care and even customer reviews. For some product categories, the banner photo includes a link to an article where a customer can learn more about a topic, like eczema for babies, for example.
Source: Green People Organic Lifestyle
Use these inspiring examples to build beautiful product pages
As important as your brand’s homepage is, your product pages are equally important. In addition to speed and design, there are several other elements that we’ve pointed out from this list that are useful strategies for driving sales, community and retention.
Now that you’ve seen the best online beauty stores and their product pages, What product pages stood out to you the most? Do you like the idea of a Messenger chat? A loyalty program? Or maybe your update is as simple as adding customer reviews for browsers to see. These are the top beauty trends we're seeing on website product pages. By following these best practices, you’ll have beautiful product pages, too.
