Essential E-Commerce Website Features: Tips and Examples

There are many different approaches you can take when designing an e-store. However, you might notice that effective e-commerce websites have certain site features that are absolutely critical to the shopper’s experience. We will look at these common features that you will find in almost all e-commerce websites.

Product Navigation

Perhaps the most important component of an online store is its navigation system.

Good website navigation is essential for any site, but much more so for e-commerce sites. Users need to have the ability to browse among different categories and products quickly through an intuitive navigation system. Investing in the information architecture of an e-commerce website is paramount in the site’s success.

Amazon Amazon has had one the best-designed (and also extensive) navigation systems out there. The categories of the products that can be found on the site are well organized and give users the ability to swiftly navigate between different product categories. As you’ll see in the preceding examples, a left vertical navigation menu is popular because it allows us to include more links versus a horizontal navigation menu.

Overstock Overstock represents its comprehensive primary product navigation system as a vertical menu bar. In addition to the site’s primary navigation menu, Overstock has a robust navigation menu in the site’s footer. Olive & Myrtle This e-commerce site sells eco-friendly products.

It has a vertical navigation menu on the left. They chose to style the “Sale” link so that it’s bold and in red in order to make it more prominent. Via Snella When an e-store has a small amount of products or product categories, a horizontal menu bar can be all that’s needed for product navigation.

In the example below, you can see that Via Snella, a male fashion company that’s only been in business since 2006, can get away with a simple filter navigation arranged horizontally. 4th Street Cookie Company The 4th Street Cookie Company is primarily a physical, brick-and-mortar store. However, they complement their physical store sales through their online shop.

The product navigation in this case doesn’t need to be as extensive as a store like Amazon.com, since the cookie company only has a handful of unique products to offer. They’ve resorted to a thumbnail navigation for navigation to product pages. Mozilla Store The Mozilla store uses a left vertical navigation menu, displaying the product categories they have in the site.

etnies This e-store provides shoppers two ways to browse products: a vertical navigation menu and a drop-down menu that appears when you hover over the “Shop” menu item in the site’s horizontal menu bar. Trilby Phoenix In this e-store, you can browse products using the left vertical navigation menu. The menu is subdivided into three main categories.

Clicking on one of the main categories displays more links. Empire Patio Covers Empire Patio Covers uses a horizontal navigation menu. To get around the lack of space that’s associated with fixed horizontal navigation menus, submenu items are progressively disclosed using drop-down menus.

OneHorseShy The product navigation system on this e-store is simple. You can browse by theme or by product.

Search Box

Having a clear and well-positioned search box is crucial to an e-commerce site.

The ability to search an e-commerce website is very important because many online buyers have a specific item that they are looking for. A search box is a powerful site feature that will improve findability and navigability. Often, search boxes in e-commerce stores are in very prominent positions, high up in the layout, enticing the user to search the site for the product they want.

Etsy The search box of Etsy is a jutting fixture of the site’s design. It also allows you to limit your search within specific categories. TasteBook This e-commerce site has a search box that’s highly visible and placed in a high-value location.

It has placeholder text to give users ideas on what they could search. Cosmicsoda The search box in Cosmicsoda is located on the right sidebar. Its unusual shape and eye-catching design can draw the attention of site users.

ThinkGeek ThinkGeek places its search box on top of the vertical product navigation menu to make it easy to find. In addition, grouping the search box and product navigation menu makes sense because they are two site features that can be used together. Airfix Airfix has a search box widget that has options for advanced search criteria filtering.

This example demonstrates a good way to provide a persistent advanced search feature that’s compact.

Shopping Cart

A shopping cart is almost always present in e-commerce stores. The shopping cart is usually the first screen in a checkout process.

Products in the user’s shopping cart are typically displayed in a table/matrix format. Its purpose is to display the items that the user has decided to purchase. It’s a highly functional feature that gives you a summary of the things you’re buying.

Common elements of shopping cart pages are:

• Product name
• Short product description (if the product name needs further explanation)
• Product’s price
• Total cost of products in the shopping cart
• Product image thumbnail that displays a preview of the item
• Quantity box that allows users to modify the number of items they want to purchase

DesignByHumans The shopping cart of DesignByHumans is clear and functional. The Brown Corporation This example displays most of the common features we repeatedly see in shopping cart pages: quantity box, cost summary, the ability to remove a product or modify the quantity you want to purchase, etc. BustedTees The shopping cart of BustedTees gives you suggestions of other things you may wish to purchase based on the items currently in your shopping cart.

Atom Bicycles When you hover over the shopping cart icon on this e-commerce website, instead of being directed to a shopping cart page, it will show you a short summary of items in your cart. This is a convenient way for shoppers to quickly see what they have placed in their cart without having to wait for another web page to load. Threadless The Threadless shopping cart is clean and straightforward.

Featured Products

Often, e-commerce stores have certain products they want to highlight. These products are often found on the front page of the site. These products are usually items that are on sale/clearance or new items that have recently been added to the inventory.

There are many ways to put featured products on center stage. A popular method is to have an image slideshow at the top of the home page’s layout. Alexandalexa The image slideshow on this e-commerce website takes center stage.

At set intervals, it changes slides to display featured products and news. Rifle Paper Co. Featured products on the Rifle Paper Co. website are displayed in an image slideshow, as well as in a 3-column thumbnail arrangement below the main slideshow.

River Island A big featured area can be seen in this e-commerce website. It takes up a significant amount of home page real estate. Chicago L-Shirts Featured items in this e-commerce website are displayed as the site’s background.

As you navigate through the items using the left and right arrows on the left, the background image changes.

Product View Filtering and Sorting

When displaying a category of products or a list of search query results, having the ability to filter or sort products can greatly enhance the ability of the user to find exactly what she’s looking for. Crate&Barrel Crate&Barrel allows you to filter products by price, type and more.

The e-store also allows you to sort products alphabetically or by price. Ten Little Monkeys The Ten Little Monkeys e-commerce site, which sells designer clothing for kids, gives shoppers the option to sort products chronologically or by price. Bridge55 Bridge55 has a vertical checklist of product attributes to help you filter products so that you can find ones that match your criteria.

Product Images

The main disadvantage of e-commerce websites when compared to traditional physical retail stores is that websites can’t give shoppers the ability to touch and see products. Thus, images of the products being sold must be included and displayed in an enticing way. Images must be big enough to see details and features of a product.

Free People Clothing Boutique This clothing e-store has high-resolution images. Browsing through product photos gives shoppers an interesting user interface that allows them to drag their mouse over areas of the photo to see the area in greater detail/resolution. Storenvy Many e-stores place thumbnails of other product images below the current image.

However, in this example, they are arranged vertically on the right side of the current product image being viewed, making them highly visible to users. Jules The product images on this site are beautiful and large. They integrate well with the other contents of the product page.

Black Estate Vineyard Photos of the wines being sold in this e-store are masterfully arranged to complement the site’s design. Jax Vineyards Large product images secondarily serve towards the aesthetic appeal of this e-store’s web design.

Related Content

• • Anatomy of an Effective Product Page Design
  • Tips for Creating an Excellent E-Commerce Website
  • Planning your E-Commerce Website

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer.

Contact him via [email protected]. (He likes email among others!)