Ecommerce Design / Enterprise Ecommerce / How to Sell Online

3 Ecommerce Website Layout Considerations Proven to Increase Sales

Eric Yonge / 3 min read

What does your ecommerce store have in common with a children’s book? They both communicate with words and pictures. Although you may have never thought of it in this exact way, your store is essentially narrating a story to your customers. And, the way in which you tell that story will lead potential customers to decide if doing business with you is in their best interest.

The difference, however, between a children’s book and your store is this: on the web, there is no assured story starting point. Customers can enter on your homepage, via a product page, on a campaign-specific landing page or even on your blog. So, how do you ensure that no matter which entry point someone utilizes, your site tells the same narrative, ideally leading to a sale?

The expert use of page layout strategy will bridge this gap, allowing you to combine words and pictures in such a way that your narrative doesn’t get lost. Here are three ways to sharpen up your store’s layout to maximize your brand’s story and earn you increased customer lifetime value.

Attain Balance

Be careful to monitor the total amount of those aforementioned words and pictures. Having too much of each can overwhelm the customer, while having too little can just as easily underwhelm them. Think of your site layout similarly to a glass. You don’t want it to be half empty or half full. You want a full glass, just without it overflowing.

One of the ways you can provide balance is through the use of negative space, sometimes referred to as white space. This is defined as any area of the layout not occupied by words or pictures. As a customer scans a layout, they need to be able to rest in specific areas so that they can also take in the elements you want to emphasize.

Take online registry site Kallah, where the team has implemented the use of negative space and complementary colors to showcase quite a bit of information without making the site feel overwhelming.

Example 1 - White Space.bmp

Remember, Size Matters

The human eye is attracted to the largest images first, followed by smaller images and then text. Think of imagery as a way to bounce the eye around the page, in the order in which you intend. Professional web design creates intuitive, hierarchical layouts that keep this important principle in mind.

For example, your largest homepage ads should call out your most exciting products or specials, followed by smaller ads or featured thumbnails. The dominant images on your product page should be the main product photo(s) and then the Add to Cart button. In each instance, the layout should effectively lead the customer’s eye in a linear fashion.

Example 2 - Direct the Eye.bmp

See how online store Training Mask uses an accent color to draw your eye to the Add to Cart button.

The traditional exception to this is the section page, which finds similarly sized product thumbnails listed row after row. Here, the customer expects to compare and contrast individual products based primarily on appearance and then title, price and review stars. In certain instances, you can still impact this layout with the proper use of title graphics and featured product areas.

Example 3 - Direct the Eye.bmp

See how online store U.S. Patriot clearly assembles their category pages, allowing customers to easily drill down to product level comparisons.

Avoid Needless Distractions

What’s more important: having a customer complete a successful purchase or having that customer visit your Facebook page? What about getting them to subscribe to your newsletter versus clicking the Add to Cart button?

Although these questions seem to have obvious answers, my team routinely reviews sites with layouts that ignore what a site’s main call to action is (i.e. having a customer check out). Site owners want their customers to buy something without getting distracted –– but they often hire site designers who don’t help them to understand that multiple calls to action can cause choice confusion –– ultimately leading someone to choose neither.

To avoid this, don’t use any imagery or text unrelated to the task you want a customer to complete. If you have anything on your product page that’s not relevant to that product or to helping a customer find a more suitable product, it needs to go. Every single page of your checkout process should be as streamlined as possible in order to keep your customer in the funnel. Any additional info should only address critical questions or concerns.

Example 4 - Avoid Distractions.bmp

Made 4 Fighters’ streamlined checkout design.

In all, layout is crucial to the success of any ecommerce store. While best practices related to ecommerce continue to evolve, these three layout principles will help your store stand the test of time.


Eric Yonge

Eric Yonge

Eric Yonge is the founder and CEO of EYStudios, a full-service branding firm specializing in ecommerce design and development.

View all posts by Eric Yonge
Leave a Comment

2 comments on “3 Ecommerce Website Layout Considerations Proven to Increase Sales

  1. Ivona Vukovic on

    Dear Eric, I see that product photos are the key subject of your article, but what are you thoughts about the placement of product videos? What are the key points ecommerce sites should have in mind when adding videos to their product pages?

  2. Ivona Vukovic on

    Dear Eric, I see that product photos are the key subject of your article, but what are you thoughts about the placement of product videos? What are the key points ecommerce sites should have in mind when adding videos to their product pages?

Leave a Reply

Your email address will not be published. Required fields are marked *

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.