E-commerce Website Design & CRO Checklist
Audit your store against 304 conversion checkpoints across eight page types - mark each one To Do, Needs Work, or Done. Your progress saves automatically in this browser, or you can download and print our offline version here.
General
Main pages (home page, landing page, product page) load quickly (5 seconds or less)
Every page has a CTA (even 404 error pages, result page with 0 results, blog posts, about us page)
Things that are clickable (like buttons) are obviously pressable (hover states, rounded corners, subtle gradient, blue underlined links)
Cookie notification bar can be easily closed or approved (under 2 seconds)
The site offers wishlists which is the easiest first step in the checkout process
Button labels and link labels start with a verb and time (e.g. "Shop Now")
Items that aren't clickable do not have characteristics that suggest that they are
There is sufficient space between action targets (buttons, forms) to prevent the user from hitting multiple or incorrect targets
The store offers upsell opportunities between the checkout page and thank you page; if the user decides to add another product to the order, he doesn't need to input all the payment info again
The shop's logo is placed in the same location on every page; clicking the logo returns the user to the most logical page (e.g. home page)
The website uses subtle micro-animations (e.g. pulses) to emphasise the main CTA on every page
The site doesn't include annoying pop-ups at the wrong time (too early in the process)
The home page promotes site-wide offers at the top of the page (e.g. Free Shipping) with urgency and scarcity triggers ("Only today") and a linked CTA ("Shop best-sellers now")
The top bar with a site-wide offer is prominent, with a clear CTA
The navigation system is broad and shallow (many items per menu level) rather than deep (many menu levels)
Good navigational feedback is provided (e.g. showing active state of where you are on the site)
Category labels accurately describe the information in the category
Navigation items are ordered in the most logical or task-oriented manner (with the less important corporate information at the bottom)
Main navigation doesn't include unnecessary links (e.g. privacy policy, return policy, and terms and conditions)
Store uses sticky navigation, so the categories, first page, search and cart widget are easily accessible all the time
The home page contains a prominent search box near the top (or top-right) of the website
The search bar has an auto-complete and auto-suggest option
Auto-suggest searches through categories and products
The search results page shows the user what was searched for; it is easy to edit and resubmit the search
Search results are clear, useful, and ranked by relevance and how many results were retrieved
If no results are returned, the search engine gracefully ("oh, snap") offers ideas or options for improving the query based on identifiable problems with the user's input
The most common queries (as reflected in analytics) produce useful results
The search engine includes templates, examples or hints on how it can be used effectively: verb + item (e.g. search "men's hat, blue leggings, XL pullovers")
The search box is long enough to handle common query lengths
The search box gives results if you press Enter
The search box contains a "magnifying glass" icon that clearly represents the search function
Once you click on the search field and before you type in anything, the search gives you hints of your recent searches or trending searches
The search engine provides automatic spell checking and searches for plurals and synonyms
Cart widget is easibly accesible on every page in the top-right corner
Mini cart widget includes the total price, total discount, number of items, all items in the cart (on hover) and it's prominent on every page
If the store has a free shipping option, the cart widget clearly states how far away the user is from getting free shipping
A link to both the basket and checkout is clearly visible on the mini-cart widget
Empty cart widget has (on hover) CTA to "Shop our best-sellers"
Footer highlights benefits of shopping at the store (e.g. free shipping, returns, money back, 19k products shipped this month, contact information)
Footer contains a "Back to top" link so the user can easily go back to the top
It is clear that there is a real organisation behind the site (e.g. there is a physical address or a photo of the office)
It is easy to see the return policy, privacy policy and terms & conditions on any given page with one click
Footer shows trust icons / seal badges (e.g. verified by Norton) along with reassuring copy (e.g. "Shop with confidence")
Footer includes links to social networks and a total number of likes/followers (so that the user can check them for trust)
Footer includes links to main categories
Home page
The home page promotes site-wide offers on top of the page (e.g. Free Shipping) with urgency and scarcity triggers
The home page is professionally designed, not overloaded, and it creates a positive first impression
Once you land on the homepage, you know the main products that the store is selling
The home page follows a clear, straightfowrard visual hierarchy
The value proposition is clearly stated on the home page (e.g. with a tagline or welcome blurb)
The home page contains meaningful high-quality graphics, not clip art or pictures of models
The home page contains one or two (e.g. Shop for men, Shop for women) visually prominent CTAs above the fold and it has relevant copy (e.g. Start shopping)
The home page highlights any specific deals, special offers or urgency offers near the top
The home page highlights the main benefits of shopping with you (e.g. "Vegan friendly", "We give back to charity", "Not tested on animals", "19,222 products successfully shipped and delivered this month alone")
The most important product categories are shown first, with descriptive photos near the top of the homepage
The store uses special category pages (best-sellers, new, sale, "30% off", etc.) that take users into a shopping mode
There is a short list of the most important products supplemented with links on the home page
The home page contains an option for customers to contact the store (e.g. live chat, email, or phone number)
The home page shows recently viewed items for returning visitors
The story of the founders behind the product and store is shown, along with their mission and vision
The home page contains general customer reviews or product specifics with a link to the product itself
The home page shows overall store ratings from authoritative review sites (e.g. Trustpilot, Reviews.com, Yotpo, Podium)
The home page contains awards, trust-badges, and certificates earned by the store
The home page highlights logos of news sites/blogs/celebrities where the product/brand has had any PR exposure (e.g. "Used by executives at Fortune 500")
The home page highlights logos of well-known brands
The home page contains user-generated photos (e.g. from Instagram)
Category page
Users can sort category page (e.g. ordering by price, "best-sellers", "new items", "most popular", or "most discounted")
The sorting feature is shown in the top-right corner above the product list/grid
Category page has clear and understandable (sub)category names
Category page uses relevant category page design (grid view when images are the main decision factor and list view when product attributes are the main decision factor)
Shows exact number of products available on each page (either if the page is filtered or not)
A page description section (cca. 400 words) is on top (visually 90% hidden with "Read more") or on the bottom for SEO purposes
You stay at the same vertical position if you go to product page and then back to category page
Relevant (3-4) products are shown per row
Trending, top-rated and best-selling items are shown on top of each category by default
Additional product photos are shown on mouse hover
Consistent style of images is used for better scannability (type of images, image background, white space around the products, size of product, angle of photos)
Consistent size of product cards is used for better scannability
The category page clearly shows which product variants (size, color) are available for each specific product
All important information is shown for each product (prominent product title, old price, new price, discount, review count, overall star rating, short description, product variants [size, color], short descriptions, product attributes)
CTA button is shown to motivate users to go look at the product page (ideally on :hover)
Scarcity on products that are limited in stock is shown ("Only 1 left")
Items out of stock are shown ("You just missed it") so the scarcity above is more convincing
Badges on product image thumbnails are shown (e.g. "Fast delivery","Best-seller", "New", "Top choice", "Trending")
A customer can give their email address if the product is currently not available; they will be notified when it becomes available
Category page offers easy to understand and useful (especially on mobile) filters (applicable only for stores with a large number of products)
The filters are prominent enough (relevant only for stores where users are prone to use filters)
The most popular filters are shown at the top of the filters
Only relevant filters are shown for each category (e.g. screen size for "Monitors" category)
It is clearly visible (especially on mobile) that filters are applied, how many there are and can be easily removed
Users can select multiple filters at once
Filters are shown in a standard position on the left or on top (below the category name)
When a filter is selected, the category page auto-updates in real-time (ajax)
Product filters are sticky and can be easily accessed at any given moment
Relevant selectors are used for different types of filters (e.g. color swatches instead of "blue", price range slider where users can type in the minimum and maximum price insted of a pre-made list of price ranges)
Product page
Sticky navigation with product name, product image, product page sections, availability, old price, new price, discount and CTA that hides when the user is scrolling down but reappears when the user scrolls up
Product page has an option for potential customers to ask questions (e.g. live chat, phone number)
Product page contains breadcrumbs (not applicable to single product stores and direct-response landing pages)
A customer can give their email address if the product is currently not available; they will be notified when it becomes available
Clicking the back button always takes the user back to the page the user came from
Product titles are descriptive
The main product title is visually prominent compared to other content
The product title is under 65 characters so it appears fully in Google search results
The product subtitle highlight key product benefit and contain power words, e.g. effortless, incredible, absolute, unique, secret, now, new, exclusive, how to, why
Product rating overviews are shown near product titles that are linked (with click & scroll) to product reviews (e.g. 4.6, Read 5 Reviews)
A short list of other key benefits of the product is near the main title and linked to a detailed description (with green check arrows)
The main product photo is attractive
The main product photo allows a user to zoom in easily (especially on mobile)
There is a gallery with different product photos
The product gallery shows thumbnails of other available images
The product gallery contains product videos
The product gallery contains arrows to navigate between images
The product gallery supports swipe actions on mobile devices
There are images for different product variants/sizes
The main CTA is the most visible element on the product page and contains the "cart" icon
Product variants are easily accessible on mobile and big enough with enough white space around to prevent misclicks
The product variant selection is connected with the product gallery and shows images of chosen product variants
A visible reminder is included to select size/color if a customer forgets and clicks "add to cart" too early
Interactive selectors are used for product variants (the gallery image and the price are changed in real-time, without triggering a page reload)
A size chart (or link that opens in a small popup and is easily closed on mobile) is provided near the size selections (for products with different sizes)
Localized units for products are shown with different sizes/measurements (e.g. cm, inches, kg)
Product descriptions mention the size of the model and the size of the shirt the model is wearing (only for apparel)
Interactive selectors are used for quantity selection instead of dropdowns (the price and quantity are changed in real-time, without triggering a page reload)
The CTA copy clearly explains what will happen when you click on it (e.g. Proceed to secure checkout)
Clear feedback is provided once the product has been added to the cart (e.g. a number in the mini-cart widget increases)
The main CTA change states once users add a product to the cart (e.g. "[check arrow] Product added to your cart" and after 2 seconds "Go to my shopping cart [right arrow]")
The price of the product is prominent enough, especially if it's discounted
The price of the product is placed near the main CTA
The price of the product is localized
The background color of the product's primary CTA differs from other elements (e.g. slightly grey)
All additional charges that may apply are shown near the main CTA (e.g. additional shipping costs due to product size, VAT)
If free shipping is offered, it's highlighted near the main CTA
All shipping information is shown near the main CTA (delivery to shopper's location, shopper's country flag, cost, time)
Availability of the product is shown near the main CTA (e.g. "In stock")
The old price (with a strike-trough) is shown with the new price and how much shoppers will save (% or $) when the product is on sale
Clear information is shown about returns, refunds and money-back guarantee
Express payment options are shown and available that are commonly used (e.g. PayPal, Amazon, Google Pay, Apple Pay). Useful for direct-response landing pages
There is an option for a payment with installments (e.g. Klarna, AfterPay; for expensive products only). Useful for direct-response landing pages that don't encourage the user to add other products to the cart
Product page highlights logos of news sites/blogs/celebrities where the product/brand has had PR exposure (e.g. "Used by executives at Fortune 500" )
Customer reviews are shown with a review title, customer photos of product, star rating, photo of reviewer, name and last name, "verified" buyer, occupation, and age
Customer reviews visually stand out from other content (ideally on a slightly yellow background)
Product page contains photos (with faces) of how (happy) customers are using the product
Product overall star ratings are shown and can be filtered by the star rating
Product page contains the number of customers this week/month/all-time (e.g. "19,222 products successfully shipped and delivered this month alone")
Product page contains video testimonials
Product page contains the number of Facebook and Twitter followers
Clear quantity discounts are offered near the main CTA (1x $24.99/piece, ["Top choice" badge]; 2x 19,99€/piece, ["Recommended" badge]; 3x $17,49/piece, ["Best value" badge])
Relevant cross-sell/up-sell products are offered
Relevant bundle products are offered with prominent discounts
Urgency triggers are used (e.g. "Today only", "Black Friday offer", "Free bonus", "If order is placed in the next 12 min, it will be shipped today") near the main CTA
Scarcity triggers are used (e.g. "Only 3 products left") near the main CTA
Customers are shown how many people have viewed and bought the product in the last 24 hours
A store is giving away a small percentage of the profit to charity; and highlights this information
The product page contains "Visitors who viewed this product also viewed..." where users are shown complementary OR/AND alternative products
The product description is easy to read (font size, contrast, single column, 75 characters per line, line-height 1.5, max. 4 lines long)
Product information structure is easy to scan (grouped information, bullet points, important benefits highlighted)
The sections of the page ("General", "Technical info") are grouped together in accordion (if they are longer) and scannable on mobile
Section titles explain benefits (and not features) of the product
Customers are shown all the things that are included in the product (ideally with an included photo)
Product page contains customer FAQs (for each specific product as well as store-wide questions)
The table of technical specifications is readable (different colors of lines, hover state of the line, not too far apart)
Product page offers product comparisons
Product description explains how to use the product in 3 easy steps
Product page contains embedded reviews (or screenshots) from social networks (e.g. Facebook post, Messenger, Whatsapp, Tweet, Instagram post, Instagram PM, Viber, text message)
Landing page
The buy button takes the user directly to the checkout (or upsell) and skips the cart page
Sticky navigation with product name, product image, product page sections, availability, old price, new price, discount and CTA that hides when the user is scrolling down but reappears when the user scrolls up
Landing page doesn't contain any outgoing links (e.g. clickable logo, navigation and footer)
Landing page has an option for the potential customer to ask questions (e.g. live chat, phone number)
Product titles are descriptive
The main product title is visually prominent compared to other content
The product title is under 65 characters so it appears fully in Google search results
The product subtitles highlight key product benefits and contains power words, e.g. effortless, incredible, absolute, unique, secret, now, new, exclusive, how to, why
Product rating overviews are shown near product titles that are linked (with scroll animation) to product reviews (e.g. 4.6, Read 5 Reviews)
A short list of key benefits of the product is near the main title and linked to a detailed description (with green check arrows)
The page layout is standardized (e.g. photo gallery on the left side, description and CTA on the right)
The main product photo is attractive
The main product photo allows a user to zoom in easily (especially on mobile)
There is a gallery with different product photos
The product gallery shows thumbnails of other available images
The product gallery contains product videos
The product gallery contains arrows to navigate between images
The product gallery supports swipe actions on mobile devices
There are images for different product variants/sizes
The main CTA is the most visible element on the product page and contains the "cart" icon
Product variants are easily accessible on mobile and big enough with enough white space around to prevent misclicks
The product variant selection is connected with the product gallery and shows images of chosen product variants
A visible reminder is included to select size/color if a customer forgets and clicks "add to cart" too early
Interactive selectors are used for product variants (the gallery image and the price are changed in real-time, without triggering a page reload)
A size chart (or link that opens in a small popup and is easily closed on mobile) is provided near the size selections (for products with different sizes)
Localized units for products are shown with different sizes/measurements (e.g. cm, inches, kg)
Product descriptions mention the size of the model and the size of the shirt the model is wearing (only for apparel)
Interactive selectors are used for quantity selection instead of dropdowns (the price and quantity are changed in real-time, without triggering a page reload)
The CTA copy clearly explains what will happen when you click on it (e.g. Proceed to secure checkout)
The price of the product is prominent enough, especially if it's discounted
The price of the product is placed near the main CTA
The price of the product is localized
The background color of the product's primary CTA differs from other elements (e.g. slightly grey)
All additional charges that may apply near the main CTA are shown (e.g. additional shipping costs due to product size, VAT)
If free shipping is offered, it's highlighted near the main CTA
All shipping information is shown near the main CTA (delivery to shopper's location, shopper's country flag, cost, time)
Availability of the product is shown near the main CTA (e.g. "In stock")
The old price (with a strike-trough) is shown with the new price and how much shoppers will save (% or $) when the product is on sale
Clear information is shown about returns, refunds and money-back guarantee
Express payment options are shown and available that are commonly used (e.g. PayPal, Amazon, Google Pay, Apple Pay). Useful for direct-response landing pages
There is an option for a payment with installments (e.g. Klarna, AfterPay; for expensive products only). Useful for direct-response landing pages that don't encourage the user to add other products to the cart
The landing page highlights the main benefits of shopping with you (e.g. "Vegan friendly", "We give back to charity", "Not tested on animals", "19,222 products successfully shipped and delivered this month alone")
Product page highlights logos of news sites/blogs/celebrities where the product/brand has had PR exposure (e.g. "Used by executives at Fortune 500" )
Customer reviews are shown with a review title, customer photos of product, star rating, photo of reviewer, name and last name, "verified" buyer, occupation, and age
Customer reviews visually stand out from other content (ideally on a slightly yellow background)
Product page contains photos (with faces) of how (happy) customers are using the product
Product overall star ratings are shown and can be filtered by the star rating
Product page contains the number of customers this week/month/all-time (e.g. "19,222 products successfully shipped and delivered this month alone")
Product page contains video testimonials
Product page contains the number of Facebook and Twitter followers
After the user clicks the "Buy button", they are taken to the upsell variant where you offer him a second item (of the same or complementary product) cheaper
Clear quantity discounts are offered near the main CTA (1x $24.99/piece, ["Top choice" badge]; 2x 19,99€/piece, ["Recommended" badge]; 3x $17,49/piece, ["Best value" badge])
Relevant cross-sell/up-sell products are offered
Relevant bundle products are offered with prominent discounts
Urgency triggers are used (e.g. "Today only", "Black Friday offer", "Free bonus", "If order is placed in the next 12 min, it will be shipped today") near the main CTA
Scarcity triggers are used (e.g. "Only 3 products left") near the main CTA
Customers are shown how many people have viewed and bought the product in the last 24 hours
A store is giving away a small percentage of the profit to charity; and highlights this information
The product page contains "Visitors who viewed this product also viewed..." where users are shown complementary OR/AND alternative products
The product description is easy to read (font size, contrast, single column, 75 characters per line, line-height 1.5, max. 4 lines long)
Product information structure is easy to scan (grouped information, bullet points, important benefits highlighted)
The sections of the page ("General", "Technical info") are grouped together in accordion (if they are longer) and scannable on mobile
Section titles explain benefits (and not features) of the product
Customers are shown all the things that are included in the product (ideally with an included photo)
Product page contains customer FAQs (for each specific product as well as store-wide questions)
The table of technical specifications is readable (different colors of lines, hover state of the line, not too far apart)
Product page offers product comparisons
Product description explains how to use the product in 3 easy steps
Product page contains embedded reviews (or screenshots) from social networks (e.g. Facebook post, Messenger, Whatsapp, Tweet, Instagram post, Instagram PM, Viber, sms)
Cart page
The overall cart design is clear and uncluttered
Urgency triggers are used ("Your items are reserved for 10 minutes", "If you order in next 12 minutes, the order will be shipped today")
The cart page clearly informs the user how far away they are from the threshold for free shipping (or a 3% discount)
If the user already reached the threshold for free shipping, the cart prominently highlights that (e.g. bold, green)
When the user returns to the site, the items that they placed in the cart are still there
All important product information is shown in the cart (title, image, chosen variant, quantity, price)
The right product image is shown for the chosen product variant (e.g. Red dress)
The cart allows you to change the quantity of the product and automatically updates the cart
The user can easily remove an item from the cart
The cart shows the day of expected delivery
Scarcity triggers are shown next to each item ("Only 1 item in stock") in a prominent color (e.g. red, orange)
The cart offers an easy way to get in touch with the store's help center (e.g. live chat, email, phone number)
Information about returns, refunds and a money-back guarantee is shown (if on external pages, a small pop-up window appears instead of redirecting the customer away from the cart)
The cart offers a way to enter a coupon code but with a hidden input field (so users won't go searching for coupon codes on Google)
The cart offers (inexpensive) upsell/cross-sell products with benefits and urgency ("Now or never") and a special discount (e.g. 50% OFF)
Customers can “save products / cart for later” instead of deleting them
The subtotal price is prominent and placed near the main CTA
Estimated taxes are shown
The shopper is shown how much they will save on their entire purchase near main CTA
The main CTA includes what will happen next ("Proceed to a secure checkout") and is the most prominent element and duplicated at the top and bottom of the page
The main CTA ("Proceed to a secure checkout") includes a lock icon on a distinctive (gray) background
Below the main CTA is a trust icon / seal badge (e.g. verified by Norton) along with reassuring copy "Shop with confidence"
Alternative payment options are shown below the main CTA button (e.g. PayPal, Amazon Pay, Google Pay)
Images of all available installment methods are shown (e.g. Klarna) with clear monthly payment and duration info (especially useful for more expensive products)
A secondary CTA "Continue shopping" button is available on the cart page
Checkout page
The checkout allows the user to make a purchase as a guest (avoids unnecessary registration)
The site provides good feedback during checkout (e.g. a progress bar indicates where the user is in the checkout process)
If there is a multi-step checkout, it's clear what will happen after you click CTA
The form avoids making the user start again if there's an error
Immediately prior to commiting to the purchase, the site shows the user a clear order summary
Below the main CTA is a trust icon / seal badge (e.g. verified by Norton) along with reasurring copy "Shop with confidence"
Checkout doesn't contain any outgoing links (e.g. clickable logo, navigation and footer)
The site's privacy policy is easy to find, especially on pages that ask for personal information, and the policy is simple and clear
Checkout offers an easy way to get in touch with the store's help center (e.g. live chat, email, phone number)
The main CTA is the most prominent element on the checkout page
After the checkout page and before the thank you page, there is an upsell step where user can add another product to the existing order
The checkout page contains order bumps (e.g. "Skip the queue", "Urgent shipping", "Gift packaging", "Package insurance" with prices under $3)
Urgency triggers are used ("Your items are reserved for 10 minutes", "If your order is completed in the next 12 minutes, it will be shipped today")
Checkout allows users to log in so they don't need to type in all the information again
During registration, the password selection process is not overcomplicated with unnecessary requirements
Password recovery is easy
The layout of input fields is as simple as possible (single column, ideally)
The checkout page has the minimum amount of input fields needed for completing the purchase
The checkout page input fields are "floating labels" so the user can see the name of the field and its contents simultaneously
The user's email address is requested first so in case they leave the checkout, the store is able to contact them
The input fields contain suggestions (Email: e.g. john.doe@gmail.com) to decrease the user's cognitive load
The checkout page has an option to check "the billing address is the same as shipping", so the user doesn't need to enter the same address twice
Choosing a payment option (e.g. radio buttons) is easily accessible on mobile
Visual prompts are included for credit card details, such as an image of where to find the CVV code
Credit card input fields are shown on a gray background for higher (perceived) trust
Users can easily jump between input fields of a form by using the "Tab" key
When entering data into a number-only input field (e.g. post code, phone number), a numeric keyboard is shown on mobile
When entering an email, a keyboard with dedicated buttons for @ and ".com" is shown on mobile
Input-field width indicates the amount and format of data that needs to be entered (e.g. postal code input is smaller than address), including credit card inputs
Optional and mandatory fields are easily distinguishable
If we are asking for the phone number, we must explain beside/below the input that it's only for delivery information
Checkout is using a database of street addresses so the user cannot mistype the address
Input fields use inline validation with a prominent green/red border and arrow/x sign (e.g, if the email is correctly entered)
The error state of incorrectly filled out input fields clearly states what is wrong and how it should be corrected
The user does not need to enter the same information more than once
Checkout uses an auto-complete function wherever possible (e.g. when user types in the postal code, the city gets filled out automatically)
If the user leaves the checkout and then returns, the input fields will have been saved so they can continue where they left off
Input fields have an option ("X" icon at the right side) to delete the content with one click
Thank you page
Thank you page clearly states that the user successfully completed the purchase and congratulates them
Thank you page clearly sumarizes what was in the order
Thank you page clearly states when the package will arrive and with what courier / delivery service
Thank you page offers an easy way for the user to get in touch with the store owner(e.g. live chat, email, phone number)
The thank you page explains to the user how they can track their package
Thank you page offers the user to buy additional items/quantity of the same product at a lower price, or buy another complementary product, with a clear explanation that these additional items will be combined with their recently made order)
Thank you page offers the user a coupon code that they can use for their next purchase, or give it to their friends
The user receives a summary of all information in their confirmation email (product summary, upsells, coupon code that is on the thank you page, etc.)
Want help closing the gaps on this list?
We’ll walk through your checklist results together and build a prioritized plan — free, no strings.