How to Design a Beautiful, Functional E-Commerce Site

The primary goal of building an e-commerce site is to lead your visitors seamlessly through the shopping process and close the sale. Whether you choose a hosted or self-hosted solution, you should plan the design of your website with this goal in mind.

Your site should be:

  • Easy to navigate and use.
  • Laid out in a logical manner.
  • Designed according to your customers’ needs and preferences.
  • In line with your brand image.

e-Commerce | Link360

How do you achieve this? It’s not as complicated as it seems! As you’ll discover in our free Definitive Guide to Choosing the Perfect E-Commerce Host, many platforms now do most of the heavy lifting for you with pre-coded templates and themes. All you need to do is take note of some simple but effective design principles…

Make your homepage count

Your homepage is your visitors’ first impression. It represents your brand and your product, so if it looks terrible, they’ll assume your product is, too. Garish colors, dated design, cluttered layouts, and walls of text will all send visitors running, so make sure your homepage is visually pleasing at first glance.

We process images much faster than words, so when you only have seconds to make an impression, photos are your friend. Use high-quality, professional images that tell your brand story and showcase the best of your products.

As well as a great design, your homepage should clearly communicate who you are, what you sell, and why they should buy from you. Include a prominent value proposition summing up the essentials.

Now you’ve hooked your visitor, tell them what to do next with a prominent call to action (CTA).

Make your site easy to navigate

After years of using the web, we tend to have instinctive ideas about where to find certain things. We expect to see navigation across the top of the site, and sometimes down the left-hand side too, and we look to the top right-hand corner for the search bar. Don’t try to be edgy and mix things up, as you want to make the process as easy as possible for your customers.

If you have an extensive catalogue of products, break your navigation down into a few smaller sub-categories. Use simple, logical headings that your customers are likely to know and use themselves. For example, if you’re a B2C tech brand, don’t label your categories according to industry jargon as your visitors might feel excluded, lost, or frustrated.

Include a customizable search function

A good proportion of your visitors will go straight to the e-Commerce Search | Link360search box to find what they’re looking for. You should ensure that your products are tagged logically according to the search terms your customers are likely to use. You can support this by having an auto-complete function programmed with your specific product tags and descriptors to make results more accurate and relevant.

Some customers are looking for the best-rated product, while others are simply looking for the cheapest. Give your shoppers the chance to sort their search results according to price, rating, relevance, features, release dates, and so on.

Don’t make people register

Registration is a great way to make the check-out process easier for future purchases and you should definitely provide that option. However, some sites force people to submit their details in order to make a purchase. If the person doesn’t want to register, this might well cost you the sale.

If you’d like users to register or log in, you can explore options like offering a discount or allowing them to stay logged in or use one-click log-in via their social media accounts. Whatever you do, though, don’t force them!

Use professional photos

We touched on the importance of showcasing your products using images on your home page, but this applies throughout the site. Images help you to sell on an emotional level, targeting powerful base instincts like hunger, sexuality, and power.

Because your customers won’t be able to see your product in person, good photos also serve to reassure them about what they’re buying. You should show the product in good lighting, from various angles, in all available sizes and colors, and with scale representations if applicable.

A simple iPhone photo won’t cut it, so invest in a good photographer for professional, high-quality images. Make sure they’re high-resolution and optimized for fast loading, and ideally in JPEG or PNG format.

Use detailed descriptions

Remember, your customers are buying your products without the chance to try, see or touch them first. If they don’t get what they’re expecting, you could end up with a high return rate and a frustrated customer base.

Try to paint as vivid a picture as possible with your description so that your customers are clear on exactly what they’re getting. For higher-ticket items, this also gives you a chance to add a little extra sales juice and address any objections they might have.

While it’s good to give detail, you shouldn’t overwhelm your customers with unnecessary information. It can be a tough balance to strike, so if words aren’t your strong point, then employ a professional sales copywriter to come up with descriptions for you.

Give recommendations

This black cocktail dress might not be quite what your shopper is looking for. Before she has chance to leave, show her some other options.

You can set up most e-commerce stores to display items with similar tags underneath a product. In this case, you might display other black dresses, or other cocktail dresses, to keep her shopping and increase the chances of a purchase. You might also show her dresses that other visitors have viewed or bought after viewing this dress, knowing that they have similar tastes.

Provide reviews

Social proof is a powerful selling technique. We equate ‘popular’ with ‘quality’, so when visitors see that many other people have bought and loved your products, it  inspires trust and reassures them that they’re making a solid choice.

5 star review | Link360

Provide reviews from past customers under each product. You can solicit these reviews via automated emails, set to be sent out a few weeks after a purchase is made. You can also use these reviews in abandonment emails, sent out when a visitor leaves without completing their purchase.

Find out more about email automation and abandonment emails in How to Promote Your Store With Outbound Marketing.

Use clear calls to action

As mentioned in the home page section, a call to action (CTA) tells your visitor what to do next. It’s usually in the form of a button hyperlink, featuring a text instruction such as ‘Buy Now’ or ‘Add to Cart’.

Your CTA buttons should be prominent, making use of bold colors that stand out from your site. The text instruction should be clear and contrasted against the button. Since many visitors will be browsing a mobile device, the button should be big enough to be easily read and clicked on any scale.

You can use calls to action anywhere on your site to nudge people through the sales process. A ‘browse the range’ button on your home page can direct people to featured products, for example, while a CTA next to a product can encourage people to add it to the cart.

Make your shopping cart visible

shopping cart | Link360Imagine that your visitor browses through the site for a half hour, adding hundreds of dollars worth of products to her cart. She’s ready to pay and proceeds to the checkout, only to find that her chosen products aren’t there. Do you think she’s going to spend another half hour re-adding her purchases, or leave the site in frustration and take her money with her?

A shopping cart icon showing how many items are in the cart can help to reassure your customers that their purchases are being added, and avoid a situation like the one described. It’s usually placed in the top right-hand corner, and should be of a size and color that makes it stand out from the site.

Make the checkout process simple

Your customer is ready to buy! Your goal is to make it as easy as possible for them. If they have to search for the checkout, or go through a long and convoluted process, you risk them getting bored or frustrated and abandoning their cart.

Include a prominent checkout button at every stage of the shopping process with a clear call to action, so when your customer is ready to pay, checkout is just a click away. Keep your checkout page short, simple and free from distractions like side navigations or further products, as this could take them away from their purchase. Finally, use a progress indicator to visibly show their current stage and reassure them that they’re almost done.

You’ve built a great e-commerce store – what next?

By following these guidelines, you can build a site that’s easy and enjoyable for your visitors to use. But how do you get those visitors in the first place? That’s where marketing comes in.

Check out the following pages to learn how to promote your e-commerce store…

Promoting Your E-Commerce Store With Inbound Marketing

Promoting Your E-Commerce Store With Outbound Marketing


New Call-to-action


Link360 is an Inbound Marketing Agency Located in Greenville, SC.  We specialize in generating leads for our clients through attracting visitors to their website, converting them into leads and closing them as customers.  If you have any questions, or would like your own free Inbound Marketing Analysis, please contact us now.



Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Recent Posts

By Jim Burns - March 5, 2019

eCommerce Statistics You Should Know

By Jim Burns - November 7, 2018

What is the Best Free CRM Software for 2019?