20 Awesome E-Commerce Website Design Tips

When it comes to running a successful e-commerce business, it’s the little things that can make all the difference.

Attention to detail when it comes to e-commerce website design is a critical part of a well-structured modern-day sales process that retailers all around the globe spend millions of dollars on each year trying to perfect.

From optimising their sales funnels, to conversion optimisation, to product bundling, to website security; the customer experience that your users are subject to is everything in online retailing.

In this article we’ll provide you with 20 awesome e-commerce website design tips that will help you increase sales and decrease the number of missed opportunities you’re seeing across your site.

Let's start by working on your shopping cart design

If there’s one thing you want to get right on your e-commerce site it’s your shopping cart design.

The goal of any e-commerce site is to encourage spending with the least amount of resistance on the users’ behalf. One of the absolute “must-do processes” to ensure that there are no barriers between user intent and finalising a sales process is undertaking a period of shopping cart analysis.

Below we’ve provided some helpful tips on what you can do to improve your shopping cart experience with the goal of optimising your sales funnel for less dropouts and increased up-sells. Each of these items are widely used by successful e-commerce retailers and will aid your e-commerce design greatly if implemented effectively.

1. Minimise your clicks to purchase

In 2000 Amazon patented one-click buying to circumvent typical shopping cart forms. This was revolutionary as it minimised the number of steps/clicks a customer was required to undertake to make a purchase.

By capturing and storing a customer’s credit card details online and authorising purchases with a single-click, customers we able to fly through Amazon check-outs. This technology has been licensed to many other retailers since then and has become an industry standard, but it’s surprising how many e-commerce retailers still do not take advantage of reduced click check-out technologies.

When designing your e-commerce shopping cart, you should aim for no more than the following steps to complete a transaction:

If your shopping cart involves anything more than this, you’re guaranteed to be losing customers. So make sure your cart is up to scratch!

Amazon 1-click shopping button

2. Add a ‘Trust Seal’ to your website check-out and payment gateway

In 2016 Baymard ran a study that reviewed the various elements affecting check-out abandonment. What their team found was that having a trust seal was the fifth most important element users wanted to see on an e-commerce check-out when attempting a purchase.

The value of Trust Seals on e-commerce sites

This means that without a trust seal, you’re going to lose customers who would otherwise make a purchase from you. An easy way to ensure your site is viewed as safe is by displaying the trust seal of your payment gateway vendor on your check-out. This simple e-commerce design trick will ensure your visitors stay on your site and make it through to payment without any loss in business.

E-Commerce Trust Seals

3. Ensure you offer ‘Guest’ and ‘Account’ check-outs

It’s a pet hate of mine (and I clearly represent the entire e-commerce community), that when I visit a site I'm forced to sign up for an account to proceed with my purchase. Yes, it’s important to capture your customers’ email account and permission for future marketing endeavours, but not at the risk of losing them during a sales funnel because this can be done at a later date.

Lot’s of customers simply want to make one-time purchases without creating an account. If creating an account for the purpose of capturing email and permission to market is what you’re trying to achieve, you can do this by adding a selected checkbox giving you permission to market to your customer. This will ensure that your check-out process runs smooth and no drop outs occur as a result of unwanted sales funnel steps.

Guest Check-out example

4. Provide product review capability

When your customers reach your check-out, you don’t want them leaving this page for any reason (unless it’s to finalise payment). That’s why it’s a great idea to provide a link to any line items in your check-out making sure they open up into a new window, or a small picture and the details of the line item to ensure there’s no temptation to leave your check-out page.

This simple trick is actually a really great way of keeping your customers focussed on making a payment. Personally I like providing a combination of both items with a preview of the product I’m looking to purchase, a short description of the product including the price, and a link to the actual product page. This works well using a simple summary table and is easily implemented across most payment gateways.

Tip: Make sure you include a "Remove" button as shown below, this further decreases any desire to navigate away from your check-out page.

Shoes of Prey Check-out

5. Don’t forget to include promo codes

There are literally thousands of examples of online retailers who have used promo codes to attract new customers, and why not? Why wait for your customers to come to you, list your promo codes on sites like RetailMeNot where you can get in front of a large audience of 'discount loving consumers'.

We recently wrote an article discussing how Dominos Pizza has been able to succeed online via the use of it’s technology, and you guessed it, promo codes are a major part of how they attract millions of visitors to their website and apps each month.

When using promo codes on your site ensure you keep track of the codes you release and that there is an expiry date on each code. This can save you a lot of money in the long run and prove an effective means of keeping your customers engaged in what you’re doing by releasing new codes online.

Dominos Pizza Promo Code at Check-out

6. Ensure you have a postage strategy

One of the final considerations your customers will make before deciding to proceed with a payment on your site is how much postage they’re going to have to pay. If your customers notice that they can purchase the same item for cheaper online but the cost of postage makes it more expensive than their local retailer, the sale will be abandoned.

In recent years’ free postage has become a major attraction for online customers, but it only works e-commerce retailers if the price is built into the overall product cost or you’re putting through enough volume to cover expenses.

One option which I like is free postage above a certain amount. TennisOnly.com.au does this really well offering free postage on items above $150. This allows them to account for shipping costs in the overall cost of an item, whilst offering $5 delivery on all orders below $150 which is a neat tactic also.

TennisOnly shipping options

7. Don’t forget to build your email database

As mentioned, your shopping-cart and check-out pages are a great place to build your email database.

If you're looking to get the most from your e-commerce design, consider segmenting your subscribers at this point. For example, if you’re operating an e-commerce store that sells both Men’s and Women’s clothing, you can record which item a customer purchased so you can send them relevant updates rather than just blanket emailing them with offers.

A simple way to do this is by incorporating a pre-selected checkbox into your check-out process asking permission to send email updates whilst recording what type of product or service the customer purchased.

Email newsletter subscribe

8. Offer multiple payment methods

These days there are literally hundreds of payment gateways that offer all sorts of payment methods that e-commerce retailers can use.

Typically your customers will expect a credit card option, but there are also many other options you may want to consider adding as back up. This includes:

AfterPay and Credit Card payment option

Let’s get to work on your product page

By now your shopping cart and check-out experience should be greatly improved. Next we’re going to focus on what we can do to improve your "Product" page.

Product pages are a fundamental part of high quality e-commerce website design. Whether you’re building your first e-commerce site or optimising an existing site, the following tips will help you drive more sales.

9. Optimising your “Buy” button

A well-designed “Buy” button is a must-have for any e-commerce website, and the good news is that it’s a pretty simple task to achieve. When implementing a Buy button we recommend the following:

E-commerce buy now button example

10. Make sure you include plenty of photos

If you’re shopping online, one of the most important things you want to see is plenty of photos of a product you’re considering purchasing. The reason this is so important, is because the goal of your product pages is to assure potential customers of what they’re purchasing.

Although the real estate industry is all about driving enquiry, across the board property listings are a great example of what you should be doing on your e-commerce product pages with regards to imagery. The listing below found on Domain.com.au has 20 high quality photos of a property for sale. Each of these photos gives you an excellent idea of exactly what’s for sale and adds a lot of value to the advertisement.

We recommend having at least 4 to 5 photos of each product you’re selling on your site encapsulated in an image slideshow. This is a great way to tempt your users into spending more time perusing your products and imagining what it will be like to own them.

Real estate image slideshow

11. Include as much product detail as possible

One e-commerce design tip you’re going to want to follow, is adding as much detail to your product pages as possible. The tech-industry does this particularly well. Takes companies like JB Hifi or Apple. If you’ve ever visited one of their product pages they go to a lot of effort to ensure there's a ton of product detail or their pages so both their users and search engines can understand what’s on offer.

High quality product descriptions and technical specifications are a great way to differentiate yourself from your competitors and add to your product image gallery.

E-commerce product description page

12. Related product up-sells

Related product up-sells are a must when it comes to e-commerce product page design. Below we’ve provided an example of a related product listing module when purchasing a Wilson tennis racquet on Amazon.

As you can see all these products are items that a tennis player would like to purchase in addition to their new racquet. This technique is simple and can add a lot to your bottom-line. Not only this but related product listing up-sells are a great way to profile customer behaviour for email marketing campaigns, even if they don’t make the up-sell purchase right away.

Related product up-sells

13. Optimise your URL’s and Title tags for readability

A great way to enhance your e-commerce product pages is by optimising for your pages for increased search engine visibility. The simplest way to do this is by accurately describing the content of your pages in your URL's and title tags.

Starting with your Title tag, try to keep it under 70 characters and state the name of the product you’re selling. With your URL, separate each of the words in your product title with a hyphen character (-) and ensure all characters are lowercase. This is best practice for URL structure.

Below is a great example from Rebel Sport showing the URL and Title tag of a pair or “Nike Mercurial Superfly V Mens Football Boots”. This is a highly unique product name and is a term someone looking to purchase these boots would enter into Google. Optimised Title tags and URL structure are both part of Google's top 200 ranking factors and should be a consideration when implementing each of your e-commerce product pages.

Proper e-commerce URL structure

14. Include sizing, colour and quantity details if relevant

If you’re selling clothing or shoes, displaying clear sizing, colour and quantity information about a product is really important if you’re going to close a sale.

Things to consider when displaying these details include:

Humans by nature are highly visual, hence displaying detailed sizing, colour and quantity information is a great way to increase the chances of a sale on your e-commerce site. Below is a simple example found on the Portmans site. This includes colour, sizing and quantity details which are really user friendly.

E-commerce sizing chart details

15. Consider offering bulk-buy and bundling functionality

Product bundling and bulk-bulk e-commerce strategies are both excellent ways of getting your customers to purchase more items from you. Why? Because people love a deal.

If you can offer multiple items at a discount, free shipping on multi-purchase orders, or discounts for bulk purchases, this can be a great way to keep those dollars turning over.

Companies such as Alibaba have built the entire business model around bulk-pricing, whilst companies such as GoDaddy have made a lot of extra sales using bundling as a strategy offering highly affordable add-ons.

Alibaba product bundling

Advanced e-commerce website design tips and tricks

Now that your shopping cart, payment gateway and product pages are working well, it’s time to focus on some advanced tips and tricks you can use to enhance your e-commerce website design. Let’s get started with your home page “hero slideshow”.

16. Limit your Home page "hero slideshow" to three slides

When it comes to hero slideshows, “less is more”. The reason this is the case, is that your visitors generally don’t stay on your home page long enough to view all your slides, therefore you don’t want to slow your home page down by including too many slides that simply won’t get seen.

Below we’ve provided an example from web hosting company GoDaddy. As you can see GoDaddy has included three slides in their slideshow, each with important an offer that's available across their site. These offers are updated regularly, so don’t forget to refresh your hero slides to build your repeat visitation base.

Limit your hero slideshow to 3 elements

17. Understand your “cost of acquisition calculation” to collect emails

One common tactic many e-commerce retailers use is incentivising email sign ups with a gift certificate using a cost of acquisition calculation.

For example, if you’re looking to grow your email database and are happy to spend $1 per subscriber, you may be able to achieve this with a seemingly higher offer like the one below from Uniqlo.

In the below example Uniqlo is offering a $10 discount when a customer makes their first online purchase. When you consider the actual cost of doing business, it’s important to note that it’s cheaper to sell online and the $10 incentive is worth considerably less due to product markup. Not only this, but Uniqlo has an opportunity to impress their new customer and up-sell them on their website meaning this $10 voucher could likely earn Uniqlo considerably more than the "$10" cost to deliver a subscriber (even if they don’t use the voucher).

Popup email subscribe offer

18. Your customer support should be easily accessible and multi-channel

These days’ customers like to interact with e-commerce vendors across a variety of channels, and it’s important that you cater to common customer support channels to keep your customers happy.

Firstly, make sure you have a support@ email address readily available that your customers can email you on to discuss any issues they may be having. This should be configured to be received via your contact form and be linked to an online help desk service such as FreshDesk where you can assign each customer a support ticket.

You should also provide phone support to cater for both local and out of office hours. E-commerce is a 24/7 game, so you should aim to assist your customers for as much of the day as possible. At a minimum, aim to run your phone support from 8am until 8pm, 7 days a week. This is a vast improvement on standard business hours and will differentiate you from your competitors because e-commerce customers generally shop more frequently during personal hours.

A great example of a company using social media as one of their primary support channels is Best Buy. We recommend check out Best Buy Support for an awesome example of social customer support.

Best Buy Support - Twitter Account

19. Ensure your site is SSL secured

In 2014 when Google released this post on the Webmaster Central blog, it has been clear that having an SSL certificate on your site is a search engine ranking factor not to be ignored. Therefore, if you don’t have an SSL certificate installed on your e-commerce site you’re crazy!

Installing an SSL certificate is both easy and affordable with most hosting providers offering SSL certificates for sale. You should be able to pick up an SSL certificate for a single domain for around $100 per year, and a multi-domain certificate for a few hundred dollars per year.

SSL certificate installed on OSE.com.au

20. Provide easy to use search filters

Over the years there’s been a lot of debate about the value of on-site search, however during that time nobody has denied it’s value in the e-commerce world.

If you’re running an e-commerce store you want to make sure you’re designing your e-commerce search to have plenty of filters your customers can use to hone in on exactly what they’re looking for.

A great example of this is Sedo.com, a leading domain brokerage site. Sedo’s customers can spend hours searching for the perfect website name so need awesome filters than can help them narrow their results. I recommend taking this site for a spin as Sedo's site may give you some great ideas you can apply to your own e-commerce search facility.

Sedo.com search filters