Test different ways to reassure buyers at the cart

Secure Checkout

Think about how you might address any concerns prospective buyers might have when they’re on the cart page. What might hold them back from clicking Checkout? Add language to the page to address these concerns and/or pull in other reassuring content, like ratings and badges.


Ratings, badges, and social proof

Reminding the buyer that the products they’ve chosen are positively reviewed might reassure them that they’re making the right choice. Consider leveraging ratings or social proof that you displayed on other pages (like the PDPs).

Similarly, if you’ve added badges to some of your products to showcase certain attributes, be sure to carry them over to the cart page. Certain badges could be very useful in reassuring the buyer of why they added a product to their cart in the first place (e.g. on sale, award winner, best selling item, etc.) and encourage purchases.

Example of elements to carry over: Amazon

Amazon has a number of different badges that it promotes across its products. In this example, they have:

  • Amazon’s Choice badge – A label given to “highly rated, well-priced products available to ship immediately.”
  • Climate Pledge Friendly badge – A label applied to products that meet certain sustainability standards.

Both badges could be displayed on the associated products in the cart, as well as perhaps the nearly 5-star rating.

Ratings & Social Proof
Example of badges and applied discounts in the cart: Walmart

On the cart page, any badge attached to a product carries over from the other pages. Here, Walmart highlights that the product is on clearance with the badge and also cuts the price down on the right to emphasize how much the customer will save by purchasing this item.

Walmart Badges


Secure checkout

Some customers like to be reassured that the checkout process is safe. Consider adding verbiage or secure lock icons around the checkout button and other payment options.

Example: Secretlab, secure checkout

On the cart page, Secretlab uses the word “Securely” within their Checkout CTA text and when introducing other payment options to reassure customers that the payment process is secure.

Secure Checkout

Experiment with simplified, interactive forms

Aim to make forms on your site as painless as possible. Put yourself in the customer’s shoes. Do you like filling out forms? Most people don’t. Look for ways to alleviate friction and simplify flows so that it’s easier to complete the process.


Reduce the number of required fields

The faster a form is to fill out, the less time there is to second guess a decision. More customers are likely to fill out and submit a simple form over a complex form.

Review each question you ask in your forms and decide what is absolutely necessary. Make those fields required to fill out. Anything left over is essentially “optional” at that point and you can:

  • Remove these optional fields entirely to simplify the experience
  • Leave these optional fields, but allow the prospect to leave them blank (not required fields)
Example: Longer form vs. shorter form

These two forms are for account creation. The first is from Sephora. It’s arguably not super long, but compared to the second form from Dermalogica, you can get a sense of how much easier it would be for a potential customer to fill it out.

Many of the items Sephora asks for could be removed and asked for after the account was created.

Simplified Query Forms


Try clickable answers, instead of fields

Think outside of the form field box and inject some life into your forms. Anything that saves your prospect time and effort is going to come across as a win. Try adding elements where visitors only have to click to answer, instead of entering info.

Clickable elements

When there are only a few answers the prospect might provide, try clickable elements instead of text fields:

  • Sliders
  • Buttons
  • Images that act as buttons
  • Radio buttons for lists of items
  • Multiple choice checkboxes to select multiple items
Example: Mint Mobile (Desktop version)

To help potential customers find the right plan, Mint Mobile offers a little questionnaire that estimates the best plans to select from. Instead of form fields, they use buttons and a slider bar so that there are only two clicks to see the results.

Interactive Forms
Dropdown menus

Another option to consider is leveraging dropdown menus for selectable options. This can be useful for both a small list or a large list of options. For larger selections, dropdowns might present a cleaner design.

Example: Laseraway

In one iteration of their booking form, they’ve simplified the form by adding a dropdown menu to ask which type of service the customer is interested in.

Dropdown Menus


Try showing a progress bar on longer forms

How excited do you get about filling out a long form? Instead, try having stages where you only present a few questions and include a clear indicator of how many additional stages are left.

While the end result increases the number of clicks, there are few key benefits:

  • Each stage in the form is much smaller than the original form.
  • The smaller form sections can be much less overwhelming. Whitespace is our friend.
  • The progress bar offers a clear path to the finish line, which sets the right expectations and can seem quite reassuring.

Test out different designs to see which ones resonate most with your audience. Perhaps one version will test better with one audience and a different version will test better with the other audience.

Example progress bars:

Below are three flavors of progress bars (Policygenius, Capital One, and Debt Relief). The design should be inviting, match your brand, and include added context for the person filling out the form (i.e. “What’s the next step going to have me do?”).

Progress Bar on Longer Forms

Try a simplified, funnel version of the checkout flow

Reduce Non-essential CTAs

An important play you should consider running for the cart page and checkout flow is removing the majority of the navigation and non-essential elements from the page. Rather than just another page on the site, the cart page is more like the beginning of a funnel that guides customers to complete their purchases.


Reduce non-essential CTAs and navigation

Reflect on which interactable options on the page are required or helpful to drive the buyer to complete the checkout process. Decide what’s not useful to reaching that objective and experiment with removing those elements. 

For instance, the only interactable options on the cart page could be:

  • The Checkout CTA
  • Actions related to items in the cart (e.g. change the quantity or remove an item)
  • Optionally, suggested products to add to the cart

The normal navbar and other non-essential elements could be removed. Options for backing out could include:

  • Customers can always click the browser’s back button to return to the previous page.
  • You could alternatively add a Continue Shopping CTA to return to the previous PDP or another page (e.g. homepage)
Example: Black Rifle Coffee Company

When you access the cart, it opens as an overlay with the focus solely on the cart experience:

  • What’s in the cart and quantity options
  • Suggested products to add
  • A large Checkout CTA that contrasts with the page
  • Other elements of the page, like the navbar, are blurred out so that they’re “out of mind”

While customers can still click an X to return to the previous page, this presentation minimizes distraction and funnels the buyer’s attention towards the end goal of checking out.

Reduce Non-essential CTAs


Consider using a progress bar or collapsible sections

Breaking up long processes into bite-sized chunks, with clear expectations on the finish line can help drive buyers to convert. While it might seem like it’s adding more complexity to your checkout process, in some scenarios it can actually make the process seem much less overwhelming and far more simple.

Add some color and fun design elements to present a cleaner, more visually appealing experience.

Progress bar

Try having stages where you only present a few questions and include a clear indicator of how many additional stages are left. While the end result increases the number of clicks, there are few key benefits:

  • Each stage in the flow is much smaller than the original version.
  • The smaller sections can be much less overwhelming. Whitespace is our friend.
  • The progress bar offers a clear path to the finish line, which sets the right expectations and can seem quite reassuring.
Example: Laseraway

Laseraway offers booking appointments online for in-person sessions. In one iteration of their booking form, they ask which service the customer is interested in and you respond by clicking a button containing the answer and a related icon. This really masks the fact that this is a form and is also a fun way to encourage engagement. At the top of the form is a progress bar that lets the customer know how many steps they have before reaching the end.

Progress Bar Design
Collapsible sections

If you want to keep all of your flow’s content on one “page,” an alternative option to consider is grouping questions under collapsible sections. As the customer fills out each section, you could have a “Next” button that expands the next section or you might have the section auto-expand.

Example: L.L.Bean (Desktop version)

As the customer fills out each section, the previous section collapses, and the next section expands to reveal additional questions.

Collapsible Sections

Experiment with how you present promotions and discounts

Promo Hero Image

The product details page is a good place to highlight the benefit of any free shipping, related promo offers, and discounts that your site offers. Each of these represents an investment you are making to motivate your customers to behave in a certain way. This is especially true when the offer is tied to the number of items purchased or the value added to the cart.

Some options you might highlight, based on the choices you’ve made in your business:

  • Free shipping for all orders, orders above $XX, or if XX items are added to the cart
  • Subscribe to auto-refill and get XX% off / free shipping
  • Save XX% when you buy the set
  • Buy one get one free
  • Free samples

Consider testing any of the following approaches to see what resonates with your buyers.


Leverage empty space above or below the page’s content

You could run a thin banner at the top or bottom of the page with your content. This approach is less intrusive and, while informative, does not distract away from the product you’re showcasing.

Example: Philz Coffee

This banner runs at the top of the page, below the navbar.

Thin Promotional Banner


Incorporate the promo in a hero image

You could showcase a new hero image containing the promotion. This will certainly catch the attention of your buyer as they view the product images for the first time.

Example: Komodoty (Mobile version)

The first thing you see on the PDP is this hero image, which showcases both the product and the promotion.

Promo Hero Image


Utilize the real estate around the Add To Cart CTA

You could add a new section near the Add To Cart button when it seems appropriate. This might be most appropriate for content around shipping, subscriptions, and auto-renewals. This context-sensitive option should only grab the customer’s attention at the point of purchase.

Example: Sephora

Sephora reminds you how much more you need to spend before free shipping is included by showcasing that info to the shipping option selection beside Add To Cart.

Add To Cart CTA
Example: Kate Somerville

You have the option to purchase the product as a one-time delivery or to set up recurring deliveries. The recurring option includes a discount and free shipping, so that info is showcased alongside the selection option beside Add To Cart.

Kate Somerville Discounts


Weave it in line with the product details

Another option to consider is to include the promo content in line with your product details. This runs the risk of it getting lost in other content on the page, but is potentially less intrusive.

Example: Apple

Here, Apple offers to give you money towards the purchase of your new product with eligible trade-in items. They list the promotion with the product info and note it again near the price.

Apple Product Promotion


Capture the buyer’s attention with a pop-up

If you really want to grab your customers’ attention, you could use a pop-up screen to inform them of your promotion. This will certainly not go unnoticed, but it is the most intrusive option.

You might also consider adding an option on the page so that if the customer dismisses the pop-up, they can still reengage with it if they choose to at a later time.

Example: Hemline

When you arrive on the product details page, a pop-up appears and takes over the page. You can engage with it or close the promo and proceed to view the page.

Pop-up Banners


Remind the buyer with a progress bar in the cart

The cart page is a great place to remind and promote free shipping, a gift, or other promotional content after a certain dollar value or number of items is reached. Test different placements, verbiage, and designs for the customer’s progress towards achieving the offer.

  • Placement – You might try various placement options, but some common places include a pop-up, near the checkout button, and above the items in the cart.
  • Design – Consider leaning into something more visual, like a progress bar, and perhaps an “Achieved” visual treatment for when they reach the goal.
Example: Sephora – Textual reminder

Sephora offers a textual reminder above the cart list that shows how much is left to spend before reaching free shipping.

Progress Bar in the Cart
Example: Caudabe – Progress bar

Caudabe offers the same kind of textual reminder, but also adds a nice progress bar as a visual indicator. The visual aid can encourage additional purchases with customers who are inclined to partake in gamification and unlocking achievements.

Cart Page Promotions

Experiment with personalized product recommendations

Related Item Recommendations

Some buyers visit a website with a vague idea in mind of what they’re looking for but are open to suggestions. Surfacing context-sensitive products to a casual shopper can lead to additional purchases.

Consider blending typical recommendations, like best-sellers, with suggestions based on what buyers engage with, like a wishlist, recently viewed products, and items abandoned in the cart. Additional considerations:

  • Items in the same price range as the items currently in the cart
  • Products related to an ad that the customer clicked on to visit the site
  • Previously purchased items that make sense to rebuy (e.g. acne cream)
  • Complimentary products to what’s in the cart (e.g. batteries for a flashlight)
  • Items from categories the visitor has previously viewed a lot or purchased from


Homepage and category pages

Reflect on which kinds of recommendations would have the most impact on these pages. Recommending items abandoned in the cart on the homepage, for instance, might be very impactful for a returning visitor.

Recently viewed or previously purchased

It can be helpful to remind customers what they previously viewed or purchased.

  • Previously viewed – A window shopper might want to look at the product a few times before they buy it. A reminder at the right time might be what drives them to click Add to cart.
  • Previously purchased – We can be creatures of habit. We tend to repurchase what we like.

Test out different placements on the page to see what resonates. One option to strongly consider, though, is adding a section at the bottom of the category page for recently purchased and/or viewed products from that category.

Recommended for you

Another option to consider is showcasing a subset of a category’s products that are related to the customer’s previous purchases from this category. This subcategory could feature:

  • Products that other customers also bought
  • Products that complement previous purchases
  • Products that are similar to previous purchases

You may also include a filter or sort option on the category pages to show a recommended list of products.

Example: Amazon

Below product listings on the category pages, Amazon presents a few subcategories, like this “Recommended for you” section. These recommendations are based on your past purchases and viewing habits to pique your interest.

Personalized Product Recommendations


Product details page recommendations

Consider including a section on the product details page that points to other products that customers who viewed this product were also interested in. These might include:

  • Related items from the same category
  • Complementary items (e.g. batteries for a battery-powered product)
  • Items abandoned in the cart
  • Items other customers also/ultimately purchased after viewing this product
Example: e.l.f. Cosmetics

When viewing a particular face hydration cream, e.l.f. Cosmetics suggests that it “pairs well” with two complementary products. This kind of advice might be exactly what some customers are looking for and they may buy all three products.

Related Item Recommendations
Try different placements on the page

The goal of the PDP is to drive buyers to click Add to Cart, so you don’t want the page to be too overwhelming. Consider areas of the page that might lend well for recommendations that will both make an impact but not be too distracting.

Some examples may include:

  • Alongside the product info (e.g. a tab or collapsible section)
  • Below the product info in its own horizontal section
  • To the side of the product in a vertical sidebar
Example: Amazon

Below each product’s details, buyers can see recommendations within carousels that span the page’s width for:

  • “Frequently bought together”
  • “More items to explore”
  • “Products related to this item.”

Here, additional dog chew toys from the same category as a product are listed:

More Items to Explore


Last-minute purchase ideas on the cart page

Physical retail and grocery stores often have a lot of little odds and ends on display at the checkout line. These are like “last-minute” additions you might want to toss in with your purchases that you didn’t even know you needed. For instance, you might see cold drinks, candy bars, batteries, headphones, or phone chargers.

You can emulate that approach on the cart page. Consider adding a section below the items in the cart for things like:

  • Items on the customer’s wishlist
  • Recommendations based on what’s in the cart (e.g. “pairs well with” or “what other people also bought”)
  • Promotional content (e.g. Bestsellers, time-sensitive sales, etc.)
Example: Best Buy, similar items

In this example, an Apple iPad is in the cart. Best Buy suggests that people also buy the Apple Pencil and a cover for the device. Buyers can click Add to Cart without leaving the cart page.

Last-minute Purchase Ideas
Example: Sephora, wishlist

Similarly, Sephora offers a “Recommended for you” section but also has a section showcasing your wishlist items (called “Your Loves”). Buyers can click Add without leaving the cart page.

Recommended for You

Experiment with scarcity and time-sensitive offers

Cart Page Product Scarcity

A great play that many marketers run is to lean into the scarcity of a product or promotion. When there are only a few items left or a short time left to act, a buyer that is on the fence may be more inclined to make the purchase.

The fear of missing out and the desire to own something that is in short supply can be strong levers to pull for buyers.


Be truthful

It’s important to be honest about scarcity and not manufacturing something that can lead to distrust. An average consumer will often lose trust in a company if they feel like they’re being misled.


Sample topics you might leverage

What you highlight will vary based on what your site offers, but a few common examples include:

  • Stock – “Order now, only 5 left in stock!” or “5 available to preorder”
  • Time left – “Only 5 hours left for 15% off” (or free shipping, buy one get one free, etc.)
  • By date – “Preorder by June 5th for this offer” or “Buy in next X hours to receive by Thursday”
Example: Amazon, scarcity

When there are only a few items left in stock, Amazon showcases this fact with the number of remaining items directly above the Add to Cart CTA.

  • The large, bright red font stands out on the page.
  • Anyone glancing at Add to Cart instantly realizes the product is in short supply.
Amazon Product Scarcity
Example: Newegg, time-sensitive offer

Newegg uses the space above Add to Cart to highlight:

  • When a product is on sale
  • How much you’ll save
  • How many hours are left in this sale

Similarly, the bright contrasting color lets buyers instantly know that if they ultimately want to buy this item but wait more than 8 hours, they’ll have missed out on 41% savings.

Newegg Time-sensitive Offer


Remind the buyer on the cart page

The cart page can be a good place to remind customers of product scarcity or time-sensitive offers. If there is any hesitation in purchasing an item, the reminder might push a buyer over the edge to make the purchase.

Test different ways of presenting this reminder (e.g. designs, placement, and text), for instance:

  • Try different designs and textual iterations near the product name/description within the product listing.
  • Try repurposing the context as a card, banner, or visual element near the product listing or by the checkout CTA.
Example: Amazon

Amazon includes a note of the scarcity in red below the product name and description. They also include “order soon” language to encourage customers to click Checkout promptly.

Cart Page Product Scarcity

Test different automatic product refill options

Kate Somerville Auto Refill Options

Some sites offer an automatic refill option for products that are regularly repurchased by the same customer when they run out (e.g. skincare products or coffee). If your site offers an auto-refill option, consider the following ideas to present the option in a way that’s not overwhelming and encourages engagement.


Reflect on what is presented in the initial view

Experiment with which options you present on the product details page to see what resonates most with your buyers.

Which option is auto-selected?

This can be the most impactful choice you can make when it comes to how you present auto-refill. Try running a variation where the automatic renewal option is preselected instead of the one-time purchase option. Have another variation with the one-time purchase preselected.

Renewal options

Try different preselected renewal times (e.g. every 2 months vs every 3 months).

CTA Verbiage

Try different verbiage around what the option is called. Sometimes one phrase might make sense internally but not resonate quite as well with customers.

Some examples of renewal options might include:

  • Subscribe
  • Subscribe & Save
  • Deliver every [2 months]
  • Auto replenishment

Some examples of individual purchase options might include:

  • Single purchase
  • One-time purchase
  • One-time delivery


Keep it simple

Keeping it simple is often the best approach to designing the page. One area where this can make a big difference is how you present auto-renewal options. You don’t want to overwhelm the customer while they’re trying to decide if they want to make a purchase.

Subscription information

If there is more context you want to convey to your customers, you consider placing it behind an info icon or a “learn more” link, where the info appears if the customer clicks or mouses over the object.

Example: e.l.f. Cosmetics

They present a simple option that just says “Free Shipping with Delivery Every: [3 months]” followed by an “?” Info icon.

When you click the icon, additional info pops up:

Free Shipping with Delivery
Reveal renewal options

There are often multiple decisions a customer must make with automatic renewal:

  • Should I automatically renew this purchase?
  • How frequently should it automatically renew?
  • How many items should be sent to me at that time?

The biggest decision is whether they want to enable auto-renewal or not. Consider hiding other options until they make that decision so as to not overwhelm them unnecessarily.

Example: Amazon

Amazon hides the additional options and much of the text until you select auto-renew.

Auto-renew Options


Promote the benefits

Customers are more likely to take advantage of something if they gain some benefit from doing so. If you offer a discount, free shipping, or another promotion along with automatic renewals, make sure to prominently display these benefits.

  • Consider using a different size/color font or using images/icons to make it pop.
  • Consider indicating how easy it is to cancel or pause (e.g. “If you need to skip a month, it’s easy to pause or change frequency”). Let buyers know that they’re in control and they don’t have to worry about getting stuck in a commitment.
Example: Kate Somerville
  • There’s not much text around the option, making it easy to focus on the benefits.
  • The first line covers the discount and free shipping.
  • The next line eases the customer’s mind, indicating they can cancel if they want.
Kate Somerville Auto Refill Options
Example: Amazon

The benefits are highlighted in a few ways:

  • A visual indicator shows that you save 5%
  • A future 10% discount is teased
  • The discounted price and amount saved is shown
  • No hidden fees and easy cancelation are reassured
Amazon Auto Refill Options


Repeat the option on the cart page

If you’re offering the auto-refill option for a given product, the cart page is a good place to remind customers of this option. They might change their mind and turn this feature on at this point or want to adjust the frequency before they checkout.

Example: Kate Somerville

The Auto Replenishment feature is listed, similarly to how it was on the product details page. When selected, the price for the item is visibly discounted and additional info is listed below the listing to indicate that when you click the checkout button, the subscription is enabled.

Cart Page Auto Refilling

Simplify your product details page text and layout

Product Information

Keep it simple and easy to scan. Most customers don’t want to wade through a lot of text. The customers that do want to dive deeper into the details won’t be dissuaded by clicking or tapping to reveal more info. Rather than showcasing full-length textual descriptions that fill the page, consider the following options.


Expandable descriptions

One way to keep the page decluttered is to only show a summary of the description (or just the first few lines) followed by a “learn more” style link. The link could either:

  • Have the full description expand in place
  • Jump to another part of the page, below the fold, where the full description is

When you provide just an initial summary, instead of the full description, you present a cleaner design that lends well to scanning. Too much info at once can be overwhelming.

Example: Kate Somerville

In this example, the summary links to the product info down below the fold of the page.

Product Information


Collapsible sections

You can use tabs or accordions to separate commonly themed info into smaller bite-sized sections that are more easily consumed and lets customers find what they’re interested in faster.

  • Leverage this format to include sections for other things on the page, like reviews.
  • Test different colors, shapes, fonts, etc. to see what stands out and resonates well
  • Make sure the designs are easy to interact with (e.g. bigger buttons on mobile)
Example: Sephora

In this example, Sephora uses tabs on desktop and accordions on mobile to break up the text and make it easier to scan. On mobile, they also collapse the main description, showing customers just the key info up-front and allowing them to view more info by tapping read more.


Collapsible Content Sections
Product Details Page on Mobile


Image focused

Another approach to consider is removing the majority of text entirely from the initial view. The page would focus on bigger product images, presented in a gallery. The majority of the visible text above the fold would consist of your Add to Cart CTA, navigation, and key info. Any other details would be hidden away from the initial view.

Any product info that you want to present could be moved:

  • Within an expandable section under a “more info” / “details” link.
  • Behind a rollover attached to the image or a CTA.
    – For instance, if a customer mouses over the element, the text would appear in an overlay.
  • Below the fold, so that it only appears when customers scroll down.
Example: Apple

Apple’s website is very visual, often taking a minimalist approach to verbiage. In a way, they rely on product images to sell the products. The iPhone 12 PDP, for instance, essentially presents you with the product image and a blue Buy CTA.

  • The initial view begins with an animation of the phones spinning.
  • After the animation ends, a product image remains with 4 CTAs at the top: Overview, Tech Specs, Buy, and offers.
  • If you scroll down, summarized product info begins to appear.
  • Customers can scroll further or click Tech Specs to dive into the product details.
Apple iPhone Product Page

Experiment with what you display for product listings

Product listings

When you’re viewing a list of products, think about what you might want to see yourself. What are you looking for when you’re browsing through the list? The amount of content you display per product and how that content is presented can help or hurt your chances of engagement, depending on what your audience is interested in viewing.



Depending on the product, you’ll often want to prominently feature product images. Larger hero images help customers quickly scan the page for products they may be interested in.

  • Test different images that highlight the product in different ways or angles
  • Test different ways of presenting the product (e.g. product by itself vs. in use)
  • Test larger images, both literally and perhaps zoom in on the product
  • Test adding another image behind the existing product image that appears when the customer mouses over it.
Example: Dermalogica, 2nd image in rollover

Dermalogica utilizes rollovers to show an alternate image on their product listings. When the customer mouses over the base image, the secondary image is shown.

These added images often provide more context around the consistency of the product or the product in use, which can help the customer visualize how they might use the product.

Featured Product Image



Customers often rely on social proof to determine if the product is worth obtaining. When a product is highly rated, it alleviates some of the buyer’s concerns. When presenting ratings, consider making them prominently visible.

Experiment with the following options to make them stand out:

  • Size – Test larger font/shape sizes to avoid it getting lost against other elements.
  • Color – Same color as your font vs. something with more contrast to make it pop.
  • Type of rating – Stars vs. Numerical rating (e.g. 10/10).
  • Shape – Instead of a star, try something unique to your site.
  • Treatment – Consider testing drop shadows, outline color, background color, etc.
  • Placement – Try different locations within the listing (e.g. above the image vs. below the price).



Adding context-sensitive badges to your product listings can help a buyer decide, at a glance, which products they might want to investigate further. For instance, a regular shopper of your website might want to know what’s new. A “New” badge on products in a category would allow such a buyer to quickly know what’s been added as they browse.

Some badges might include:

  • New
  • On sale
  • Selling fast
  • Eco friendly
  • Best-sellers / popular
  • Awards the product has earned
  • Trusted third-party source featured this product
Example: e.l.f. Cosmetics

e.l.f. Cosmetics features badges overlaid on their product listings for a number of different callouts. In this example, they highlight “Best Sellers” and “New” products. Customers can glance at the product listings and instantly know what’s new and what’s currently trending.

Product listings


Product details text

You don’t want to overwhelm the category page with text. Think about what’s important to display and what isn’t. You can always provide more information on the product details page.

Simplify the text – Consider reducing what info is shown and simplifying how you say it.

  • Try shorter phrases and words with fewer characters
  • Only list what you consider essential details (e.g. perhaps just the rating and price)
  • If something applies to all items listed, move it to another location like a banner
Example: e.l.f. Cosmetics

Each entry indicates that if you spend:

  • $15+ you get free shipping
  • $25+ you get 2 free gifts

This repetitive info is wasting space that can be filled with other products. It should be moved to a banner or only added to the product details page.

Product Details


Consider leveraging rollovers to display text

Rollovers can be a good way to simplify the page while still presenting context-sensitive info to customers. Customers would see several larger product images at first glance, but the added info appears when they mouse over an image.

Examples of content you might present in a rollover:

  • Display the price
  • Display the Add To Cart button
  • Display a summarized product description
  • Display additional contextual info
Example: Dermalogica (Mockup)

Dermalogica leverages rollovers to present alternate images to buyers.

In this mockup, you can see how the rollover could also be used to present product info and/or CTAs.

Dermalogica Quick Shop CTA


Leverage filters or subcategories

One option to consider is adding additional filters or subcategories for certain product attributes, rather than listing the attributes beneath the product.

Example: Stacy Adams

On their suits category page, they have a filter for suite size but they also list the size below the rating. They could just leverage the filter or break these out into subcategories.

Filters & Subcategories

Experiment with your category page layout

Category Page Layout

Reflect on which options and info your buyers might be most interested in as they browse your category pages. Shoppers browsing these pages often have a vague intent in mind but aren’t quite sure what they want yet.


Try different layouts and focal points

Experiment with how the page is laid out and what is emphasized to see what your buyers will engage with most.

Consider what your customers might be most interested in, such as:

  • Seeing large product images
  • Seeing more products on the page at first glance
  • Seeing more product information (i.e. textual details)

Some areas you might experiment with:

  • Header – The area above your product list might be used to promote a product, offer, or discount. Make sure it’s not so large that customers don’t see products at first glance.
  • Grid view vs. list – Grid view is useful to show a larger number of products on the page at once with fewer details. Consider a list view if you need to show more info.
  • Grid size – Depending on your offerings, customers like larger images to visually browse the category without clicking into each product. If your products are more visual, try a grid with larger images and fewer products across. If your products are less visual, consider having more products listed with smaller images.
  • Filters and sorting – Keep filters and sorting options sticky so that they move with the page if the customer scrolls down so that they’re always accessible.
  • Items per page vs. endless scroll – Items per page allow you to have an additional footer for options. You might try adjusting how many items are listed per page or having additional products load as the customer scrolls down.
  • Footer – Below the products, you might consider having another section to showcase special offerings, related categories, or promoted products.

Keep it simple:

If you have a large number of products or categories, sometimes too much choice can be overwhelming and runs the risk of no choice being made at all. Brainstorm ways you might simplify what you’re presenting to your customers.


Example: Grid vs. List

In this example, we compare the key differences between a grid view and a list view. Amazon implements a grid view in most cases, whereas Best Buy favors a list view.


Amazon is focused on showing customers more products at once. The grid view allows Amazon to show 4 products in the same space that Best Buy shows 1 product, while essentially showing the same size images.

Category Page Layout
Best Buy:

Best Buy is focused on providing customers with enough details, including pickup and shipping info, that they might click Add to Cart without needing to view the product details page to learn more.

The list view affords Best Buy more space to present this information upfront.

List View Layout


Example: Related pages in the footer

Sephora leverages the space below the category pages to add a “Related Pages” section. Customers who aren’t able to find what they’re looking for can jump to other categories or subcategories that might yield better results for them.

Related Pages