Building the Ultimate Beauty Site in 2024, Part 1: Shopping Cart
Michael Bower
January 31, 2024
Let’s dissect shopping carts used by top Beauty brands to understand the building blocks of a world-class beauty site’s cart
Building the Ultimate Beauty Site in 2024, Part 1: Shopping Cart
Michael Bower
January 31, 2024
Let’s dissect shopping carts used by top Beauty brands to understand the building blocks of a world-class beauty site’s cart
Why the cart?
The shopping cart plays multiple roles in the purchase journey:
- Continuous Feedback: The cart travels with the customer during their site navigation, offering immediate visual feedback and maintaining a sense of ownership over their selections. This continuity is crucial since customer journeys are not linear; if customers step away to consult external sources, they can seamlessly resume their journey.
- Shortlist + Admire the Haul: The cart gives the customer a virtual holding space for comparison, reflection, and the pleasure of admiring a potential purchase in advance.
- Strategic Shopping: Customers add items to their carts, influenced by promotions and free shipping thresholds, but reassess and remove items to stay within budget, seeking the best value while managing total costs.
- Purchase Rehearsal: In the cart, customers can visually/mentally prepare to commit to their purchase. As they enter this zone, they are fortifying their buying intent and transitioning from casual browsing to a definitive checkout mindset.
- Natural Urgency Driver: Many carts today display estimated delivery times, nudging customers to purchase now in order to ensure earlier delivery. Additionally, the cart can alert customers to time-sensitive conditions like a product about to go out of stock or an offer about to expire, prompting immediate action.
Why the cart?
The shopping cart plays multiple roles in the purchase journey:
- Continuous Feedback: The cart travels with the customer during their site navigation, offering immediate visual feedback and maintaining a sense of ownership over their selections. This continuity is crucial since customer journeys are not linear; if customers step away to consult external sources, they can seamlessly resume their journey.
- Shortlist + Admire the Haul: The cart gives the customer a virtual holding space for comparison, reflection, and the pleasure of admiring a potential purchase in advance.
- Strategic Shopping: Customers add items to their carts, influenced by promotions and free shipping thresholds, but reassess and remove items to stay within budget, seeking the best value while managing total costs.
- Purchase Rehearsal: In the cart, customers can visually/mentally prepare to commit to their purchase. As they enter this zone, they are fortifying their buying intent and transitioning from casual browsing to a definitive checkout mindset.
- Natural Urgency Driver: Many carts today display estimated delivery times, nudging customers to purchase now in order to ensure earlier delivery. Additionally, the cart can alert customers to time-sensitive conditions like a product about to go out of stock or an offer about to expire, prompting immediate action.
What type of cart should your beauty brand use?
Here’s a quick refresher on common cart styles found out in the wild.
What type of cart should your beauty brand use?
Here’s a quick refresher on common cart styles found out in the wild.
1. Full-Page Cart (not recommended for most beauty brands)
Historically the norm, the Full-Page Cart directs customers to a separate page that comprehensively lists their selected items. Today, the Full-Page Cart can mainly be found on multi-brand retail sites where it’s common for multiple items to be purchased in the same order, Most beauty ecommerce sites don’t use this kind of cart nowadays, with the notable exception of multi-brand retailers, including beauty giant Sephora, whose product catalog spans hundreds of brands. DTC and brand-focused retailers don't sell multiple brands per order, and therefore don't have the same benefit from a full-page cart.
Pros:
- Plenty of room to list items
- Can easily fit additional information, upsells, etc
- Requires loading an entire separate page
- Interrupts the shopping flow
One item in the cart. Lots going on.sephora.com
1. Full-Page Cart (not recommended for most beauty brands)
Historically the norm, the Full-Page Cart directs customers to a separate page that comprehensively lists their selected items. Today, the Full-Page Cart can mainly be found on multi-brand retail sites where it’s common for multiple items to be purchased in the same order, Most beauty ecommerce sites don’t use this kind of cart nowadays, with the notable exception of multi-brand retailers, including beauty giant Sephora, whose product catalog spans hundreds of brands. DTC and brand-focused retailers don't sell multiple brands per order, and therefore don't have the same benefit from a full-page cart.
One item in the cart. Lots going on.sephora.com
Pros:
- Plenty of room to list items
- Can easily fit additional information, upsells, etc
- Requires loading an entire separate page
- Interrupts the shopping flow
2. Mini Cart
In the 00’s, the Full Page Cart was supplemented by the mini cart (sometimes termed “pop-up cart”). The Mini Cart didn’t attempt to include all cart info, instead providing a summary of cart contents in an overlay. Mini carts made it easy for desktop shoppers (remember when nobody actually purchased on mobile??) to check what they had in their cart and compare something in the cart to other products in the viewport without having to wait for an entire cart page to load. Very few beauty sites use this kind of cart today.
Mini cart found on La Mer.cremedelamer.com
Pros:
- Minimal disruption to shopping
- Opens much faster than a full-page cart
- Doesn’t really streamline the journey (actually, it adds a step)
- Too small to facilitate upsell
- Clumsy experience on mobile
2. Mini Cart
In the 00’s, the Full Page Cart was supplemented by the mini cart (sometimes termed “pop-up cart”). The Mini Cart didn’t attempt to include all cart info, instead providing a summary of cart contents in an overlay. Mini carts made it easy for desktop shoppers (remember when nobody actually purchased on mobile??) to check what they had in their cart and compare something in the cart to other products in the viewport without having to wait for an entire cart page to load. Very few beauty sites use this kind of cart today.
Mini cart found on La Mer.cremedelamer.com
Pros:
- Minimal disruption to shopping
- Opens much faster than a full-page cart
- Doesn’t really streamline the journey (actually, it adds a step)
- Too small to facilitate upsell
- Clumsy experience on mobile
3. Side Cart (Nyla’s pick)
A side cart (also called a “drawer cart” or “fly-out cart”) appears from the side of the screen without taking the user fully away from the page they’re on. As with the mini cart, side carts are sometimes configured to open on adding to cart to confirm the item has been added. Unlike the mini cart, the side cart includes all products (although they may be hidden in a scrollable panel). Advantages include allowing users to continue exploring the site without interruption, as well as offering more vertical space, making it an ideal location to showcase cross-sells, upsells, or other relevant information to enhance the shopping experience across a wide range of devices.
Pros:
- Non-intrusive
- Effective across various devices
- Potential risk of information overload (mitigate with thoughtful design)
Nyla recommendation: Side cart
The cart on Starface comes from the left, unlike most brands we reviewed. Fun and fresh.starface.world
3. Side Cart (Nyla’s pick)
A side cart (also called a “drawer cart” or “fly-out cart”) appears from the side of the screen without taking the user fully away from the page they’re on. As with the mini cart, side carts are sometimes configured to open on adding to cart to confirm the item has been added. Unlike the mini cart, the side cart includes all products (although they may be hidden in a scrollable panel). Advantages include allowing users to continue exploring the site without interruption, as well as offering more vertical space, making it an ideal location to showcase cross-sells, upsells, or other relevant information to enhance the shopping experience across a wide range of devices.
The cart on Starface comes from the left, unlike most brands we reviewed. Fun and fresh.starface.world
Pros:
- Non-intrusive
- Effective across various devices
- Potential risk of information overload (mitigate with thoughtful design)
Nyla recommendation: Side cart
What goes in a Beauty cart?
Here’s a breakdown of elements you should be able to find within a Side cart.
What goes in a Beauty cart?
Here’s a breakdown of elements you should be able to find within a Side cart.
Cart Header
The cart header is the top part of the cart and generally stays persistent regardless of the number of items in your cart. The header should identify that the user is looking at their “cart” at a glance, so keep it simple:
- Title: Reinforce the customer’s ownership of the cart, i.e. “Your Bag".
- Close button: Icon in the upper right of the cart; make sure it’s easy to spot and click (if you have a small icon, add padding). Clicking off the cart must close the cart as well.
- Promo progress: Indicate the customer’s eligibility for free shipping or other promos (most brands have free shipping for orders over a minimum amount although the minimum order varies per brand). Once the criteria has been met, congratulate them (“Free USA shipping on this order”), but don’t stop there – consider introducing multiple tiers of incentives such that a customer that meets the minimum bar is incentivized to purchase more in order to reach the next level.
Friendly cart header on Soft Services.softservices.co
Cart Header
The cart header is the top part of the cart and generally stays persistent regardless of the number of items in your cart. The header should identify that the user is looking at their “cart” at a glance, so keep it simple:
- Title: Reinforce the customer’s ownership of the cart, i.e. “Your Bag".
- Close button: Icon in the upper right of the cart; make sure it’s easy to spot and click (if you have a small icon, add padding). Clicking off the cart must close the cart as well.
- Promo progress: Indicate the customer’s eligibility for free shipping or other promos (most brands have free shipping for orders over a minimum amount although the minimum order varies per brand). Once the criteria has been met, congratulate them (“Free USA shipping on this order”), but don’t stop there – consider introducing multiple tiers of incentives such that a customer that meets the minimum bar is incentivized to purchase more in order to reach the next level.
Friendly cart header on Soft Services.softservices.co
Cart Body
The body is the main part of the cart that contains items for purchase. It should scroll if the contents are longer than the space it occupies so that customers can always see the cart header (to be able to close out at any time) and cart footer (to be able to check out at any time).
Cart Body
The body is the main part of the cart that contains items for purchase. It should scroll if the contents are longer than the space it occupies so that customers can always see the cart header (to be able to close out at any time) and cart footer (to be able to check out at any time).
Cart Items
First-up in the body, we find line items (items that have already been added to the cart).
Each line item should include:
- Thumbnail image: They’re small, so make thumbnail images count – eg highlight what’s great about the product; portrait instead of square; maybe crop in on a key product attribute. It should be linked to the product detail page (PDP) if customers click or tap on it.
- Product title: Name of the product, linked to the PDP.
- Variant title: Name of specific variant of the product (e.g. Nude / 10oz.)
- Key messaging: Other line item important to a customer, for example:
- Availability info: If an item is pre-order, or has a different shipping date.
- Personalization: If an item has personalization information such as a monogram or custom formula.
- Price: Show the total price for the selected quantity (no need for unit price). For discounted products, show the undiscounted “compare at price” (crossed-out) followed by savings percentage to highlight savings.
- Quantity selector: Include minus (-) and plus (+) buttons (icons can be small but make sure click targets are big enough for thumbs).
- Remove link: Allows customers to easily remove items from the cart. Many brands are spelling out the word “remove” vs “X” these days, presumably to prevent confusing this vs the X to close the cart.
- Subscription upsell: If the product’s subscribable, include the ability to convert one-time purchases into subscriptions (list the incentive inline e.g. “15% off”). We recommend a toggle that is easy to enable or disable; when enabled, the user should be able to select regularity.
Clean cart line item found on OneSkin.oneskin.co
Cart Items
First-up in the body, we find line items (items that have already been added to the cart).
Clean cart line item found on OneSkin.oneskin.co
Each line item should include:
- Thumbnail image: They’re small, so make thumbnail images count – eg highlight what’s great about the product; portrait instead of square; maybe crop in on a key product attribute. It should be linked to the product detail page (PDP) if customers click or tap on it.
- Product title: Name of the product, linked to the PDP.
- Variant title: Name of specific variant of the product (e.g. Nude / 10oz.)
- Key messaging: Other line item important to a customer, for example:
- Availability info: If an item is pre-order, or has a different shipping date.
- Personalization: If an item has personalization information such as a monogram or custom formula.
- Price: Show the total price for the selected quantity (no need for unit price). For discounted products, show the undiscounted “compare at price” (crossed-out) followed by savings percentage to highlight savings.
- Quantity selector: Include minus (-) and plus (+) buttons (icons can be small but make sure click targets are big enough for thumbs).
- Remove link: Allows customers to easily remove items from the cart. Many brands are spelling out the word “remove” vs “X” these days, presumably to prevent confusing this vs the X to close the cart.
- Subscription upsell: If the product’s subscribable, include the ability to convert one-time purchases into subscriptions (list the incentive inline e.g. “15% off”). We recommend a toggle that is easy to enable or disable; when enabled, the user should be able to select regularity.
Add-Ons & Promos
Experiment with changing up your promotional mix from time to time to keep things fresh and figure out what works best for your brand (highly recommended to A/B test over time). Note that the optimal mix may be different for returning customers or during times of promotion. Here are some types of promos / add-ons that are commonly found in beauty brand carts:
- Product Upsell: Suggest additional products or higher-value items based on the customer's current selections. Important: make sure these are actually based on the items in the cart, but make sure that they look visually different from normal line items so they don't get confused!
The first “Pairs well with” item we found on Jones Road Beauty is the same regardless of what’s in the cart, while the second changes depending on the cart contents.jonesroadbeauty.com
- Free Sample Selection: Allows eligible customers to select a free sample, adding value to their purchase.
- Gifting Options: Choices for gift wrapping or sending items as gifts, e.g. personalized gift notes.
- Promotional Mechanics: Many brands allow customers to enter coupon codes directly in the cart; if you find couponing to be an effective driver, just make sure this doesn’t impede users from entering checkout (e.g. consider hiding the input field behind a a “enter coupon code” link to save space and reduce the likelihood of a user leaving your site to hunt for a coupon).
View on Doré with promo and gift code entry fields open.wearedore.com
Scarcity and Urgency Messages: If a product in the cart is only available in limited stock or you have a time-bound offers, you should include messaging in the cart that emphasizes accordingly so they don’t miss their opportunity to purchase.
Doré fits in both promo and gift note entry into the cart, hidden by default.wearedore.com
Add-Ons & Promos
Experiment with changing up your promotional mix from time to time to keep things fresh and figure out what works best for your brand (highly recommended to A/B test over time). Note that the optimal mix may be different for returning customers or during times of promotion. Here are some types of promos / add-ons that are commonly found in beauty brand carts:
- Product Upsell: Suggest additional products or higher-value items based on the customer's current selections. Important: make sure these are actually based on the items in the cart, but make sure that they look visually different from normal line items so they don't get confused!
The first “Pairs well with” item we found on Jones Road Beauty is the same regardless of what’s in the cart, while the second changes depending on the cart contents.jonesroadbeauty.com
- Free Sample Selection: Allows eligible customers to select a free sample, adding value to their purchase.
- Gifting Options: Choices for gift wrapping or sending items as gifts, e.g. personalized gift notes.
- Promotional Mechanics: Many brands allow customers to enter coupon codes directly in the cart; if you find couponing to be an effective driver, just make sure this doesn’t impede users from entering checkout (e.g. consider hiding the input field behind a a “enter coupon code” link to save space and reduce the likelihood of a user leaving your site to hunt for a coupon).
Doré fits in both promo and gift note entry into the cart, hidden by default.wearedore.com
View on Doré with promo and gift code entry fields open.wearedore.com
Scarcity and Urgency Messages: If a product in the cart is only available in limited stock or you have a time-bound offers, you should include messaging in the cart that emphasizes accordingly so they don’t miss their opportunity to purchase.
Cart Footer
The footer needs to be visible any time the cart is open if there are items in it. Most brands make it sticky.
- Checkout Button: A prominent, always-visible button, prompting users to proceed to the checkout process. Make sure no banners, bars, icons or warnings appear on top of the Checkout button so it can’t be missed.
- Estimated Total: Displays the current total price of all items in the cart, excluding additional fees or taxes. Rather than “Subtotal”, “Estimated Total” implies further calculations will be required.
- Trust Signals: Icons or messages that build customer trust, like security badges or customer service guarantees. Keep it relevant – no need to include payment method names unless you're dealing with a much older audience. What do your customers value? Carbon neutral shipping - Include EcoCart. Donation to a charity - include ShoppingGives. Talk to your customers using a post-purchase survey to make sure your messaging is relevant.
- Disclaimer: Some sites include a disclaimer at the bottom of the cart. Consult your legal team for where you need to include disclaimers; they might want you to put one here and/or other places (remind them it should be brief and easy to understand so customers actually read it).
Lumin makes it impossible to miss the “Proceed to checkout” button by using a brightly colored background for the cart footer.luminskin.com
Cart Footer
The footer needs to be visible any time the cart is open if there are items in it. Most brands make it sticky.
- Checkout Button: A prominent, always-visible button, prompting users to proceed to the checkout process. Make sure no banners, bars, icons or warnings appear on top of the Checkout button so it can’t be missed.
Lumin makes it impossible to miss the “Proceed to checkout” button by using a brightly colored background for the cart footer.luminskin.com
- Estimated Total: Displays the current total price of all items in the cart, excluding additional fees or taxes. Rather than “Subtotal”, “Estimated Total” implies further calculations will be required.
- Trust Signals: Icons or messages that build customer trust, like security badges or customer service guarantees. Keep it relevant – no need to include payment method names unless you're dealing with a much older audience. What do your customers value? Carbon neutral shipping - Include EcoCart. Donation to a charity - include ShoppingGives. Talk to your customers using a post-purchase survey to make sure your messaging is relevant.
- Disclaimer: Some sites include a disclaimer at the bottom of the cart. Consult your legal team for where you need to include disclaimers; they might want you to put one here and/or other places (remind them it should be brief and easy to understand so customers actually read it).
Overall Cart Design & UX:
Once you have the basic elements in place, it’s time to make sure everything works holistically. We recommend performing a UX sense check by adding/removing a number of items to your cart on multiple devices and breakpoints. Is it easy? List and solve for the problems you find. Here are some specific things to check for:
- Update the cart fast: Ensure that your cart responds immediately on interaction by using best practice site performance strategies such as “optimistic UI”.
- Easy to see what’s in cart: It should be immediately visually obvious (from a glance) what’s already in your cart vs upsells, promos and other messaging.
- Keep branding consistency: Ensure all elements found in your cart use your brand’s colors, typography, spacing, etc to keep the experience connected, “feel right” and retain trust, especially with regard to third party messaging or widgets.
- Include trust signals that are meaningful for your customers: Don’t assume the trust signals you’ve used historically are still relevant for your customers – Read recent reviews to see what your customers have to say, and add a post-purchase survey to ask what nearly kept them from buying. Figure out how you can speak to these areas of importance in your trust signals.
- Take on the burden of social responsibility vs placing it on customers. E.g. “all packages are shipped sustainably using xxx” vs “would you like to donate $3 to make your packaging sustainable?”
- Empty starts the journey: Make sure your empty cart includes links to collections or product your customer should take a look at:
Jones Road’s empty cart is a great starting point for shopping.jonesroadbeauty.com
Overall Cart Design & UX:
Once you have the basic elements in place, it’s time to make sure everything works holistically. We recommend performing a UX sense check by adding/removing a number of items to your cart on multiple devices and breakpoints. Is it easy? List and solve for the problems you find. Here are some specific things to check for:
- Update the cart fast: Ensure that your cart responds immediately on interaction by using best practice site performance strategies such as “optimistic UI”.
- Easy to see what’s in cart: It should be immediately visually obvious (from a glance) what’s already in your cart vs upsells, promos and other messaging.
- Keep branding consistency: Ensure all elements found in your cart use your brand’s colors, typography, spacing, etc to keep the experience connected, “feel right” and retain trust, especially with regard to third party messaging or widgets.
- Include trust signals that are meaningful for your customers: Don’t assume the trust signals you’ve used historically are still relevant for your customers – Read recent reviews to see what your customers have to say, and add a post-purchase survey to ask what nearly kept them from buying. Figure out how you can speak to these areas of importance in your trust signals.
- Take on the burden of social responsibility vs placing it on customers. E.g. “all packages are shipped sustainably using xxx” vs “would you like to donate $3 to make your packaging sustainable?”
- Empty starts the journey: Make sure your empty cart includes links to collections or product your customer should take a look at:
Jones Road’s empty cart is a great starting point for shopping.jonesroadbeauty.com
TL:DR Takeaways
- Use a Side cart
- Keep things simple: Remove clutter, and only include the relevant information that drive impact for your business (good rule of thumb is 2-3 elements in the cart body). As you add new features, A/B test them to make sure you’re making the impact you need.
- Ensure you have best practices employed throughout your cart (Header, Body, Footer, Empty state)
- Consult your customers & use data to see what trust signals matter to them
- Make sure your cart has best in class performance and instant load time
- Run regular tests to ensure that no issues or bugs creep in
TL:DR Takeaways
- Use a Side cart
- Keep things simple: Remove clutter, and only include the relevant information that drive impact for your business (good rule of thumb is 2-3 elements in the cart body). As you add new features, A/B test them to make sure you’re making the impact you need.
- Ensure you have best practices employed throughout your cart (Header, Body, Footer, Empty state)
- Consult your customers & use data to see what trust signals matter to them
- Make sure your cart has best in class performance and instant load time
- Run regular tests to ensure that no issues or bugs creep in