If you’re using a SaaS e-commerce platform like Shopify or BigCommerce, you have a variety of tools at your disposable for designing your store. Most design options will be in your theme settings, where you can choose colors, select fonts and configure your store’s basic layouts.
SaaS platforms make it fairly easy to customize your design, however it’s easy to get carried away. Like many things, less is more when it comes to e-commerce web design. I always tell my clients to keep things simple so that your products and photography can take center stage.
If you’re designing your own e-commerce store, make sure to avoid common design mistakes that can negatively impact the shopping experience and ultimately, your sales.
Common E-Commerce Web Design Mistakes
Logo Too Large
Many store owners believe that having a large logo makes their brand more recognizable, but an oversized logo will push down important content, forcing users to scroll unnecessarily before accessing products. If your logo is forcing your header to be more than 15% of the screen height (on any device), it’s too large.
Excessive Use of Colors
Using too many contrasting colors can create a visually overwhelming experience. I recommend sticking to two or three primary colors that complement each other. For example, a minimalist store might use a white background with black text and a bold accent color for buttons.
A poor color scheme can also impact readability. Neon colors or clashing hues can strain the eyes, while overly dark backgrounds with light text can be difficult to read. In general, I don’t recommend having a background color other than white or a very pale color. The only exception would be stores using a dark theme, where the background color would be black or near-black.
Poor Text Contrast
Low contrast between text and background can make content hard to read, frustrating visitors. A common mistake is using light gray text on a white background, instead of a near-back color for text. Similarly, red, blue or green text on a black background can be difficult to read.
Test is there to inform shoppers – it shouldn’t be treated like a design element. If you’re picking text colors based on aesthetics rather than readability, you may be creating a poor customer experience.
Small Font Sizes
Text that is too small can cause strain on the eyes, making it difficult for shoppers to read product descriptions or key information. I recommend body font sizes of at least 14px, depending on the font you’ve chosen. Larger font sizes improve readability, especially on mobile devices.
Make headings bold and use distinct sizes for each of your H tags (H1 being largest, H6 being smallest) to help users understand the content hierarchy of the page and scan long text blocks easily.
Buttons Too Small to Click on Mobile Devices
With mobile users now accounting for more than half of web traffic, clickable elements need to be large enough for touchscreens. If buttons are too small, users may struggle to tap them, leading to frustration and abandoned carts. Make mobile buttons at least 48px wide (or even full-screen width) to ensure an easy mobile shopping experience.
Overly Complex Category Menus
Your main menu is one of the most important elements of your website. If it wrap onto multiple lines, it not only looks unprofessional, but users may have difficulty selecting subcategories from your dropdowns. Additionally, if you have too many subcategories, customers may struggle to find the right products. I recommend aiming for 5-7 menu links with well organized subcategories. If necessary, you can utilize a 3rd level of subcategories to get users to specific product groups more quickly.
Moving Elements That Disrupt User Experience
Some websites include sticky menus, hover effects, or auto-sliding banners that move unpredictably. A lot of store owners like these types of “flashy” elements because they seem engaging, but they can create usability problems. For example, a menu that shifts on hover can cause accidental clicks, disrupting navigation.
Animations and effects should enhance the shopping experience, not hinder it. If you’re using movement, make sure it’s subtle and purposeful, and only utilized on decorative elements – not essential navigation or buttons. It’s important to make sure that customers remain focused on finding products and completing purchases without getting distracted.
Help For E-Commerce Website Design
If you’re launching a new online store or redesigning an existing one, there are plenty of ways to ensure you’re implementing best practices.
Other E-Commerce Websites
I always recommend that store owners look at competitor websites and major retailers to see how they’ve approached their website design. Other websites can be a great place to get inspiration, from color palettes to fonts and layouts. Major retailers like Amazon, Target and Wayfair have invested a lot of money doing user research, and you can leverage those learnings for free by just reviewing their design choices.
Video Tutorials & eBooks
If you need more specific tips, YouTube videos offer a wealth of information about e-commerce web design and other best practices. Check out my YouTube channel for e-commerce tips and advice about design and more.
eBooks are another great resource for e-commerce store owners. Through Amazon’s Kindle Unlimited program, you’ll find many ebooks about website design available for free. Check out my book E-Commerce Web Design Unlocked: The Practical Guide to Building a High-Converting Online Store for a comprehensive guide to creating an engaging, high-performing website.
Hire a Web Designer or Consultant
Even if you’re comfortable with the design tools your platform offers, you may not feel confident in your design ability – that’s okay! Sometimes it makes sense to bring in an outsider expert to either create your design or consult on design best practices. Most SaaS platforms have a certified partner directory where you can find web designers to help you create a professional look.
For those on the BigCommerce platform, I offer both BigCommerce custom themes and BigCommerce template customization – contact me for a quote or to learn more about my services.