Ecommerce Website Development Process Checklist

Ecommerce websites are booming these days, and for good reason: they can make a lot of money. Whether you’re selling physical goods, virtual products, or services, you need an online foundation that can handle your lofty goals.

This post covers what are generally the first few steps for an ecommerce website, specifically the beginning of the planning phase leading into the building phase. The steps outlined here should give you a solid bird’s eye view of what to expect if you decide to start an ecommerce business.

Identify your required pages

Generally, there are a few standard pages/templates required to run an ecommerce website. Identifying which of these you need and what exactly they’re supposed to do is the most important step to starting a great ecommerce website.

Below, we describe some of the normal pages specific to an ecommerce website, and what you can expect to find on them. Choosing some or all of these to include in your website will help you strategize the remaining pieces needed to get it up and running.

1. Shop Page

The shop page is the primary page on your website to display your products. It’s the backbone of your ecommerce website. This page is where people will come to see the list of products available to buy. This is also usually the page/template where sorting is done. Any product categories, options, and standard meta/details should be easily searched for and sorted accordingly. This is much like the page that is displayed when you search on a website like Amazon.

Often, this is also the first place users will go on your website after arriving at the home page. Presentation and usability are important to help increase your total sales when everything looks good and functions correctly.

2. Individual Product Page

The second most important part of your ecommerce website is the page that displays the images, details, reviews, etc. for a single product. You can think of this as a product page on Amazon. This is where the final decisions happen for choosing quantities, choosing options (sizes and colors), and adding products to your cart.

3. Cart

Obviously, having a cart page is integral to the purchase process. A cart page allows people to review their order before going to checkout, change quantities, and even remove items from their cart. This is also a common place to accept coupons and display the effect they have on the products in the cart.

4. Checkout

Checkout is the final step in every buyer's journey. The checkout page is a requirement on every ecommerce website since it facilitates and finalizes product purchases.

There’s usually a form on this page that allows the customer to fill out information such as their name, shipping information, company details, and any final notes for their order. These details are saved and are used to determine who and where to ship a product to.

The key detail about these pages, however, is the ability to enter in your credit card or PayPal information for the purchase. Another detail that you might see is the ability to login to an account at this point, which would allow the user to used saved details for their checkout instead of having to enter them in any time they return to the website.

5. My Account

Many ecommerce websites are built with the ability to log in and save your information for use around the website. Doing this can help expedite the checkout process and can save lots of headache for the customer. You can also use this sort of system to track who is buying what, how many times, and even record which coupons are being used when they checkout.

Generally, these memberships are based on a simple email and password combination that allows them to access a small members-only area where they can manage their details as well as view their current and past orders. Allowing people to track their packages is a great step to making the processes of sales and shipping easier for you and the customer.

Identify Your Required Functionality

Now that you have an idea of the standard pages required on an ecommerce website, we can examine the exact functionality generally seen in each of those pages. Customers will expect certain tools and standard experiences to be available on an online store. We will look at what those are for each page and best practices to follow for implementing them.

1. Shop Page Functionality

Search: Search is a huge part of an ecommerce website and should be required across every page on the website. We are covering the search functionality here under the Shop Page, but keep in mind, this is something that can and should be used anywhere on the website.

A search bar can have simple or advanced functionality. Depending on your needs, you can make it search for anything from names and titles, to skus, sizes, descriptions, and other meta. We use the search bar in combination with the next element: a filter.

Filtering: Filtering is vital to the online shopping experience. The ability to sort exactly what you see from your search results is a customer expectation. Standard types of filters include product details like categories, prices, sizes, colors, brands, and almost any type of information you could use to distinguish one product from another.

You will often see filters in two styles. The first is a standard link system that you see on smaller ecommerce websites that don’t need a robust search/filtering system. Usually what is offered on these websites are simple lists of categories and attributes that can take you to different sections of products. The drawback with this type of filter system is that it doesn’t allow you to combine attributes or easily toggle between them; you’re stuck sorting by one detail at a time.

The second filter style seen on larger ecommerce websites is called a dynamic filter. Dynamic filters allow you to combine and choose specific details you want to search for within products. Amazon is a great example of a robust sidebar filter system that allows you to sort by almost anything the product information might contain. This type of filter will be easily expandable if in the future you decide to add more attributes to your products that you would want to use to filter more specifically.

2. Individual Product Page Functionality

Images & Descriptions: Images and descriptions are an important aspect of the selling process. If customers don’t know exactly what they’re purchasing, there can be lots of confusion and frustration for them and you. Often, users will avoid websites that don’t give them at least one image to display what the product is.

Product Options: The individual product page is where customers choose options about the product they’re purchasing. Standard options include details like sizes, colors, and even the addition of production details to the product, like a number on a shirt or a name on a hat.

Reviews: When you visit an ecommerce website, you will usually see customer reviews for the products you’re viewing. Whether it’s in the form of numbers, stars, or text, reviews are a great way to ease your customers’ minds on any concerns or questions they may have with the product, which leads to more sales for you!

Add to Cart: Finally, and most importantly, there is the add to cart button. This button is what someone clicks after choosing all of the product details to add into their cart. Every product will have a button like this and will usually have a quantity option next to it.

3. Cart Functionality

Order Review: Customers need somewhere to review their cart before placing an order. What you usually see here is a list of every product currently in the cart, along with their quantities and prices. Other details that may be shown here include quantity discounts, who/where the item is going to be shipped from, and any special details that may have been added by the customer on the individual product page.

Coupons: The cart page is also a great place to have your customers enter their coupons. Along with an order review section, you can show exactly how the products and their prices are affected by the coupon, as well as how any special offers like free shipping might be applied.

Upsells: On the cart page, it’s standard practice to show other items related to what’s in the customer's cart, either to try and sell more or offer them items they may have forgotten. Examples include batteries for electronics or shoelaces for shoes.

4. Checkout Functionality

Customer Billing/Shipping Details: The checkout page is the last step on the buyer's journey. At this point, you want to collect the details for billing the customer and shipping to them. There are separate forms usually for billing and shipping details since they can often be different. Collecting this information is essential to complete the order.

Credit Card or Billing Account Details: This is the last step in the purchase. The customer can enter in their credit/debit card details, Paypal account info, or any other billing service offered.

It is possible to fill in these account details automatically for a customer using data they may have previously entered. This would require our next set of functionality.

5. My Account Functionality

Sign Up/Log In: If you choose to include membership/account abilities on your website, you’re going to need these. A sign up page/form that allows someone to register using their email and a password (or any other details you might want) is the first step in the user account process. After creation, they’ll need someone to manage their details.

Manage Account: Provide a page that allows your users to enter their normal information like addresses, names, and payment info. You will have forms on this page to collect the information. This page is also the place to provide your customers information on their current and previous orders. The ability to track details like order date, shipping date, and order costs is a major plus to any ecommerce website and adds another level of control for the user.

Log Out: Finally, and simply enough, the user needs the ability to log out of the website when they’re done. This is for security reasons and essentially ends the shopping session for the user.

Summary

Now that you have a general understanding of both the standard pages on an ecommerce site and the functionality that is usually provided on those pages, you can start the first real step for implementation.

Determine which of the pages are essential to your website. Perhaps you don’t require account functionality, which can be the case if you aren’t a large company. Or maybe you want to simplify your website and have the shop page as the homepage. These considerations are specific to your users and your website.

Planning the functionality of your chosen pages is integral to the design and development process. Deciding what of the functionality we’ve covered is important to your website. You might not need all of the elements listed in this post; considering this before starting to build the website will prevent confusion on what needs to be implemented where. You can also take this chance to consider which features you want in the future and how you could develop to potentially include them in the future.

Using the considerations presented here, along with anything you may have experienced in your own online shopping, you can create realistic goals for your website. At this point you could take your ideas and ask others for opinions, or even start development if you feel ready.

A great website starts with great planning. Knowing what you’re getting into before starting is essential to a good end result.

How to Design an eCommerce WebsIte?

As a designer, you can’t afford to ignore good ecommerce design. Below you’ll find a comprehensive guide to creating great ecommerce sites, complete with examples.

Multi vs single product sites

One of the biggest differences in how to approach designing an ecommerce site is based on whether it’s a multi-product site or a single-product site. A site selling tons of products has very different needs compared to one selling only a single item (whether that be a physical product or a virtual one).
Single-product sites are often a single page. Sometimes they’re formatted like a letter (I think we’re all familiar with those, and while they’re not the best style from a design standpoint, they do tend to work in many industries).
Other single-product sites have multiple pages (particularly for higher-end and more expensive products), but are still relatively simple from an information architecture standpoint.
Site selling multiple products, on the other hand, virtually all have multiple pages. Just how many largely depends on the number of products beig sold. Smaller sites might only sell a handful of things, and therefore may only have a handful of pages. Other sites may sell thousands (or tens of thousands, or even millions) of items, necessitating many, many more pages.
Consider carefully how the information on these sites should be organized. A site with thousands of pages is going to have significantly different needs and systems in place to keep everything consistent and organized than a site with only a few pages.

The design process

While the design process for an e-commerce site isn’t terribly different from the process for any other kind of site, there are some additional things to consider and to figure out prior to actually designing and throughout the process until (and after) launch.
First of all, if it’s an established product line or store, then there are likely already going to be a lot of design constructs in place. Find out what these are right from the beginning.
Another thing to consider is existing product photos, and whether there is a budget for new ones. If every product photo you’ll have to use has a very minimalist look, then designing a very ornate site may not work (or may take some extra time to make work), and vice versa. Better to find out from the beginning than to wait until the design is finished only to be provided with photos that clash horribly (and therefore make the products themselves look bad and hurt the bottom line).
The sales funnel and how many pages exist between the site’s home page and the final checkout page is also a vital consideration, and should be mapped out from the beginning. But more on that later.

Three things every online store needs

A lot goes into building a successful online store, but there are three key elements that every site needs:
Trustworthiness: every ecommerce site out there needs to build a sense of trust among shoppers. If a shopper doesn’t feel like the site (and the merchant by association) is trustworthy, they’ll take their business elsewhere.
Simplicity and ease of use: an online store needs to be simple in the way that it functions, if not in the design itself. At no point should your shopper be left wondering what to do next.
Transparency: transparency goes hand-in-hand with trustworthiness, but it goes further. Transparency means you need to make sure that things like contact information and the merchant’s policies for things like shipping and returns are easy to find. It can also be tied into things like customer reviews on the site, and openly addressing any criticism that may come the merchant’s way.
Make sure that these three things are incorporated into every ecommerce site you design, along with the following best practices.

Best practices

There are tons of things to keep in mind when designing an e-commerce site. Some are dependent on the type of site, the company, and the products being sold. But there are others that are applicable to almost any site or product.
Here are some of the best practices you should keep in mind, most of which apply regardless of the type of product you’re selling.

Big images and lots of them

People want to see the products they’re buying prior to making a purchase. And since shopping online prevents them from seeing in person what they’re buying, they need images that give them as close to the same experience as possible.
That means there should be photos from every possible angle, and that those photos should be large (and preferably zoomable). There are a few ways to handle zooming on images, but the standard has basically become a magnifier over the image, displaying the zoomed image on the side or directly over the main image.
As a designer, make sure that you design product pages in a way that allows for a lot of images to be displayed.
Now, what if you’re selling a virtual product? How do you handle photos then? Screenshots are generally your best bet, and again: lots of them. People want to know what they’re buying before they buy. Never lose sight of that.
The ModCloth site, for example, generally features 4-6 images of their clothes, and even includes video at times. The images aren’t huge, but they do include a zoom feature for getting a better look.

Highlight scarcity

Have you ever noticed how Amazon displays how many of an item are left in stock? It’s because scarcity compels people to buy. If someone is on the fence about purchasing a product, but they’re afraid it may sell out before they make up their mind, then they may just go ahead and buy it to prevent missing out. Especially if it’s a deal.

Draw attention to related products

Unless you’re only selling a single product, every product page should include links to other, related products. Selling dresses? Include links to matching shoes, handbag, or other accessories.
These should be given a prominent spot on the page, and be integrated into the design from the get-go, rather than something tacked on at the end. Here’s one example:

Make it easy to share

Social media sharing functions should also be made a prominent part of your product page design. Word of mouth is a powerful advertisement, and making it easy for customers to share their purchase (or pending purchase) is a valuable way to get essentially free advertising.
Make sure that you integrate share buttons on the product pages, as well as after the visitor has made their purchase.

Ensure product descriptions are detailed

A bad product description can make or break a sale. While as a designer you may not always be the one writing those descriptions, you should make sure that your design can elegantly handle descriptions of more than a paragraph without looking awkward (or breaking all together).
One solution here is to use a mini description or summary next to the product (and near the “add to cart” or other call to action button), while including a longer description further down the product page. Another option is to use a “read more” link that either opens a modal window to reveal the full description or reveals it in-page, moving other content down (or creating a smaller scrolling section). Just keep in mind mobile usability when designing these things.
The 20Jeans website is a great example of detailed product descriptions done right.

With the basics overlaid on the product image and a more detailed description found below, complete with accordion navigation for things like care, materials, style & fit, and shipping & returns.

Simplify checkout

The checkout process should be quick and easy. Ideally, you’d have a single page that lets buyers review what’s in their cart and enter their billing and shipping information, with an additional page to confirm their order before placing it.
Some sites create a longer checkout funnel, with a page to review the cart, a page to enter shipping information, a page to enter billing information, a place to review the order, and an additional page to confirm before placing the final order. A checkout process that’s long and complicated can deter customers and make them abandon their cart.
One page you shouldn’t skip, though, is a page for customers to review their entire order before finalizing it and placing it. Shoppers are used to this step, and may hesitate more if they don’t have a final page to review before placing the order.

Don’t require an account

Requiring an account to make a purchase is generally a bad idea. There are exceptions, of course (like if there’s ongoing support included with the purchase), but in general, it’s just a barrier to making a purchase.
Instead of asking for shoppers to sign up for an account prior to purchase, give them the option at the end, after their purchase is complete. And if an account is absolutely necessary, integrate the signup with one of the other pages in your checkout process, like the billing or shipping information page.

The sales funnel

The sales funnel is one of the most important design considerations for any ecommerce site. The funnel generally consists of a home page, a search results page (or browse/category page) filled with products, individual product pages, and the checkout process.
The point of the funnel is to usher shoppers from one part of the site to the next, closer to the point of completing the sale.
There are a number of different ways to create the sales funnel, and it’s largely dependent on the type of product you’re selling and the selling price (a higher price may require more coaxing).
One technique that can be particularly effective on a single-product site is to get visitors in the habit of clicking through to the next step, throughout the sales funnel. So rather than having one long page describing the product, have a series of shorter pages that the user clicks through, leading directly into the checkout process. It develops a habit for the user of clicking through to the next step, lowering any psychological barriers that may exist.

Calls to action

The call to action on any ecommerce site is absolutely one of the most important elements of its design. Without an effective call to action, your sales are going to seriously suffer.
Now, there are two kinds of calls to action that you’re likely to find, depending on which kind of site it is. Ecommerce sites selling multiple products are going to have calls to action on each product page, as well as possibly a call to action for each product on search results or browse pages.
In either case, most are going to include terminology like “add to cart”. On occasion, you might find a call to action that says something like “buy now” instead.
Ecommerce sites selling a single product may have more than one call to action on the site, often with one on each page (or multiple in various places on a long single-page site).

Product pages

Your product pages need to create an experience as similar to shopping in person as possible. That means plenty of information about the products. Photos, descriptions, and specifications should provide as much detail as possible.
Here are some great product page examples to check out:

Levels

This Levels product page offers minimal information, but it’s everything that’s needed. It also offers just a couple of photos, but again, it’s all that’s necessary. The “Add to Cart” button is prominently displayed, along with related products.

 

Victoire Boutique

The Victoire Boutique product pages are simple, with a focus on the product image. There’s also a focus on related products.

Article

Article offers up simple product pages with a photo slideshow of product images. The “Add to Cart” button is prominent. Product details are given immediately below the description, while similar products are displayed below that.

Navigation

There are generally two main ways to navigate an ecommerce site: menus and search. Menus often incorporate drop downs with sub-menu items, depending on the size of the site and how many different kinds of products they sell.
While many sites incorporate basic search, ecommerce sites need more granular search and filtering options in most cases. Something like this:

These filters allow shoppers to narrow down the product options, based on common features.

Quick view

You should definitely consider incorporating a “quick view” feature into your website. This lets shoppers view a limited selection of product details right from browse or search results pages (usually in a modal window), rather than having to click through to the product page. Most of these also allow users to add a product directly to their cart from the quick view:

Anthropologie

Anthropologie’s Quick View feature pops up in a modal window that includes basic details, pricing information, sizes, and the ability to add a product to the shopper’s cart (“basket” in this case).

Free People

Free People’s Quick View has very limited product information, with just photos, reviews, pricing, color, and size information, plus the ability to add the product to the shopper’s basket.

ModCloth

ModCloth’s Quick View feature offers a full description, plus product details in a tabbed format. Photos and pricing information are also included, plus the ability to add products to the shopper’s bag.

Selecting an ecommerce platform

There are tons of ecommerce platforms out there for you to choose from, so how do you go about choosing the right one for your (or your client’s) store?
There are quite a few things you should check out prior to deciding. Some of these include:

• What programming language the platform uses. This is particularly important if you plan on doing a lot of customization, but it can also be important depending on what web host you plan on using (support varies widely for various languages).
• Whether the platform is free or paid. There are tons of both kinds of platforms out there, with good choices in both camps. Paid platforms often offer better support than free ones, but otherwise there are fully-featured solutions in both categories.
• Whether it supports the types of products you plan to sell (digital vs. physical products, for example).
• The payment gateways the platform supports, particularly if you’re already committed to using a particular one.
• The shipping services it integrates with.
• How easy is it to customize? How many options does the platform have to customize out of the box? Will you have to dive into the code every time you want to change something or can you make changes from the admin area?
• What’s the support like? Is it entirely community-driven or is there support straight from the developers? How much does it cost?

Take your time to explore the options out there, and figure out which platform best meets your needs.

Free platforms

There are dozens of great ecommerce platforms out there, with some paid and some free. The paid ones generally offer more support, and sometimes more features than the free ones, though there are some very full-featured free platforms, too.

PrestaShop

PrestaShop has well over 300 features, including one-page checkout, webservice integration, inventory management, downloadable product support, and much more. It’s free to download and totally open source.
PrestaShop comes with full documentation and tons of resources to get you started. There are (paid) modules to extend its functionality, as well as themes (also paid) if you don’t want to design your own site.

Magento Community Edition

Magento Community Edition is the open source arm of Magento, which is used by more than 240,000 merchants worldwide. It’s scalable, so it can grow with you, and it’s flexible to meet your needs.
There’s plenty of community support to help you if you get stuck, as well as full technical documentation. There’s also a host of extensions available (and of course you can create your own).

Spree Commerce

Spree Commerce is an open source platform that gives you full control and customization resources. It’s fully documented, though of course there’s paid support and training available.
Features include flexible and responsive site design right out of the box, with support for live video and animation. It has a comprehensive API for just about any aspect of the system, giving you even more control.

Zeuscart

Zeuscart is a PHP/MySQL based ecommerce platform. It’s simple to use and easy to customize without a ton of IT skills required to create a basic storefront.
The responsive admin dashboard is powered with Twitter Bootstrap, while the front end has a clean design that’s user friendly and looks great, with a large collection of UI components that work on all major browsers (including mobile devices).

OpenCart

OpenCart offers a ton of features, including support for unlimited categories, products, and manufacturers, support for multiple currencies and languages, free documentation, and more. It can also incorporate over 20 payment gateways and more than 8 shipping methods.
OpenCart also offers up support for product reviews and ratings, downloadable products, multiple tax rates, a coupon system, and much more. It’s fully templatable, with a usable default template right out of the box.

osCommerce

osCommerce has more than 7,000 free add-ons, and has a network of over 260,000 store owners and service providers. There’s an active community for support and help if you run into issues, as well as free and commercial support.
osCommerce has been around for 14 years, so they have a strong foundation on which to build your business. There are templates and themes available, too, so that you can customize the look of your site without having to start from scratch.

Zen Cart

Zen Cart is a free, user-friendly, open source shopping cart with tons of plugins and addons to extend its functionality. There are add-ons for admin tools, marketing, payment methods, pricing tools, and much more.
Zen Cart has excellent documentation, making it easy to take advantage of all the functionality it offers. There’s also a showcase of sites created with Zen Cart to inspire you.

simpleCart(js)

simpleCart(js) is a free JavaScript shopping cart that you can integrate with your existing website. There’s no database and no programming, just basic HTML knowledge required.
It’s got an incredibly flexible design, supports multiple payment gateways (including PayPal, Google Checkout, and Amazon.com payments), and supports international languages and currencies. It’s also high performance, with an incredibly small footprint, especially compared to a lot of large ecommerce platforms.

WooCommerce

WooCommerce, from WooThemes, is a great WordPress ecommerce plugin that’s got tons of features. You can sell anything with WooCommerce, including both physical and downloadable products. It even works with affiliate products.
It works with PayPal, BACS, and COD payments in the basic WooCommerce package, with tons of extensions for specific payment gateways. There are tools for managing inventory (digital or physical), shipping options, coupon campaign support, sales tax, and more. And there are great reporting features so you can keep track of incoming sales and reviews, stock levels, and more, right from WordPress.

Ubercart

Ubercart is a full-featured shopping cart solution for Drupal. It’s great for building a community around your store. You can sell premium content, paid file downloads, physical goods, and more.
It’s built as a module package, making it easy to integrate it fully with the rest of your Drupal site. And there are additional modules and themes to extend Ubercart’s functionality even further.

TomatoCart

TomatoCart was designed specifically to work great on all digital devices. It includes a full CMS with slide show, image menu, product scroller, banner manager, and Google AdSense integration. It also offers catalog management, product management, and order management tools, too.
TomatoCart also includes customer and user management tools, including the ability to import and export customers, polling tools, and more. Tons of payment gateways are supported, including Amazon IPN, Google Checkout, PayPal, Western Union, and more.

X-Cart

X-Cart offers both free and paid licenses (with a one-time fee, rather than recurring costs). It’s easy to maintain and modify, with open source PHP code. There are hundreds of add-ons that you can access directly from your store admin area.
X-Cart has a Bootstrap-based responsive design so it works on virtually any device, from cell phones to desktops. You can sell anything with X-Cart, including products, services, and downloads, and even sell offline using the X-Cart POS system. It integrates with all the popular payment gateways and shipping carriers, too.

WP e-Commerce

WP e-Commerce is a WordPress plugin that that works for physical products, downloads, and services. It’s completely customizable, with a streamlined checkout process that puts fewer pages between your products and checkout.
WP e-Commerce integrates with Stripe, PayPal, and more, and includes flexible shipping options. It works well with other WP plugins, supports WP widgets, uses shortcodes and template tags, offers tons of marketing tools, and more. There are plugins and themes available to extend it’s functionality even further.

Jigoshop

Jigoshop is a WordPress ecommerce plugin that includes powerful marketing and SEO features, as well as simple management for both physical and downloadable products and services.
Jigoshop offers the ability to assign Store Managers for managing day-to-day operations, as well as comprehensive store management tools with an intuitive UI. There are free and paid extensions to further extend its functionality. Free extensions include YouTube Video Product Tab, ShipWorks Connector, Multiple Admin Emails, and much more.

eShop

eShop is an accessible WordPress shopping cart plugin. It offers up a range of merchant payment gateways and shipping options, among other features. It’s highly configurable, with options for cart and checkout, products, and more.
There’s very thorough documentation available online, including great troubleshooting information. There are even some video tutorials for extra help.

5 inspiring ecommerce examples

There are tons of wonderful, well-designed ecommerce sites out there to inspire you. Here I’ll take a look at just five, and point out what makes different parts of these sites great.

The People’s Pennant

The People’s Pennant offers up a design that’s part minimalist, part retro. The “Buy” buttons are prominent without dominating the design.

The individual product pages are well laid out, with easy-to-find share buttons. All the basic information is easy to find (size, material, edition, etc.), with extra photos also prominently displayed.

The checkout process consists of only two steps past the shopping cart, a very streamlined approach.

Greats

Greats has a simple design with prominent photos of the products on the home page. Interspersed between the product images, there’s additional information about things like pricing and shipping.

Hovering over a product gives you the name, while clicking on it brings you to the detailed product info, with photos, description, and sharing links.

The features section on each product page is particularly interesting and well-thought-out.

Metta Skincare

Metta Skincare’s store is minimalism at its best. Hover over a product and reveal the name and pricing information.

Click on it and you get taken to a product page with a lot more detail.

Payments are taken care of via PayPal, and the overall checkout process is simple and streamlined.

JM & Sons

The JM & Sons store is minimalist, with a great product and feature slider on the home page that takes up nearly the entire screen.

Individual product pages have details about the products, as well as dimensions in a tabbed format. There are multiple photos of each product, displayed in a slideshow. Related products are included under an “Also Liked” heading.

One of the best features of the JM & Sons design is the slide-out shopping cart. Click on the cart icon at the top, and rather than a modal window appearing or being redirected to a new page, your cart slides out from the right-hand side of the page.

Lola Shoetique

The Lola Shoetique shop has a minimalist design that works well as a backdrop for the bright, bold images used on the site.

The results pages for product categories are simple, with photos that blend into the background, giving it a very clean design that puts the focus right on the products (where it should be).

The product pages offer a description as well as specs. One stand-out feature since this is a shoe store, is that fit guide that tells you how the shoes fit compared to standard sizing. While it’s not a design feature, per se, it is an incredibly helpful UX feature.

Conclusion

The basic elements of good ecommerce design are something every designer should be familiar with, if only because it’s bound to come up with a client at some point. And ignoring this aspect of design is either going to result in clients who are unhappy with the work you end up doing for them, or clients who simply turn elsewhere.