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.

Rule of thirds in the hero image of homepage

2. Use negative space smartly

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:

Use a smaller font – it allows more space between the letters
Your line height should be approximately 150% of the font size for the body copy (in CSS, this would read: line-height: 1.5)

Increasing negative space through line height and letter spacing

Break large text boxes into smaller paragraphs
Add extra margins and padding

Let’s look at MVMT – they have aced their whitespace – made their website really easy to scan.

3. Place elements based on eye-scanning patterns

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?

Place the main CTAs on the top of the page – ideally on the left side
Lesser important information, such as sponsored ads, can go in the sidebar on the right-hand side of your page
The least important information – like your cookie policy, can go to the bottom right-hand corner of the page
Apply this to your navigation bar – add links from left to right based on priority. For example: Important categories on the left and fields like Contact Us on the right

Verve coffee uses an F-style scanning pattern to its advantage – keeps all the important information, CTAs and other links on the left.

F style scanning pattern on ecommerce website

4. Follow “visual hierarchy” in your website copy

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.

Use a combination of two fonts – one for the headlines and one for other texts – make sure they do not contrast too much
Information that has to be highlighted should be in a larger and bolder text
Supplementary text should be in smaller and less dominant font
The hierarchy should look like – large headline, then move on to mid-sized subheadings, and then a smaller body copy

5. Design super clear CTAs

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:

Make the button look clickable (may seem obvious, but very important!) – add an underline, contouring or just put it in a shaded box
Have your CTA change color when someone hovers over it
Offer compelling copy on your CTAs – write what exactly they will get after clicking

Color your CTA buttons bold and high-contrast
Add arrows on your buttons as a directional cue

Add sufficient whitespace around your button so that it doesn’t get lost in between other details

6. Structure your product descriptions for better readability

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:

Break paragraphs into bullets – make each bullet 3-5 words
Replace words with icons

Add a condensed FAQ section right under the buy section – either as FAQ or additional details

7. Reduce clicks to checkout

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.

8. Use color psychology to draw attention

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:

9. Place reviews where people are most likely to read them

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:

Add star ratings in the buy section
Mention the best review in one line under the heading – along with the name of the customer
Link the ratings to more reviews – which are placed in the third or fourth fold
Encourage customers to add a picture of the product they receive along with the review – remember more visuals are always better

Tarte Cosmetics puts a couple of reviews in their buy section – instills confidence in new shoppers immediately.

Placement of customer reviews on ecommerce website

10. Use patterns and repetitions to draw attention

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?

Arrange product listings in a grid layout – keeping the dimensions the same for all products
Do not vastly change the layouts of different pages
If your website has blogs, organize them side by side
Keep the colors consistent – do not change the color patterns on different pages
Do not change the newsletter signup form at different spots

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)

11. Group strategically – induce action

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.

12. Nudge visitors to search

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 🙁).

Make sure your search bar is a bar and not an icon
Place it at the top of the page
The bar should include the word – search
Don’t forget to add a magnifying glass icon to the bar
Let the search bar provide drop-down product suggestions

13. Design to improve up-sells and cross-sells

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:

Let shoppers choose the upgraded product in the buy section itself
Mention the added utility of the higher version

For cross-sell:

Recommend related products during the checkout process
You can also recommend complementary products in the ‘Added to cart’ confirmation popup
Make sure to show the prices and important specifications of these products
Do not show more than 2-4 options – we don’t want to overwhelm our shoppers

14. Run "thumb zone" test on your mobile site

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.

15. Clean your checkout page

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)

16. Place a global header – with offers

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?

17. Create a section for categories – outside the hamburger menu

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.