eCommerce Website Design: 17 Conversion-Boosting Principles

Good design drives 94% of the first impressions and 75% of your store’s credibility.
Safe to say, design matters when it comes to conversions.
And the good news is that even small optimizations can get shoppers to take the next step.
1. Place your images in the first or last “third”
3. Place elements based on eye-scanning patterns
4. Follow “visual hierarchy” in your website copy
6. Structure your product descriptions for better readability
8. Use color psychology to draw attention
9. Place reviews where people are most likely to read them
10. Use patterns and repetitions to draw attention
11. Group strategically – induce action
13. Design to improve up-sells and cross-sells
14. Run "thumb zone" test on your mobile site
16. Place a global header – with offers
17. Create a section for categories – outside the hamburger menu
A large image with elements all across the screen distracts shoppers.
The best way to display pictures on your website – use the rule of thirds – especially in the first fold of your homepage.
Simply put – divide your display area into three parts – and use the major subject in the leftmost or rightmost third.
Leave the rest two-thirds freer – avoid adding images in this part.
Toms does this quite well. Their image is in the first third and they have used the rest of the space for text and CTA – de-cluttered, elegant and easy to navigate.
Negative space is nothing but whitespace – the space you are not using on your website. Contrary to the word, it is quite positive for you as it makes your site more scannable – improving conversions. Here are a few ways to improve the negative space:
Let’s look at MVMT – they have aced their whitespace – made their website really easy to scan.
To know which spots shoppers look at the most, let’s understand the F-shaped scanning style.
The shoppers begin from the left top corner and read to the right → scroll down and repeat.
How to use the F-shaped scanning style to increase action on your website?
Verve coffee uses an F-style scanning pattern to its advantage – keeps all the important information, CTAs and other links on the left.
Unintuitive text styles and font sizes can bewilder your shoppers – so much that they can permanently lose trust in your brand.
Here are a few simple steps that will make your online store look neat.
You must give your shoppers very clear instructions as to what they should do next – that’s how you bring them down the funnel.
This is done through well-crafted CTAs.
Here’s a small checklist for you to create powerful CTAs:
Recommended reading: 22 Ways to Use Visual Cues to Drive More Conversions in eCommerce
The best way to lose a customer is to give them big lumps of product information – hence design your product descriptions in a way that can be consumed quickly.
Some tips that work are:
As we have been saying – time is of the essence. Giving time to shoppers only makes them rethink their purchase – super detrimental.
What needs to be done is – minimize the steps to checkout.
The simplest way to do this is to add a direct ‘Buy’ button and make the ‘Add to cart’ step optional for the shoppers – as a secondary CTA.
Psst. The primary CTA - ‘Order Now’ works slightly better than ‘Buy Now’ on product pages. You might want to test it out.
Work on color contrast to catch attention.
Use contrast to keep text, headlines, and call-to-action buttons highly noticeable.
For instance, design your font and button colors in high contrast (e.g. dark red) against the background (e.g. white or light yellow).
The elements that you want to highlight (e.g. subscribe buttons) should be in a color that stands out from the rest of your site.
Notice how Bliss plays with colors and makes their product images and CTAs really stand out:
Recommended reading: 26 Amazing Product Page Design Examples in eCommerce (+ Expert Advice)
When you speak for yourself – it's salesy but when your happy customers speak for you – it’s authentic.
Now, what’s important is that these reviews must find the right place on your website to catch the attention of your shoppers.
Let’s get into some best practices:
Tarte Cosmetics puts a couple of reviews in their buy section – instills confidence in new shoppers immediately.
The human brain naturally seeks out patterns – and these patterns give your shoppers a sense of comfort – easing for them to make buying decisions.
How to use this on your website?
Tuft and Needle follows the same pattern for displaying different sections on their website – making the website extremely intuitive for the shoppers.
You must also check out: 14 Brilliant Ways To Nail Dark Mode Email In eCommerce (w/ Examples)
Shoppers will not scroll below the buy section if the section doesn’t convince them – this happens more often than you can imagine.
Which again hints at catching attention – fast.
Our recommendation is to group the most high-value elements so that the shoppers read them in one go. These elements can include headline, price, ratings, offers, a small description, options and CTA.
Group what’s the most important to your shoppers and create a convincing buy section.
Pro tip: Nudge shoppers to scroll down – where you have more information to convince them to buy, just like Room and Board does – they show how to style the product upon scrolling.
Bonus pro tip: Don’t let your CTA go out of view. Add a sticky bar with the ‘Order Now’ or ‘Add to cart’ CTA.
Recommended reading: 33 eCommerce Product Page Optimization Hacks (+ Examples)
Some of your website visitors come with a clear intent to purchase – and they know what they want. These users search for products using the search bar.
For such cases, your search bar must be optimized. (Would be pretty bad if you lost high-intent customers just because they couldn’t find the right product 🙁).
When your shoppers upgrade their products or add something unplanned to their cart – more often than not it is the design that pushes them rather than the utility of those products.
The way you display products for upsells and cross-sells can significantly impact your conversions and AOV.
For up-sell:
For cross-sell:
After working with 500+ brands, we can tell you that optimizing for mobile is not a choice – it needs to be every eCommerce brand owner’s priority.
We are not talking major revamps here – just a few changes that will exponentially improve shopping experiences.
First step towards it – optimizing the thumb zone.
Place all the buttons in the thumb zone – don’t make your shoppers work hard for a click :)
Make your CTAs, pages, forms, quizzes, filters etc. accessible in the thumb zone itself.
Recommended reading: 25 amazing (& high-converting) mobile checkout examples
For all the pages of your website, we discuss unique design elements to boost conversions. But the checkout page is just the opposite – it needs to be simple.
Customers don't want to be bombarded with offers and pop-ups or have trouble navigating your checkout page.
By the time they've landed at the checkout, they've already decided they probably want to purchase.
And because of that, the best way to help them convert is by making it easy for them to do so.
This is what Everlane does:
Pure simplicity. No distractions, no unnecessary flak, just a clean checkout page to help users make the purchase.
Don't forget to check out: 17 Top eCommerce Mobile Site Examples (Not Your Usual Brands)
The rule of 7 says that if your shopper sees a promotion 7 times – they take action. What better way to enforce this than put up a great deal on a global header?
All you have to do is – create an offer and highlight this on your header. Make this header global and let it follow your shoppers on all the pages.
Sit back and let your header do the job of converting your shoppers.
Recommended reading: Why Are People Adding To Cart But Not Buying?
This advice is specifically for your window shoppers and casual browsers. They may not make the effort to check the categories in the menu – but they may get enticed looking at the categories while scrolling on your homepage.
Make sure to display major categories on your homepage and make them visually appealing – let your shoppers know what to expect if they click on them.
98% of visitors who visit an eCommerce site—drop off without buying anything.
Reason: User experience issues that cause friction for visitors.
And Convertcart solves for exactly that.
We help eCommerce brands optimize their websites to boost their conversions.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversion rate.
How do we do this?
Our conversion experts can audit your site—identify UX issues, and suggest changes to turn more of your visitors into customers.