E-commerce web design – 8 basic, ‘must have’ components

Must have design elements featured image

It’s a big wide world online, and the competition for customers is massive and still growing. Add to that modern society’s preference for instant gratification and you’re faced with a challenge. If you don’t grab your visitors’ attention the moment they land on your site, they’ll click away before looking any further. Masterful e-commerce web design is the key to success here.

The goal of e-commerce web design

If you want your business to make money and grow, you need to focus on conversion. Every visitor is a potential buyer, and to attract, engage and keep your customers, your e-commerce website should be beautiful, functional and strategically thought through. In essence, we’re talking clean, easy and fast.

This blog will take you through the basics that need to be in place to keep your customer interested from the word go. There are also times when your site may need a redesign, and bearing these aspects in mind will serve you well then too. Although e-commerce web design is about a lot more than just the basics, these principles will take you a long way.

Talk to us if you want to know more.

The 8 basic ‘must have’ components for e-commerce web design

Some things are non-negotiable if you want to attract and keep your customers. Let’s look at what those characteristics are:

1. Responsiveness

With so many people now using mobile devices to view sites and buy online, a responsive site is essential. The design and navigation need to be simple, so they easily translate to a different viewing method. Product pages should also be cleverly designed so very little zooming or panning is required in mobile mode.

Tip: Use the What Is My Screen Resolution tool to test your site on different screen sizes and devices.

Desktop view:


Mobile view:


2. Clear and easy navigation is key

While your e-commerce web design needs to be beautiful and engaging, it also needs to follow tried and tested rules. If your visitor has to think too hard or gets irritated, chances are you’ve already lost them.

These tips will help:

  • Once they’ve reached your e-commerce site homepage, visitors should be able to quickly find what they need. Help them do that with well-organised categories, filters that narrow down options and/or a search bar. This is especially important if you have a large number of products on your site.
  • Make your navigation clear, intuitive and easy to understand. Avoid complicated menu wording and rather use familiar, but descriptive terms so visitors know where to go. Keep menu items to a minimum (7 or less is the recommended number).
    • Consider sticky navigation if your page scrolls down very far.
    • Consider drop-down menus or collapsible side menus – but only if you have many products and it eases navigation.
  • Don’t make your site structure too deep. Customers should be able to get to their final destination within about 3 clicks.
  • Take SEO into account when designing your site structure. The more concise your navigation, the more homepage authority and trust (known as ‘link juice’) flows to interior pages, making them more likely to rank in searches. When your navigation has too many links, the ‘link juice’ is diluted as you move away from the home page.
  • Use text-based links instead of graphical, button-based navigation. Search engines can’t find buttons, they are hard to update and they load more slowly than normal links.

Look at this site’s clean, but descriptive menu:


Link to source

3. Call-to-action buttons that make visitors’ decisions very easy

  • Make your call-to-action buttons easy to find, so your visitor is gently guided through the buying process. Visitors must feel clear and confident about any action they take.
  • Make sure there are no pop-ups, advertisements or social buttons competing with the call-to-action button. It should stand out with a bright colour and clear description.
  • Support your visitors further with a live chat feature like Zendesk making it easy for them to ask questions of you on the spot.

On this product page, the product name and the call-to-action button grab your attention at first glance:


Link to source

4. Excellent visual images

Your customer wants to know exactly what they’re getting for their money, so help them to see that. Products should be clearly displayed using good resolution images. If possible, include a 360-degree view from a service like Sirv to show customers the product from different perspectives. Include product videos too, and you increase your chances of making a sale even further.

The product page below has excellent resolution pictures, showing all available colours:


Link to source

5. Helpful product information

Help your customer decide what they really need (and reduce queries to your customer service team) by providing clear and useful product descriptions. Structure them well, so they can decide what level of detail they want to see, and highlight how they will benefit from owning the product. If you have relevant “how to” videos or blogs, link these here too. Showing related products can also be extremely helpful, as you may sell another product that is complementary or better suited to their needs.

In the example below, the product image is excellent and the Add to Cart button is very clear and prominent. At the bottom of the picture, you will also see ‘tabs’ (we can customise these for you), where you should enter as much information as possible about your product. In this example, there are tabs showing product details, specs, sizing (expanding on the sizing shown under the price), warranty information and reviews. In the kettle example above, the customer chose to have tabs for an overview, specs, videos, downloads and FAQs.


Link to source

6. Ratings and reviews

Including ratings and reviews in your e-commerce web design has so many benefits. It informs and reassures customers by letting them see that other buyers of the product are happy with their purchase, and it also gives you useful feedback on your products. As an added bonus, the regular new content also boosts your site placement in search engine rankings.

At Comalytics, our software includes reviews. We also recommend being very pro-active about asking for reviews by sending emails requesting feedback after a customer has bought and used a product for a while. We integrate with Yotpo, which is excellent for managing pro-active follow-up emails for reviews.


Link to source

Reviews start to become very credible when you have more than 7 reviews and not all of them are for 5 stars. The reviews are about establishing trust, not only in the product, but also in your services as a merchant. Addressing the concerns of a customer that left a bad review can have a very positive impact on your business.

7. Fast and efficient check-out

The easier you make check-out, the less likely people are to change their mind half-way through. Regular customers might want to log-in either directly to your site or via a third party such as Gmail or Facebook, so they don’t have to re-enter all their details. Others may prefer to check out anonymously, so offer that option too. Try to get their email address if you can, but don’t give your customers any excuse to leave!

Here is an example of guest checkout:


Link to source

8. Personalisation

Personalisation is a very important trend for the future and you can differentiate yourself by starting to use it extensively right now. Address your customers personally wherever possible, and draw on their past purchases or previously viewed pages to create recommendations tailored specifically for them.

At a minimum, you should have ‘customers who bought this also bought…’ and/or ‘related content’ features as shown below. Note the stars for reviews! Don’t they make you want to investigate and buy?


Link to source


The bottom line…

Growing your business in a competitive market requires excellent e-commerce web design. Take care of the essential features, and you greatly increase your chances of attracting and retaining new customers. That’s an investment in the future success of your thriving business.

Contact us to discuss your B2C or B2B e-commerce needs.

Share this content!

Use us to change your game

Get in touch for a free consultation today

Stay informed! Visit the SA Department of Health's website for COVID-19 updates: www.sacoronavirus.co.za