36-Point Checklist for Creating The Best eCommerce Site

According to Ecommerce Guide, nearly all retail growth in the US at present is driven by eCommerce — a trend which looks set to continue into the foreseeable future.

Dominant eCommerce brands like Amazon and Walmart understood the importance of utilizing the best eCommerce website design practice and aworld-class platform to enable a good customer experience.

And in order for your brand to deliver the same customer experience through your eCommerce platform, you need to make sure your site meets certain requirements.

So to help you prepare your eCommerce website, we’ve compiled a comprehensive checklist (with 36 items) that have been categorized into the following categories:

In a hurry? Here’s how to design the best eCommerce website:

1. Ensure your website is responsive
2. The cart icon must be available on every page
3. The checkout button must always be clearly visible
4. Have a prominent search bar on every page
5. Clear navigation menus
6. Contact information on every page
7. Maintain consumer confidence
8. Show logos
9. Prominent calls to action
10. Have emotionally appealing photography
11. Include “Top selling”, “Featured product” and “Recommended for you"
12. Use imagery to support calls to action and “Top sellers"
13. Add a category introduction
14. Show stock availability
15. Show filtering and sorting functions
16. Highlight best sellers or customer favorites
17. Include customer review scores
18. Make the “Buy” or “Add to basket” button prominent
19. Feature an “Add to wishlist” button
20. Upsell (aka “You may also like”)
21. Short(ish) product description
22. Product photos from different angles
23. Add video demonstrations
24. Show estimated delivery time
25. Use tabs for products that have a lot of detail
26. Display customer reviews or testimonials
27. Show stock availability
28. Show all fees upfront
29. Provide an easy way to update cart items
30. Include a “Return to shop” link
31. Upsell (again)
32. Show delivery options
33. Strip away the navigation menu
34. Offer several payment options
35. Security badges

Download our checklist: eCommerce website design best practices

A 36-point checklist to create the best eCommerce site.

Send me the guide

Site-wide eCommerce web design checklist

Before we delve into the essential requirements for inner-sections of an eCommerce website, let’s look into the fundamentals of an eCommerce site as a whole.

[#1] Ensure your website is responsive

This is crucial when it comes to designing your eCommerce site. With more devices being able to connect to the internet than ever before, you don’t want to have an eCommerce site that doesn’t work on a smartphone or tablet. Figures show that2 percent of smartphone users made a purchase via their smartphone.

Plus, you’ll have no hope of succeeding with an omnichannel eCommerce marketing strategy if your website looks like trash on mobile devices.

[#2] The cart icon must be available on every page

Well-designed eCommerce sites have their basket or cart icons clearly visible in the top right corner of every page. If your customer has added items to the basket, it will show how many items are in the basket.

Stanley, a food and drink container retailer, goes a step further with their eCommerce web design, which shows a cart preview when customers hover over the cart icon.

[#3] The checkout button must always be clearly visible

The checkout button is normally found next to the basket icon. Some eCommerce sites have their basket icon lead directly to cart page as you can in the Amazon example below.

[#4] Have a prominent search bar on every page

If you take a look at any eCommerce website, they will have a search bar located at the top of every page. A comprehensive search function enables users to find a product in your catalog. If you are able to provide suggestive search terms whilst your customer types in the search bar, that’s even better.

[#5] Clear navigation menus

Having a clear navigation menu helps to identify the different types of product categories your website sells to your customer. It is important that you use general terms to segment your product items. For example, a fashion brand will differentiate their product range by “Men”, “Women” and “Kids”.

[#6] Contact information on every page

Having contact information on every page reduces buyer anxiety. It gives customers added reassurance that they’re able to contact you should they have any queries.

[#7] Maintain consumer confidence

With cyber-security being a major concern for online shoppers, ensure every page has links to the following pages:

• Customer Testimonials
• Why Shop With Us
• Privacy Policy
• Delivery Information
• Return Policy

You can link to these pages inside your site footer to keep things looking clean. Here’s an example from Nine Line Apparel:

[#8] Show logos

If your eCommerce sells big brand names be sure to include their logo wherever possible. Having logos of big brands gives the customer an indication of what type of product you sell — plus, it adds some authenticity and prestige to your brand for being affiliated with industry leaders. Here’s an example of how Best Buy utilizes logos on their site:

eCommerce Homepage Web Design Checklist

Your home is usually the first page your customers see. And many successful eCommerce brands see their homepage as the first step of a customer journey. Do not make your home page a product listing page, use it to create an appeal.

[#9] Prominent calls to action

Encourage your visitors to explore the site. If you are running a sale or a promotion on a selection of products, be sure to have this on the home page and include a call to action like “See Our Latest Deals” and include a link to a product listing of all products that are included in the sale.

Other examples of call to actions include “See our range of birthday ideas”. Your prominent call to actions must be relevant to the product you sell.

Here’s an example of North Face’s home page (see how their call to action encourages their customers to explore the site):

[#10] Have emotionally appealing photography

Photography is very important when it comes to selling online. We highly recommend (if possible) that you invest in professional lifestyle photography to visually (and emotionally) capture the moment where your products are in use. Fashion eCommerce sites, like Reformation, have successfully used their lifestyle photography investment to capture moments of people wearing their product. Take look at the example below:

Another example is the travel industry, they capture the moment of people enjoying the sun, igniting envy and desire at the same time.

[#11] Include “Top selling”, “Featured product” and “Recommended for you"

Besides including products that are in a promotion, include products which are best sellers or even featured. You can even add a list of products which are suitable for your customer. This can be achieved in a number of ways; you can select products manually or automate the selection based on a different criteria (i.e. “customers also purchased…”).

[#12] Use imagery to support calls to action and “Top sellers"

Customers are able to absorb information better if it is presented visually. So use pictures of the product or of customers enjoying the product.

eCommerce catalog page web design checklist

Customers usually get to a product listing/catalog page through the search bar or by selecting a category on the navigation menu. The product page should never include all the products, otherwise, it will be too overwhelming. Present the product listing by what your customer wants, so do utilize tags to segment your products.

Download our checklist: eCommerce website design best practices

A 36-point checklist to create the best eCommerce site.

Send me the guide

[#13] Add a category introduction

>Depending on your industry, it is good practice to include an introduction to the category of products with the appropriate hero image. It helps to improve customer engagement because you’re immediately presenting the products in context. If the customer came through search, then this step is less vital.

SEO tip: Use this section to create a “how-to” or “buyer’s guide”. This allows you to optimize category pages for different long-tail keywords. Revzilla is a great example of this.

That particular page is ranking for more than 2.7k keywords and generating a lot of traffic.

[#14] Show stock availability

As your customer scrolls through your product listing, let your customers know of stock availability on the product listing page.

Showing this information on the product listing page prevents your customer from feeling frustrated if they click through to the product page and finding out that the product is out of stock.

Read this next: 23 Tactics to Create Urgency and Grow Your eCommerce Conversions

[#15] Show filtering and sorting functions

Adding a filter and sort function helps your customers find what they are looking for much easier. To give you an example, if a customer wants to buy a pair of brown men’s shoes within the price range of $45 to $50, then they can select the color brown and price in the filter section.

Here’s an example of Walmart’s product listing page which has filters on the left side:

[#16] Highlight best sellers or customer favorites

Customers tend to favor products that have bought by others or have been ranked highly.

[#17] Include customer review scores

Customer review scores can help customers identify which products have been highly rated and social proofed (see the example by Walmart above).

eCommerce product page web design checklist

The product page is where you win or lose the customer. It’s what they shopper sees after they select a product from your catalog page.

Download our checklist: eCommerce website design best practices

A 36-point checklist to create the best eCommerce site.

Send me the guide

[#18] Make the “Buy” or “Add to basket” button prominent

You must incorporate the 3-second rule whenever a customer visits a product page. So do make the “Buy” or “Add to Basket” button clearly visible. Use bold and bright colors to help your button stand out.

See example by JD Williams below:

[#19] Feature an “Add to wishlist” button

The “Add to Wish List” button should not be as visibly prominent as the “Buy” button, but it gives the customer a chance to put aside items they would like to buy at a later date.

[#20] Upsell (aka “You may also like”)

The Iconic utilized a feature on their website that provided product recommendations based on what other customers have bought (i.e. customers who bought X, also bought Y) to maximum effect. It helps to create a personalized shopping experience on your website and also upsells the product.

[#21] Short(ish) product description

Keep the product descriptions as concise as possible. Customers are unlikely to read wordy product description unless if they want to. If products have a lengthy product description, and the customer is interested, add a "read more” underneath the concise version of the product description to allow the customer to gain further information.

[#22] Product photos from different angles

Show a variety of photos showing different angles of the product. If possible, add a “zoom in” feature so customers can get a closer look at the product.

[#23] Add video demonstrations

There are many ways to use video content on your product pages, but video demonstrations of the product are becoming extremely popular. You can make your own video to show customers how to use the product and also leave a positive review of the product as well.

[#24] Show estimated delivery time

Don’t leave your customers guessing. Give them an accurate estimate for when they can expect the product to land on their doorstep.

[#25] Use tabs for products that have a lot of detail

Products which are high-end purchases, usually have a lot of product information. Utilizing tabs helps keep product information neat and tidy.

[#26] Display customer reviews or testimonials

A list of all the customer reviews is usually found at the bottom of the product page. This gives customers a chance to look at what other customers have said about the product before they make their buying decision.

Using customer testimonials throughout your eCommerce website is one of our ten hacks to convert more visitors into customers and it’s great for SEO.

Pro tip: Make sure to implement Schema markup for customer reviews or testimonials.

[#27] Show stock availability

Like the product listing page, showing the stock availability gives the customer an indication if the product is in stock. If stock levels are low, ensure this is explicitly stated on the page so that the customer can make a purchase sooner, rather than later.

eCommerce cart page web design checklist

Once the customer has chosen the products that they want to buy, they will review the items in their basket.

Download our checklist: eCommerce website design best practices

A 36-point checklist to create the best eCommerce site.

Send me the guide

[#28] Show all fees upfront

Hidden fees are the number one reason for cart abandonment. If there are any additional fees, ensure this is mentioned on the cart page. For example, if your eCommerce sells concert tickets, make sure you inform your customer of the booking fee that they will have to pay.

[#29] Provide an easy way to update cart items

Give customers the option to update the quantities or remove unwanted products. Ego Pharmaceuticals, a skincare brand, is a good example to follow here. On their checkout page, you can easily update product quantities and remove unwanted products from the cart before checking out.

[#30] Include a “Return to shop” link

Customers tend to review their items in the cart and may want to return to the shop to browse through the product listing to buy more items.

[#31] Upsell (again)

The cart page is the final opportunity to upsell any products. Include images and product details that might pair up with the items in the customer’s shopping basket.

[#32] Show delivery options

Provide customers with all the delivery options that you provide. Customers tend to want their items delivered sooner rather than later. So if you offer same day or next day delivery, you can provide this with an added premium.

eCommerce checkout page web design checklist

Once customers are happy with the items in their basket, the customer will then want to purchase them. That’s where your checkout page comes in.

Download our checklist: eCommerce website design best practices

A 36-point checklist to create the best eCommerce site.

Send me the guide

[#33] Strip away the navigation menu

When customers are checking out, you want them focused on ensuring the transaction is completed. So for the checkout page, remove the navigation menu like you would for a landing page.

[#34] Break up the order process into 4 steps

This ensures the order process runs smoother. You can break up the ordering process in the following 4 stages:

1. The cart interface
2. Customer name, details and delivery address
3. Payment information
4. Confirmation page

Northeast Nursery, a landscaping supply company, does exactly what’s required to produce a streamlined and conversion-optimized checkout process:

[#35] Offer several payment options

The more payment options you provide the better. The most obvious payment method is via credit or debit card. But you can integrate PayPal and Amazon Pay as well since they are two of the most trusted off-site payment solutions.

[#36] Security badges

Give customers reassurance that their financial details are safe by showing your SSL certificate or any security badges on the check out page.

How’s your eCommerce site looking?

The checklist above will help you optimize your eCommerce web design for conversions. You should also run through our 70+ questions to ask when building an eCommerce website.

After that, it’s down to how you use your eCommerce solution to provide personalized omnichannel experiences.