The Ultimate Guide to eCommerce Web Design

Designing a new eCommerce website for your company is exciting. It’s also a lot of work. There’s countless elements to consider from fonts and colours to product images and the checkout process. 

And whether you’re new to web design or a total expert, eCommerce is an evolving industry that requires the most up-to-date design features and best practices.

What is an eCommerce website?

An eCommerce website allows businesses to sell physical or digital products and services on the internet rather than from a physical storefront. It can process orders, accept payment, manage shipping & fulfilment, and more. 

In addition to many other benefits, an eCommerce website enables business owners to run their business entirely online without having to pay for a brick-and-mortar storefront.

What are basic requirements for an eCommerce website?

Though eCommerce stores can be built with beautiful designs, robust product catalogues, and hundreds of other features, the basic requirements for an eCommerce website are:

As your eCommerce business grows, you’ll add more products, categories, pages, and features. But if you’re just starting out, don’t overthink it – keep it simple.

How do you design a website for eCommerce?

There are plenty of platforms available to design eCommerce websites. Shopify & Squarespace are popular options if you’re a total beginner, and WordPress is a solid option if you’re more experienced with web development. 

But if you’re looking for a totally custom eCommerce website with an easy to use CMS (content management system), our team at Activate Design is the only choice for your web design needs.  

Design your next eCommerce website

Overview

Designing a website for your eCommerce store is exciting. It’s your chance to display the brand that you’ve worked so hard to build – and that’s why your store’s design is so important.

There’s a lot to consider: functionality, colours, fonts, images, pages, desktop v. mobile, checkout, payment options, and more. 

The good news is, we’re here to guide you. With our web design guide for eCommerce, you can confidently design a beautiful website to sell your products or services. 

Structure & Functionality

As important as it is to design a beautiful website, appearance is secondary to functionality. As soon as users land on your site, they’ll begin to browse for different products, deals, and more. 

So to create the best user experience and increase the likelihood of a purchase, you must first design a well organised and functional website. Important things to remember are:

  • Clear calls-to-action (CTAs) with proper size & contrast
  • Properly linked buttons for “Add to Cart” buttons, contact buttons, menu items, etc.
  • Fast-loading website to keep users on the page
  • Responsive design that adapts to the device size 

Main Menu

Typically, most people’s eyes will go directly to the main menu to make their next decision. When designing your main menu, consider the most important things users might look for – products/categories, about page, cart/account access, and a search bar. Keep in mind, your main menu may look different than another website.

We’ll explain more about each of these elements later, but it’s important to understand their context in the main menu first.

Shop/Products 

If you’re selling products online, there has to be a button in your main menu that allows users to shop for those products. 

For smaller product catalogues, this may include just a simple “Shop” or “Products” button. For larger catalogues, your main menu should include a drop-down menu with the different product categories/types to allow users to navigate straight to their desired category. More on categories later…

Contact Information

Your contact information is another must-have item in your main menu. Whether it’s a phone number, social media icons, or link to a contact form, your customers need to be able to reach you.

Make it easy for them and give them some options. For an added bonus, consider adding a live chat option. 

About Page

Consumers buy brands not products. To set yourself apart from competitors, it’s important to have a unique and compelling brand story. Whether it’s a family business or a mission-driven company, let your customers know who they’re shopping with.

Cart Icon/My Account

For users shopping for multiple items, it’s important to include a “Shopping Cart” icon so they can quickly view what is in their cart. Most commonly, this is located in the top right of the screen. 

If you offer users the chance to create an account to earn rewards or save their information for faster checkouts, make it easy for them to access their account with an icon in the main menu. 

Search Bar 

To make things even easier for users, add a search bar to the main menu. This will help users quickly locate certain pages, products, and more without having to explore the navigation items.

Enable auto-complete suggestions to help guide users and make the search tool available on all pages for quick & easy access. 

Other Navigation Items

Aside from the main menu, add a filter option to easily allow users to sort products by price, size, ratings, and other applicable variables.

As your website grows, there will be more pages and links. To avoid a poor user experience and negative SEO elements, periodically audit your website for broken links (404s) to make sure navigational items are working properly.

Mobile vs. Desktop Design

As mentioned earlier, over 50% of website traffic comes from mobile devices. So when designing your eCommerce website, it’s important to consider the look & functionality of your website on all types of devices. 

With less display room on mobile devices, you can’t display the same amount of information as you can on a desktop. In that case, you’ll have to make a decision on which elements are most important to your mobile website.

Take a look at these two examples below, one of a desktop design and one of a mobile design. Notice the responsive design changes between mobile and desktop.

standard desktop website

responsive mobile website

Branding

This may seem obvious, but your website’s branding needs to be synonymous across all pages and align with your mission and products. This goes for fonts, colours, images, and more. 

For fonts, keep it simple. Avoid artsy or calligraphy fonts that are difficult to read and stick to fonts such as Helvetica, Calibri, Open Sans, Montserrat, etc. 

The same goes for colourways. Choose a simple colour scheme that matches your products & environment, contrast well, and leave enough room for white space, like HydroGarden.

simple homepage for hydrogarden

If you’re offering a special deal or announcing an upcoming event or product launch, add an announcement bar to the top of your website to let customers know! 

And though you may be tempted to use a pop-up to make sure they see it, most consumers find these distracting and may exit your site. If you want to use pop-ups, test them within your audience. 

Images & Video

When shooting photos for your home, about, and product pages, be sure to keep your photos consistent with regards to the environment, lighting, and backgrounds.

If you’re selling clothing or other personal accessories, include photos of people wearing the products so they can see what it looks like when in use. Typically, these photos tend to perform better (more conversions) anyways.

Trust & Security

If your brand has been featured in magazines, news outlets, or other publications, let your customers know. Featuring these endorsements on your website serve as social proof and eliminate any doubts the customer may have about your product or brand, leading to more purchases. 

social proof example

Similarly, include product reviews directly on product pages for added social proof from real customers. Reviews, especially positive ones, encourage users to purchase because others have already done so and had a positive experience. 

product page reviews example from party pastries

Page Design

There are certain elements of web design that apply to every page of your eCommerce store, but there are nuances for certain pages. 

Home

Your Home page is typically the most visited page on your website. And depending on your business niche, design principles may vary. 

Generally speaking, your home page can be divided into two parts: “above the fold” and “below the fold.'' Above the fold refers to the content that is visible on screen before users begin to scroll. Similarly, below the fold refers to any content that is visible after users begin to scroll further down the page.

Because the first few seconds of a visit are so crucial, your above the fold content has to keep users on your website. It should include a product or brand image with a clear CTA.

As users scroll further down the page, highlight your most popular products, value proposition, and brand identity.

Product(s)

Product pages are where users make buying decisions – you want to make sure they purchase a product.

Product Photos & Videos

It’s no secret that product photos are important. But just how important?

They’re the first thing that consumers notice when scrolling. Without high-quality product photos, customers won’t buy your product. 

To make your photos stand out, take photos against a consistent, aesthetically pleasing background. A plain white background is the most common, but it isn’t the only option.

Let’s say you operate a swimwear brand. Rather than a white background, taking your product photos at the beach, near a pool, or another tropical location might better match your brand image. As a bonus, it also allows potential customers to picture themselves wearing the swimwear in the same location.

Let’s take a look at another example. Consider Party Pastries, a pastry catering company for personal & professional events & celebrations. Rather than use a plain white background, they chose to shoot photos of their products on decorative tables, similar to where the pastries would be present at one of these celebratory events.

creative product photos example

If you’re really looking to upgrade your product photos, consider using user-generated content (UGC). Photos & videos of existing customers will help convince potential customers to make a purchase. 

Product Descriptions

To complement beautiful photos, you’ll need high-converting product descriptions. 

The most important thing to remember when writing product descriptions is to sell the benefits of your product, not the features. Consumers don’t care what the product is – they care what it can do and how it can improve their life.

And to make sure your descriptions resonate, write as if you’re chatting with a friend, not a stranger. 

Other

Even with great product photos and product descriptions, your product page layout is still important. Add a clear CTA, whitespace to balance the text & images, and reviews that boost trust and increase conversion rate. 

About/About Us

Consumers buy from brands, not products. That’s why your About page is so important – it allows you to share your brand mission, values, and impact with potential customers. 

Let your customers know how your brand came to be, what you stand for, why you do what you do, and anything else that might resonate with them. Then add photos that showcase your team, community, and products in action.

Contact

No matter how much information you provide about your brand, products, and policies, customers will still want to get in touch with you. When designing a Contact page, give visitors multiple options to do so:

  • Contact Form
  • Email Address
  • Phone Number
  • Social Media Icons/Links
  • Address & Map Location (if applicable)

Make sure you are clear about how customers should contact you. For example, if you only address questions about shipping & returns via email, let them know to avoid miscommunication.

FAQs

A Frequently Asked Questions (FAQ) page helps answer common questions for visitors about products, shipping & delivery, warranties, and more. Not only does it answer common questions for your visitors, it can also reduce the load on your customer service team.

There aren’t many design aspects to an FAQ page, but there are certain things to consider and be sure you include. Generally speaking, it’s best to sort the questions into categories (like the following) so that visitors can quickly find the answer they’re searching for. 

Shipping & delivery

How soon can customers expect to receive their order after purchasing? Do you offer free shipping? Let them know to avoid losing any customers at the checkout stage or dealing with misunderstandings post-purchase. 

Returns & exchanges

Do you offer returns? Exchanges? Only on certain products?

Warranties

Depending on the product, you may offer warranties for weeks, months, or even years. With warranties, customers may feel more comfortable purchasing from your online store. 

If you have one, make sure to clearly explain it to avoid any issues. 

Sustainability, packaging, etc.

Do you use sustainable packaging? Offset your shipping emissions? Let them know – it could just be the reason customers make a purchase.

Other

If there are any other FAQs that often arise when speaking with customers, be sure to add them. If one person has asked, it’s likely that another will ask the same question. 

The best way to find out what to include on your FAQ page is to speak with your customers (and customer service team if you have one). 

Policies

Policy pages aren’t meant to be beautifully designed pages. They’re meant to present legal information in a clear, straightforward manner. 

In any case, there are still certain policies to include. Always be sure to have your lawyer or legal counsel review these before adding them to your website. 

Shipping & Returns

To avoid any misunderstandings, chargebacks, or negative reviews, make sure your shipping, exchanges, and returns policies are explicitly clear. Let customers know exactly what to expect and when to expect it.

Privacy

Privacy policies are a must-have for any online business, and especially for eCommerce. In order to capture customer data for email/SMS marketing, retargeting, and more to grow your business, you have to let customers know that you’re collecting their information.

There’s no need to make room for this page in the main header, just simply link it in the footer at the bottom of the page. This is common practice, so customers will know exactly where to look.

Terms & Conditions

Though not always necessary (depending on your location), a Terms & Conditions page can protect your business in the event of legal issues.

And just like the Privacy page, place a link to it in the footer for easy access.

Landing Pages

Landing page design will vary depending on traffic source, audience segment, product type, and several other factors.

However, they should all follow one main principle – prompt the user to take a specific action. Whether it’s a purchase, subscription to your newsletter, or something else, the landing page should be designed with only that goal in mind.

Breaking down landing page design for every possible variation is outside the scope of this article, but there are some general design principles to follow. We’ll break down two important factors to consider when designing a landing page for your eCommerce website.

Traffic Source & Audience Segment

Let’s say you’re driving traffic to your eCommerce store via email marketing and Google Ads. Now imagine that all of these users are landing on the exact same landing page.

Let’s take a step back. If we consider the standard customer journey, users from these channels are in different stages of this journey. Thus, they shouldn’t land on the same landing page.

  • Email Marketing - These users have already subscribed to your list, meaning they’re familiar with your brand and your products. Depending on the email campaign, landing pages for email traffic should be designed to sell products.

 

  • Google Ads - These users have likely never heard of your brand but discovered it in search results. If they choose to click on your ad, it’s unlikely that they’ll make a purchase the first time they visit your website. Instead, the goal of this landing page should be to add them to your email or SMS list, where you can then nurture them along the customer journey, eventually resulting in a purchase.

In short, consider which stage the traffic is in, then design a landing page catered to that audience segment.

Product Type

Landing page designs will vary between eCommerce products. For example, a landing page for a clothing brand will look much different than a toy or nutrition brand.

To figure out what’s working in your niche, check out your competitors to see what’s working for them. But don’t be afraid to test out design principles that are working effectively outside of your niche.

Payment & Checkout

If you’ve implemented these web design principles, your customers should already be on the checkout page. And to make sure they complete the purchase, keep the checkout process simple, easy, and hassle-free with these basic tips.

Offer multiple payment options

Don’t give customers any reason to abandon the checkout process. Give them multiple payment options like credit card, PayPal, buy now & pay later, etc. so that they can pay how they want. 

Make it frictionless

Minimise the number of fields that are required. Customers will abandon checkouts if they are forced to enter too much personal information. 

Subscription/account signup should be optional

Though it may be tempting to automatically add users to your email list or a recurring subscription, it is ill advised to do so. If they didn’t opt-in, chances are they’ll unsubscribe later once they realise. 

Offer free shipping

Customers expect free & fast shipping – give it to them. Almost half of all customers abandon their shopping carts because of high or unexpected checkout costs including shipping, taxes, and extra fees. 

If you are unable to offer free shipping with your current margins, consider building the shipping costs into your product price or offer free shipping if customers spend enough money (ex. “Free Shipping on All Orders over $100”). 

Designing your eCommerce website is a special experience, but it’s not so simple. There are countless elements to include – design aspects, policy pages, payment information, and so much more.

If you’re looking to design your dream eCommerce store, get in touch with us today.

Build your eCommerce website

You might also like: