Top 10 ecommerce design mistakes and how to avoid them

Great ecommerce design isn't one-size-fits-all, which can make it hard to define, but you know it when you see it. The same is true for bad design: your shoppers might not be able to pinpoint what's wrong with the look of your store, but it might have them searching for the exit button all the same.

The good news is we've seen it all and, more often than not, the design mistakes that make an online store look unprofessional or untrustworthy can be easy to fix. 

Here are the top 10 design pitfalls that new (and experienced) merchants often make and how to avoid them.

1. Embedded text on images

Images that have text embedded into them are a common issue in online stores. The problem with them is when an online store is viewed on a smaller screen, like a mobile device, images will automatically resize. If there is text embedded in the image, the text might be cut off or resized to be too small to read. 

Use the image with text options available in your Shopify theme to showcase your text on top of your images. Doing this will ensure your text and image both resize accordingly and keep your online store looking great on any screen size.

2. Low-quality photography

In the eyes of the online shopper, the quality of a store’s imagery directly relates the quality of the business. It’s important to understand that visitors to your online store expect you to believe in your products and branding enough to invest in making them look good. 

As a rule of thumb, Shopify recommends using images that have at least 800 x 800 pixels. This will give you images that can be zoomed in without compromising quality. Find the latest image size recommendations from Shopify here and double check that all your store images follow these guidelines. 

3. Mismatched image types

If your online store is using a mixture of original photography, vectors, stock images, 3D images, gradients, or icons, consider paring back how many different image types you’re using. Stick to one or two different types to avoid muddling the visual language of your brand and ultimately taking the focus away from your products. 

4. Too many fonts

Having more than two or possibly three different fonts in an online store confuses the visual branding. An online store’s content should be easy to read and understand.  Use one font for headings to draw attention and another for blocks of written content. 

In ecommerce design, the primary goal of fonts is to make it easy for shoppers to read and understand the flow of information in an online store.  

5. Not enough white space

When designing an online store, it might be tempting to squeeze images and text together, throwing as much information as possible at visitors. Doing this results in sensory overload and makes it really hard to understand, from a visitor’s perspective, what to focus on. 

White space refers to the visual space between images or blocks of content, where there is nothing. This space provides a visual rest for visitors and allows them time to focus on and absorb the content that’s on the page.

Make white space your friend when designing your online store and experiment with using more than you might think is necessary. Consciously incorporating white space into your design will force you to create a hierarchy of information, which will help streamline your branding and hone in on what the main message of your store really is.

6. Inconsistent aspect ratios

An image’s aspect ratio refers to its width versus height ratio. For example, a square image will have an aspect ratio of 1:1 while a rectangular image might have an aspect ratio of 1:3. 

Aspect ratios are important to consider when designing an online store’s product pages particularly because they dictate what shape your images will be, and whether all your images will look the same. As a general rule, product listing pages should have images with the same aspect ratio for a clean, unified look. 

Here’s how to work with aspect ratios in your Shopify store.

7. Overuse of popups

Popups can be a fantastic tool for customer engagement, but there is a time and a place for them. If your online store has more than two different popups, a popup that fires immediately when a visitor comes to your store, or a popup that fires more than once during the same visit, you might want to rethink your popup strategy. The best popups are used to encourage email signups, let shoppers know about a promotion, or to provide an exit-intent offer to keep visitors shopping. 

To understand how a popup is perceived by a shopper, imagine them as a sales person in a brick-and-mortar store. They can be helpful when they provide useful information here and there, but will drive customers out of a store if they start to pester shoppers. 

Learn more about how to use popups effectively in your online store here. 

8. Too many trust badges

There actually is a difference between making your business look trustworthy by using one or two reputable trust badges and making it look ironically untrustworthy with a bunch of trust badges. Too many badges can make it look like a business is overcompensating for something. 

Trust badges generally signify to a shopper that your online store is secure and maybe offers a payment processor that they are familiar with. If your store is using more than three badges, consider pairing them down and choose only the most well-known badges.

9. Hard-to-read text or buttons

There’s a reason that most text and calls-to-action online are highly contrasted to their background: it makes it hard to miss. If your online store’s background and content are a similar colour, there’s a chance that some people will not be able to read what’s on the page. 

When designing your online store, play around with the brightness of your screen and make sure your written content and buttons can still be clearly seen at different levels of light. Not only will this help make it easier for your customers’ eyes to travel down the page, but it will also take into account shoppers with visual accessibility concerns.

10. Not having a clear aesthetic

What does your brand look like? Whether it’s playful, modern, artisanal, or industrial, once you nail down the look of your brand, you should apply that concept to everything else in your online store.

This aesthetic should influence your font choices, visuals, and colour scheme to produce a cohesive and immediately understandable brand. Every design choice you make in your online store should relate to your brand’s aesthetic.

Starting an online store? Find more helpful tips in The Ultimate Guide to Starting an Online Store.