Demac Media Demac Media Brand Demac Media Brand



10 Design Examples of Quick View for eCommerce Listing Pages

Timer Icon 4 Mins

Design & User Experience

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



2. Lush


3. Fossil


4. Myntra


5. Jean Machine


6. Aveda


7. Williams-Sonoma


8. Kiehls


9. Sephora


10. Forever 21


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:

Related: 7 Ways To Increase Sales With Existing Customers

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information