10 Design Examples of Quick View for eCommerce Listing Pages

What is Quick View:

Quick view is a button that users can click on to view more information about a product.

Quick View Example

Why Offer it?

A quick view feature enhances the user experience because they can access more detailed information about a product without being taken to a new page. Although it won’t guarantee a better conversion rate, it will save the user time. With this additional level of information the user can determine if the product meets their needs and if it is worth their time to investigate further by then clicking through to the individual product page. It’s like being able to browse through a store, picking up items that interest you as you go and then being able to make a final decision once you get to the checkout.

Related: 5 Reasons Your Customer Experience Sucks

Where to display it?

Some sites have the button always displayed, while others only display on hover of a product. The latter eliminates clutter on the page, and provides the option only when it is needed; however, depending on the experience of your user with eCommerce shopping, having quick view always present, may limit confusion. If the area to hover is too small your users may miss out completely on the quick view option. The link can be placed anywhere within the individual products area but tend to be on the bottom half. Ensure the button is large enough so that the user does click the product image and link to it’s individual page, unless that’s their desired option.

 sandals and necklaces

What Information you Should Include?

The goal of the quick view is to increase sales by offering product details with ease. Make sure the design makes it easy to get an overall impression of the product at a glance.

Product Selection: Price, colour, size, quantity

Social Media Icons: Facebook, Twitter, Pinterest, email, etc.

Purchase: Add to Cart, Find in Store, Add to Wishlist

Ratings: Ratings and reviews

Images: Multiple high quality images, ability to zoom

Description: Product title, 1-3 sentence description

More: Link to the products single page view

Related: Design Conventions Are Not The Enemy

10 Examples of Quick View Modal Design

1. Steve Madden

stevemadden

 

2. Lush

lush

3. Fossil

fossil

4. Myntra

myntra

5. Jean Machine

jeanmachine

6. Aveda

aveda

7. Williams-Sonoma

williams-sonoma

8. Kiehls

kiehls

9. Sephora

sephora

10. Forever 21

forever21

Our Favourites:

Steve Madden and Myntra do a great job with their quick view modals. With the products displayed in a large area that takes up the full width of the screen, it’s got everything you need to make a decision about purchasing without having to reload the page. Images can make or break the sale so here’s your chance to get multiple images in front of your user. Provide high quality photographs at different angles and scales. Adding videos to the content along with your images can help give a better story about your products.

Design Tips:

  • Darkening the background or making the modal box almost full screen really helps to cut out the noise of the products in the background, helping the user focus more on the product they are looking at.
  • Having the modal also function as a slider makes the experience like looking carefully through a rack of clothes. You can give your attention to each product and quickly move along to the next if it’s not of interest.
  • Make the close sign very visible so users aren’t tempted to hit the back button.
  • Using contrasting colours for buttons to make the call to action noticeable and effective.
  • Making the modal large enough to fit all of your content, means the user doesn’t have to scroll. They may not see it or look further so try to limit this affect if possible to make all information easily accessible. If you need to display a large amount of additional text such as the Williams-Sonoma example, they organize the content by adding tabs for Items Selection and Content.
  • Offering social media links provides another opportunity for customers to share your products with their community.

Related: 7 Ways To Increase Sales With Existing Customers