| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | AB | AC | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Status | Guideline name | Short description | Full guideline link | Examples | A/B testing results | Your evaluation: | Priority: | Created at: | Updated at: | Additional Notes | ||||||||||||||||||
2 | Product page guidelines | 89 | *RPU - Revenue Per User uplift | You can sort based on the update date | |||||||||||||||||||||||||
3 | #1: Do you have descriptive product titles? | Product titles provide all the required information about your products and help users to perceive it better. Descriptive product titles help customers to find exactly what they're looking for. | How to + Examples | 0 | Good | High | 15.7.21 | 15.3.25 | |||||||||||||||||||||
4 | #2: Do you use the standard layout of the product page? (Desktop and Tablet view) | Users are used to the standard layout of product pages where the product gallery is placed on the left, and the product overview (title, price, product variants, CTA-button, etc) is placed on the right. Don't break this UX pattern. | How to + Examples | 8 | Bad | Medium | 15.7.21 | 15.3.25 | |||||||||||||||||||||
5 | #3: Do you have enticing main image? | One of the most important elements on product pages is the main image. Main image can entice users or turn them away, as it's one of the first touchpoint and it helps them decide whether to look further. | How to + Examples | 4 | π 26.43% RPU π 23.49% RPU | Medium | Low | 15.7.21 | 15.3.25 | ||||||||||||||||||||
6 | #4: Do you have gallery with different product photos? | Product gallery is another critical aspect of product page. If your main image entices your visitors, the next thing that we want users to do is to browse other product images. We are selling our products using images. | How to + Examples | 5 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
7 | #5: Does product gallery show thumbnails of other available images? π FREE DETAILED GUIDELINE | If product gallery contains 2+ images, you should clearly show that to motivate users to browse product images. The more they engaged, the easier to persuade them to buy. | How to + Examples | 7 | π15.45% RPU π 8.13% RPU π 7.83% RPU | Not set | Not set | 15.7.21 | 16.3.25 | ||||||||||||||||||||
8 | #6: Does product gallery has actionable elements to engage with it? | Product image thumbnails motivate users to browse product images. But there is another important element that also motivates them to do that - arrows near main image: it works like a call-to-action to start browsing images. | How to + Examples | 6 | π 15.45% RPU π 8.13% RPU π 7.83% RPU | Not set | Not set | 15.7.21 | 16.3.25 | ||||||||||||||||||||
9 | #7: Does product gallery support swipe actions on Mobile devices? | Mobile traffic attributes for about 60-70% of Revenue in US ecommerce, which means that product gallery slider should be optimized for native actions on Mobile devices - swipe to switch between images or screens. | How to + Examples | 0 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
10 | #8: Do you have images for different product variants? | Your products can have different colors, materials and other attributes. That's why it's important to have product images for all available product variants, so users can see how different product variant looks. | How to + Examples | 5 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
11 | #9: Is product variants selection integrated with product gallery and shows images of chosen product variant? | When users engage with product variants (colors, materials, type, etc.), they should be able to see how a variant looks in the product image gallery. As a result, it will be clear for them that what they see is what they get. | How to + Examples | 3 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
12 | #10: Does your main CTA-button is the most prominent element on the screen? | The most desired action on product pages is when users add product to cart. That's why prominent CTA is one of the most essential parts of a product page. Without a CTA, the user experience dead ends when shoppers find the product they want to buy | How to + Examples | 5 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
13 | #11: Does copy of CTA-buttons clearly explain what happens when you click on it? | Copy of each CTA-button on the website should clearly explain what will happen after the click. If your button is called Add to Cart, then when you click on it, the cart should open, and not the checkout page. Conversely, if your button is called Buy Now, then it is logical that the checkout page will open. | How to + Examples | 3 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
14 | #12: Is a product's price visually prominent and easily scannable? | For many shoppers, the price is the primary driver in terms of whether or not they'll purchase. If they can't easily find the price, they'll probably become wary and shop somewhere else. | How to + Examples | 7 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
15 | #13: Does price of a product placed near CTA-button? | When shoppers are ready to move to the next step of the purchasing process (i.e., Add product to cart), they should clearly understand the price of the product they are going to buy without the need to make unnecessary actions. | How to + Examples | 4 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
16 | #14: Do you show all additional charges near price? | If you have any additional product-specific (i.e. additional shipping charges because of the product size) or country-specific (i.e. VAT) charges, it can become really unexpected if you show it only on Checkout process. It will be really frustrating for shoppers. | How to + Examples | 1 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
17 | #15: Do you show how much shoppers save if you have products on sale? | If you put items on sale, be clear about the sale price and the discount. You should show much users will save due to that discount, both in percentage of savings and how much money they will exactly save. | How to + Examples | 5 | Not set | Not set | 15.7.21 | 16.3.25 | |||||||||||||||||||||
18 | #16: Do you show shipping information (delivery to shopper's location, costs, time)? | Based on Baymard's research, 64% of users look for shipping information on the product page. They want to know if you deliver to them, how much shipping will cost and how long it will take. That's why it's important to show that information on product pages. Ideally, you need to place that information close to the ATC section where users decide if they want to add this product to cart or not. | How to + Examples | 6 | π 27.5% RPU | Not set | Not set | 15.7.21 | 16.3.25 | ||||||||||||||||||||
19 | #17: Do you show information about Returns, Refunds and Money Back Guarantee? π FREE DETAILED GUIDELINE | If shoppers understand that they don't have any risks when purchasing your products, then it will be much easier for them to complete order. If they understand that they can easily get a refund and return or exchange an item, it can decrease the fears associated with shopping on your website. | How to + Examples | 5 | π 9.64% RPU | Not set | Not set | 15.7.21 | 16.3.25 | ||||||||||||||||||||
20 | #18: Do you show express payment options that are widely-used by your target audience? | In the last years, it has become popular to include express payment buttons (Paypal, Amazon, Google Pay, Apple Pay) on different steps of the funnel (product page, cart page, at the beginning of the checkout process) These buttons simplify and speed up the purchasing process. Also, such buttons like Paypal or Amazon (especially when talking about US stores) add some sort of trust to the store. But be careful with it, I highly recommend A/B testing it, because it can negatively impact performance in many cases. | How to + Examples | 2 | π 19.2% RPU | Not set | Not set | 15.7.21 | 16.3.25 | ||||||||||||||||||||
21 | #19: Do you provide installments payments and promote it well? | In recent years, offering payments in installments has become popular. You can see this option in nearly every online store today. It allows shoppers to purchase expensive items without making a large one-time payment. This is especially important for stores that sell mid-range and high-priced products. | How to + Examples | 6 | π 5.63% RPU | Not set | Not set | 15.7.21 | 17.3.25 | ||||||||||||||||||||
22 | #20: Do you show customer reviews widget? | Customer reviews play a significant role in e-commerce because many consumers rely on product reviews and customer comments to decide whether to buy the product. Therefore, it is important to have a separate section with reviews to show potential buyers how previous customers liked your product. | How to + Examples | 3 | Not set | Not set | 15.7.21 | 17.3.25 | |||||||||||||||||||||
23 | #21: Do you show product ratings (stars) based on customer reviews on the top part of the page? | If you already collected any reviews for a product, you should actively promote that type of social proof higher on the product page (usually, it's placed near the product title or somewhere at the top of the page) | How to + Examples | 4 | Not set | Not set | 15.7.21 | 17.3.25 | |||||||||||||||||||||
24 | #22: Do you use selectors (buttons) for product variants (colors, size, etc.) instead of dropdown lists? | The better UX of your product pages, the easier it will be for shoppers. The easier for shoppers, the better the conversion rate will be. If you can eliminate unnecessary actions, you should do that. When you use dropdown lists for product variants, you force users to do unnecessary actions. | How to + Examples | Not set | Not set | 15.7.21 | 22.9.22 | ||||||||||||||||||||||
25 | #23: Do you use minus/plus selectors for the quantity feature instead of the dropdown list? π FREE DETAILED GUIDELINE | Again this recommendation has the same logic as the previous one. It just improves the UX and decrease the number of actions that shoppers will have to do to change quantity of items they want to purchase. | How to + Examples | Not set | Not set | 15.7.21 | 22.9.22 | ||||||||||||||||||||||
26 | #24: Do you provide users with a size chart if you sell clothes? | If you are selling products of different sizes (e.g., clothes), it's critical to provide users with size charts. If shoppers are not sure if it's the right size for them, they will have a lot of hesitation in the purchasing process. | How to + Examples | Not set | Not set | 15.7.21 | 22.9.22 | ||||||||||||||||||||||
27 | #25: Do you show relevant units for products where information about dimensions (size, weight, lengts, etc) is important and do you show dimensions at all? | If you are selling products where information about dimensions is important, then there is a high chance that shoppers will want to see it before making the purchase decision. If you hide this information in the depths of the page, then it will complicate the buying process for some customers | How to + Examples | Not set | Not set | 15.7.21 | 15.7.21 | ||||||||||||||||||||||
28 | #26: Is information about a product easy to read: does the font-size big enough? | If it's easy to read product information, then your shoppers will clearly understand if your product is right fit for them. But if it's not, then it can create a lot of unnecessary concerns in purchasing flow. That's why it's important to double check your product pages from this perspective both for big (Desktop) and small (Mobile) devices. | How to + Examples | Not set | Not set | 15.7.21 | 22.9.22 | ||||||||||||||||||||||
29 | #27: Is product information easy to read and scan? | Font size is not the only thing that impacts product readability. The way how you structure (the length of paragraphs, subtitles, bullet-lists, white-space, etc) all product information also significantly impacts it. | How to + Examples | Not set | Not set | 15.7.21 | 22.9.22 | ||||||||||||||||||||||
30 | #28: If you offer free shipping (of free shipping after the threshold), do you proactively promote it? | Free shipping is a good advantage in e-commerce. Ecommerce giants like Amazon made consumers used to such shipping conditions, so if you have free shipping, you should wisely and proactively promote it on the product pages (and on all other pages of the website) to make sure 100% of users know about it | How to + Examples | π 7.84% RPU | Not set | Not set | 15.7.21 | 22.9.22 | |||||||||||||||||||||
31 | #29: Do you show any relevant social proof about your products or company? | Consumers heavily rely on social proof when shopping online. While customer reviews are just the most popular example of social proof that is widely used in e-commerce, there are many other social proof types (external reviews, certificates, press references, awards, etc.) that you can also display on product pages to convince users to buy your products. | How to + Examples | Not set | Not set | 15.7.21 | 23.9.22 | ||||||||||||||||||||||
32 | #30: Do you explain benefits (not just features) in detailed product descriptions? | What are features? Features are defined as surface statements about your product, such as what it can do, its dimensions and specs and so on. What are the benefits? Benefits show the end result of what a product can actually accomplish for a customer. Benefits, not features - this is what really helps to sell a product to a customer. When you are selling any product, you are actually selling certain experience: your product can simplify life, save time or money, make people beautiful or healthier, etc. | How to + Examples | Not set | Not set | 15.7.21 | 23.9.22 | ||||||||||||||||||||||
33 | #31: Do you have a short product description with the key benefits of your product? | There are different types of customers. One needs to read all the detailed information about the product, while others need to read just a few main short sentences about its benefits. That's why it became quite popular for e-commerce stores to have short product descriptions with key benefits/features on the top part of product pages. | How to + Examples | π 6.9% RPU π 9.4% RPU | Not set | Not set | 15.7.21 | 23.9.22 | |||||||||||||||||||||
34 | #32: Is the Add-to-cart process have a proper UX for high conversion rate? | Different options are possible here. For stores with several products, you can direct the user directly to the cart or checkout. For stores with a large catalog, you can only show confirmation that the product has been added so that the user can continue shopping. But this is where many shops make serious mistakes. Let's take a closer look at how to optimize this step. | How to + Examples | π 11.05% RPU | Not set | Not set | 15.7.21 | 23.9.22 | |||||||||||||||||||||
35 | #33: Do you have cross-sell or/and upsell sections (relevant for stores with many related / alternative items)? | Ecommerce stores can increase AOV by cross-selling and up-selling additional items. Amazon is the best example - they have up to 9 sections that promote different or complementary products on product pages. Even though you are not Amazon and don't have so many SKUs, repeated customers, and so much data about previous purchases, you can leverage that too by adding cross-sell section(s) on product pages. | How to + Examples | π 6.27% RPU π 9.43% RPU | Not set | Not set | 15.7.21 | 23.9.22 | |||||||||||||||||||||
36 | #34: Do you use urgency elements? (Relevant for stores with discounts, special offers, next day shipping) | If you give your shoppers time to think, they can delay making purchases. Sometimes the delay will be short. Sometimes it will be long, so they even forget about the product and the offer altogether. A very effective way of persuading users to make a purchase right now is by creating a sense of urgency. If you have any discounts or special offers in your store, you can always make them time-limited and notify users about that. That way, you will add a sense of urgency. | How to + Examples | π 24.6% RPU π 29% RPU π 12.4% RPU | Not set | Not set | 15.7.21 | 23.9.22 | |||||||||||||||||||||
37 | #35: Do you use scarcity elements? (Relevant for stores with limited stock or limited offers) | When a product or service is limited in availability, then it becomes more attractive to shoppers. When they understand that it's limited and others also desire it, it creates fear of missing out, which persuade shoppers act fast. Human psychology is such that we are prone to purchase something when we know that it's the very last one or that a special offer will expire soon. | How to + Examples | π 17.45% RPU | Not set | Not set | 15.7.21 | 23.9.22 | |||||||||||||||||||||
38 | #36 Do you display information about model's size on the product images? (Relevant for clothing stores) π₯ NEW | It's important to show the size and dimensions of the model. This way, users can better imagine how it will fit them. Bonus: Allowing users to choose different models in various sizes will greatly improve their experience. Example - Aloyoga | β | β | 15.3.25 | 15.3.25 | |||||||||||||||||||||||
39 | #37 Do you display product images as a grid gallery on Desktop & Tablet devices? π₯ NEW | Based on observations from successful e-commerce stores and my own A/B tests, this is the best gallery layout for desktop devices, especially when combined with a sticky right section, ensuring that both images and key information are constantly visible, so users do not need to click through the images in the standard gallery. The main image can either be full-width, or the entire gallery grid can be displayed in two columns. It works very well for visual products (clothes, home decor, accessories, etc) Example (2 columns grid for the whole gallery) - Puravida Example (1 full width image + all other in 2 columns) - Casper Mattress | π 31.54% RPU (CI #702) | β | β | 15.3.25 | 15.3.25 | ||||||||||||||||||||||
40 | #38: Don't you display both sticky and static ATC buttons simultaneously on the screen? π₯ NEW | When you display both sticky and static ATC buttons at the same screen, at first, it takes place on the screen (especially on Mobile devices) distracts users more from other elements, and push them to purchase (which will likely mean higher drop-off on the next steps of the funnel) instead of browsing the product information and making more rational decision (which in the end provides higher conversion rate on the next steps of the funnel) Example - Puravida Mobile Product page | β | β | 15.3.25 | 15.3.25 | |||||||||||||||||||||||
41 | #39: Do you promote quantity discounts if users can buy more than 2 products? π₯ NEW | Quantity discounts can effectively motivate users to purchase more than one product, thereby increasing profit per order. You can promote this by offering extra discounts when multiple products are bought or by providing one product as a gift, similar to Puravida's 3+1 offer on select items. Example - REMFIT Pillow pages Puravida (3+1 offer) | β | β | 15.3.25 | 15.3.25 | |||||||||||||||||||||||
42 | #40: Do you have quick navigation on the product page (applicable for complex and expensive products with extensive product information, mostly on Desktop & Tablet view)? π₯ NEW | When you have a lot of information on product pages, particularly when selling complex or expensive products with many different specifications and sections, quick navigation helps you find this information quickly and move through it easily. This allows you to jump between the sections that are important to you without having to scroll through the entire page. Example - B&H Casper Mattress | Need to add results of the A/B test | β | β | 15.3.25 | 15.3.25 | ||||||||||||||||||||||
43 | #41: Do you display that product is in stock and ready for ship (if applicable)? π₯ NEW | Many stores today offer products that are out of stock and not available for immediate shipping, resulting in longer delivery times compared to those that can ship products right away. If this applies to your store, it's important to inform your customers, as this could be a significant advantage in attracting customers seeking quicker delivery. You can achieve this with just one clear line of text at the top of the product page. (i.e. "In stock. Ready for ship today", with green color and some noticable icon) Example - Plantify | β | β | 16.3.25 | 16.3.25 | |||||||||||||||||||||||
44 | #42: Do you use infographic-style images to show your products and explain key benefits and advantages of it right in the gallery? π₯ NEW | Very good example - Huel bundle Example - Product images on Casper | β | β | 17.3.25 | 17.3.25 | |||||||||||||||||||||||
45 | #43: Do you have dedicated "What's included section if you sell products in bundles? π₯ NEW | This section can be a simple text or include both text and images. While adding images makes it more appealing, it is slightly more complex to set up. Place this section close to the Add to Cart button, preferably above it. This way, users can understand exactly what they are purchasing before deciding to add it to their cart, leading to better clarity and improved performance. Good Example - Huel Average example - Brooklinen | β | β | 17.3.25 | 17.3.25 | |||||||||||||||||||||||
46 | β | ||||||||||||||||||||||||||||
47 | β | ||||||||||||||||||||||||||||
48 | Category page guidelines | β | |||||||||||||||||||||||||||
49 | #1: Do you have clear and understandable category names? | Simple and clear category names always usually better than creative one. If you get creative with naming your categories, it can be confusing for shoppers, as a result they will not understand which products you sell there. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
50 | #2: Do you use relevant category page design (Grid view or list view)? | If product images are the main factor in decision-making process of your target audience (i.e. jewelery store), then it's better to use grid view. If you are selling complex products with specific attributes (i.e. cameras, computers, printers, any complex devices), specs (i.e. power, battery, dimensions, etc) are much more important than visuals here, so it's better to use list view. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
51 | #3: Do you have consistent style of images? | Consistent style of images (type of images, background on images, white-space around products, size of products, angle of photos) decrease cognitive load and improves scannability of a product list. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
52 | #4: Do you have consistent size of product cards? | If you are using grid view on category page, keep the size of product items consistent. If you decide to change the size of some products (to highlight them among other products), it will make the interface more complex for perception, it will be harder for shoppers to scan the whole product list. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
53 | #5: Do you have good structure for the information in each product item in the list? π FREE DETAILED GUIDELINE | All product items should have the same information (title, price, reviews, short description, etc). There should be enough white-space between these entities to make it scannable, readable and easy to compare between products in the list. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
54 | #6: Do you show the number of products available in a category? | Usually a page can't show all the products that there are under a certain category. But every category page should show the total number of available products so shoppers will clearly understand how many options are available. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
55 | #7: Do you offer filters? (relevant for stores with many products) | The more products you have in a category, the harder it will be to choose something, because it creates paradox of choice. So if you have many products on your store, then you must have filters on category pages. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
56 | #8: Do you show only relevant filters for each category? | Different categories of product require different filters. Make sure that you don't show irrelevant filters on different categories. | How to + Examples | Not set | Not set | 15.7.21 | 5.10.22 | ||||||||||||||||||||||
57 | #9: Are the most used filters placed at the top of all filters? | Most likely some filters are used more often than others, so you need to place them at the top of all filters to make it easier and faster for shoppers to find and use them. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
58 | #10: Does filter section prominent enough? (relevant for stores with many products where users prone to use filters) | If you want people to use filters, they must first notice them. When you hide filters under a button or if filters section is very obscure in visual hierarchy, no one will use it. If you want to encourage shoppers to use filters to find products faster, you have to make it prominent enough. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
59 | #11: Do you allow users to select a few filters at once? | In many cases, shoppers will want to apply multiple filters at once. And this is logical: they want to see only those products that match their desires and needs. If you don't allow to select multiple filters at once, shoppers will have to use them separately, as a result this will seriously complicate the search for the right product. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
60 | #12: Do you use relevant design (left or top bar) for filters section? | It depends on the number of filters. If you have a lot of filtering options, then you have to place filters on the left sidebar (most preferred option). If you have just a few filtering options, then you can use top horizontal bar above the product list. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.21 | ||||||||||||||||||||||
61 | #13: Do you auto-update product list when a filter is selected? | Don't make shoppers to do unnecessary actions. Apply filters and update product list right after any filter option was selected. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
62 | #14: Do you show relevant selectors for different types of filters? | General rule for UX of filtering options is to use checkboxes, so once user click on a checkbox, product list is automatically updated based on chosen filtering option. But there are also some cases when it's better to use other types of selectors instead of checkboxes. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
63 | #15: Do you offer sorting? | For some shoppers it's very important to be able to sort products based on attributes like price (low / high), highest rated items, best selling items, new items, discount amount, etc. This helps them to find the right product much faster. That's why it's important to have sorting feature on product categories. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
64 | #16: Do you show sorting feature on the top right corner above product list? | The logic here is the same as in the recommendation to place filters in the left sidebar - shoppers are used to it, they know where to find it. That's why it's good for usability. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
65 | #17: Do you have CTA-button to motivate users go further into the funnel? π FREE DETAILED GUIDELINE | CTA buttons perform a two faced task: guide the shoppers what's needed to be done next and taking them down the conversion funnel. That's why you should consider adding CTA-button into product category listing that will motivate users to click on it. | How to + Examples | π 5.06% RPU π 6.33% RPU π 8.51% RPU π 28.13% RPU | Not set | Not set | 15.7.21 | 6.10.22 | |||||||||||||||||||||
66 | #18: Do you show prominent product titles? | Product titles are the 2nd most important entity in product listings after images. Product titles help shoppers to understand if it's the product that they are looking for. So make sure that product titles are prominent, clear and contains all needed information. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
67 | #19: Do you show short important information about products in product title or below it? (relevant for stores with spec-driven products) | When you are selling spec-driven products (usually it's technical goods), it's important to show the most important information about them on product categories. It's really useful for shoppers, because they will not have to go back and forth between categories and product pages. It will make easier and faster to find right product. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
68 | #20: Do you show product price? | The price of a product should always be shown right on category listing pages. It's the best place to reveal pricing without asking users to necessarily visit product pages. And it's really critical information when buying products. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
69 | #21: Do you show how much shoppers save on products with discounts? | If you have any discounts on a product, it makes sense to show that on category pages too. You should display a price before and after discount, amount of savings and the percentage of savings. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
70 | #22: Do you show product ratings? π FREE DETAILED GUIDELINE | As well as the price, it is important to display the product ratings. Product reviews and product ratings play an important role in customers' decision making. That's why that information should be displayed on product categories. | How to + Examples | π 27.26% ECR π 10.75% ECR | Not set | Not set | 15.7.21 | 6.10.22 | |||||||||||||||||||||
71 | #23: Do you show all available variants of a product? | If you are selling products with different product variants, you must show that there are different variants available. If you don't show that information, shoppers will never know that a product has different attributes like color, type, etc. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
72 | #24: Do you show badges on product image thumbnails? | While browsing the sea of products on your site, shoppers can get lost in all of the options. Adding "Best Seller", "New", "Trending" and other badges can help your visitors make decisions faster. | How to + Examples | Not set | Not set | 15.7.21 | 6.10.22 | ||||||||||||||||||||||
73 | #25: Do you show relevant number of products per row? | The more details should be visible in the product pictures (or the more product information you want to show), the larger the size of product cards should be and, accordingly, the less products will be visible on a single row. For visually driven products it's better to have 3-4 items in a row, while for technical products it can be decreased to 1-3 items per row. | How to + Examples | π 13.48% RPU | Not set | Not set | 15.7.21 | 7.10.22 | |||||||||||||||||||||
74 | #26: Do you show additional product pictures on mouse hover? (relevant for desktop devices only) | The more product information you show, the easier it will be for shoppers to choose the right option. That's why it's useful to show the second product picture when shoppers hover over product items. It will reveal more visual information about a product. | How to + Examples | π 11.79% ECR | Not set | Not set | 15.7.21 | 7.10.22 | |||||||||||||||||||||
75 | #27: Do you show additional product details that are important for target audience? | Additional details in a product list can give shoppers the information they need to understand the differences between products and compare it to find what they need. Think about what do they need to know to make a purchasing decision. | How to + Examples | Not set | Not set | 15.7.21 | 7.10.22 | ||||||||||||||||||||||
76 | #28: Do you show trending and best selling items on the top of category page by default? | While browsing the sea of products on your site, shoppers can get lost in all of the options. By showing trending and best selling items on the top of product list you simplify the decision making process for them. Don't forget to highlight that these items are trending or best selling otherwise no one will never know it. | How to + Examples | Not set | Not set | 15.7.21 | 7.10.22 | ||||||||||||||||||||||
77 | #29: Do you show the top-rated products on the top of category page? | People are more likely to purchase products with high ratings and many reviews than products with zero reviews or bad rating. Also showing good ratings and big number of reviews creates confidence in your products, store and brand. In the end, it makes product selection easier. That's why it's important to place top-rated products on the top. | How to + Examples | Not set | Not set | 15.7.21 | 7.10.22 | ||||||||||||||||||||||
78 | #30: Do you highlight special offers and discounts? | It always makes sense to entice customers with a great deal, especially at the current time when discounts rule the ecommerce world. If you are offering a discounts, have special offer on all products, include that information either on a product image (like a badge) or in product details. | How to + Examples | Not set | Not set | 15.7.21 | 9.10.22 | ||||||||||||||||||||||
79 | #31: Do you show any urgency and scarcity triggers? | Want to create more demand for your products? Showcase that by adding urgency and scarcity triggers. This can mean stating that time is running out to get an offer, writing that something is in "limited supply," or that there are only a few products left. Due to that customers will be more likely to purchase from you right now. | How to + Examples | Not set | Not set | 15.7.21 | 9.10.22 | ||||||||||||||||||||||
80 | #32: Do you have special category pages ("Best Sellers, "New", "Sale", etc) to take users into a shopping mode | Such pages is a great starting point for shopping for those who do not have a clear understanding of what they want. Pages with sales are very attractive because shoppers can save money there. Best sellers are good because we are social creatures and love to follow the crowd. New products are especially relevant for repeated customers. | How to + Examples | Not set | Not set | 15.7.21 | 9.10.22 | ||||||||||||||||||||||
81 | #33: Do you have page description section on the bottom for SEO? | Include a short general description of each category in the bottom of it, so it will not distract users, because this is mostly for the search engines. | How to + Examples | Not set | Not set | 15.7.21 | 9.10.22 | ||||||||||||||||||||||
82 | #34: Do you show what's included in the bundle in the product card on the category page? (If you sell products in bundles) π₯ NEW | Bundles tend to cost more than individual products. Therefore, when you promote them on your category pages, which helps increase Average Order Value (AOV) and Revenue per order, it's crucial to show clearly what items are included in the bundle. This way, customers will know exactly what they are paying for. You can achieve this by adding a dedicated "What's included" section on the product card or / and by using a main image for the bundle that showcases all the products included. Example - Brooklinen | Not set | Not set | 17.3.25 | 17.3.25 | |||||||||||||||||||||||
83 | #35: Do you have a gallery slider in the product cards that allows users to easily browse through all images of a product directly on the category page? π₯ NEW | If you don't have this feature, then users will need to visit each product page to see all product images, and in case of clothing stores, it can take dozens (or hundreds) of extra actions, until they find what they need. But if you have gallery sliders in each product card on the category page, they can do it right there, without moving back and forth between category and product page.s Example - MAVI | Not set | Not set | 17.3.25 | 17.3.25 | |||||||||||||||||||||||
84 | #36: Do you have image thumbnails for the most popular product types on the broad category page? π₯ NEW | If you have a dedicated section at the top of all category pages with images and text labels for the most popular product types, it significantly improves the navigation through the category for users, mostly because it's easily scannable. And the faster users find a desired product, the higher chance that they will buy it. Example - Tezenis | Not set | Not set | 17.3.25 | 17.3.25 | |||||||||||||||||||||||
85 | β | ||||||||||||||||||||||||||||
86 | β | ||||||||||||||||||||||||||||
87 | Cart page guidelines | β | |||||||||||||||||||||||||||
88 | #1: Do you have persistent shopping cart that saves the information for the customer's next visit? | Many buyers begin the purchase process, but do not finish it in one session, especially Mobile users when they use a smartphone and often interrupted by various distractions. As a result, if you don't have a persistent shopping cart, such buyers will have to start shopping from the beginning next time. | How to + Examples | Not set | Not set | 15.7.21 | 15.7.21 | ||||||||||||||||||||||
89 | #2: Do you show all needed information about products in the cart: title, image, chosen variant, quantity, price? π FREE DETAILED GUIDELINE | It's good practice to include all important information about the product that is added to cart to let users know for sure that this is exactly what they want to buy. | How to + Examples | Not set | Not set | 15.7.21 | 27.9.22 | ||||||||||||||||||||||
90 | #3: Do you show the right product image for the chosen product variant? | If added to cart products have different product variants, let's say different colors, product image thumbnail should always show the exact product variant that was chosen by a shopper. | How to + Examples | Not set | Not set | 15.7.21 | 27.9.22 | ||||||||||||||||||||||
91 | #4: Do you automatically update the cart when shoppers change the quantity of an item? | If you don't do that, each time when someone wants to change the quantity, they will have to click on the "Update cart" button, which is actually unnecessary if you have automatic updates. "Edit cart" and "Update cart" buttons are just examples of bad UX of shopping carts where users have to make unnecessary actions. | How to + Examples | Not set | Not set | 15.7.21 | 27.9.22 | ||||||||||||||||||||||
92 | #5: Do you show selectors for the quantity feature? | Here is how bad UX looks: If you don't have selectors and don't automatically update the cart, then users will have to do 3 unnecessary actions: Click on quantity input field β Write desired quantity of items β Click on the "Update cart" button. | How to + Examples | Not set | Not set | 15.7.21 | 27.9.22 | ||||||||||||||||||||||
93 | #6: Is the main CTA-button the most prominent element on the screen? | The most desired action on the cart page is when users proceed to Checkout. That's why prominent CTA is the most essential part of the cart page. Without a CTA, the user experience dead ends when shoppers are ready to proceed to checkout. | How to + Examples | Not set | Not set | 15.7.21 | 27.9.22 | ||||||||||||||||||||||
94 | #7: Does a copy of the main CTA-button clearly explain what will happen when you click on it? | The main rule for copy of each CTA-button on the store is that it should clearly explain what will happen after the click. | How to + Examples | Not set | Not set | 15.7.21 | 4.10.22 | ||||||||||||||||||||||
95 | #8: Do you show alternative payment options below main CTA-button? | In recent years it became very popular to add express checkout buttons (Paypal, Amazon, Google Pay, etc) on the Cart pages of e-commerce stores and there are a lot of obvious reasons why that happened. Firstly, it greatly simplifies the checkout process for those shoppers that already used to pay with these payment options (usually, contact forms on the store are auto-populated based on the data that is already saved in the account in a payment system). | How to + Examples | Not set | Not set | 15.7.21 | 4.10.22 | ||||||||||||||||||||||
96 | #9: Do you show images of all available payment methods? | When shoppers are already on the cart page, they think about whether to proceed with checkout process. Showing them that they can pay with different payment methods can nudge them to the next step and reassure that they will be able to pay for the goods. | How to + Examples | π 5.45% RPU π 5.2% RPU | Not set | Not set | 15.7.21 | 4.10.22 | |||||||||||||||||||||
97 | #10: Do you clearly show that shoppers can pay with installments and how much will it be per month? (if you have such payment option) π FREE DETAILED GUIDELINE | In the last years, it became very popular to offer payments by installments, which makes it easier for shoppers to buy expensive products without big one-time spendings. It's especially very relevant for stores that are selling high-priced items. | How to + Examples | π 4.77% RPU | Not set | Not set | 15.7.21 | 4.10.22 | |||||||||||||||||||||
98 | #11: Does the subtotal price is placed near the main CTA-button? | It's common to place the subtotal price near the Checkout button. Shoppers are used to it and know where to look for that information. Moreover, before clicking on the button, they will often want to see the total cost of the order. That's why you shouldn't break the pattern | How to + Examples | Not set | Not set | 15.7.21 | 4.10.22 | ||||||||||||||||||||||
99 | #12: Do you show shipping costs on the Cart page? | According to Baymard's research, 64% of users look for shipping information on the product page. I believe that percentage of shoppers that are looking for that information on the cart page is even higher, as they are already one step closer to checkout. Therefore, you need to have shipping information on the cart page. | How to + Examples | Not set | Not set | 15.7.21 | 4.10.22 | ||||||||||||||||||||||
100 | #13: Do you motivate users to shop more products if you have free shipping after a certain threshold? | The majority of e-commerce stores offer free shipping after a certain threshold. In this case, free shipping works as an additional incentive to buy more products and can significantly improve the average order value and revenue of a store. | How to + Examples | Not set | Not set | 15.7.21 | 4.10.22 |