Contact WooCommerce for The most important features of an eCommerce site’s design support

WooCommerce is ready to help you get the answers you need.

Be as specific as possible - let us know what you expected, what's happening instead, and when you noticed this. The more detail you, provide the faster we can help.

Replies will be sent to you at

Thanks for contacting WooCommerce

WooCommerce will reply to your questions about Get extension name shortly.

While you wait, check out these handy resources:

The most important features of an eCommerce site’s design

Written by Nicole Kohler on July 8, 2015 Blog, Design & UX, Start your store.

You have a plan to sell online. You’ve decided what you’re going to sell, you’ve decided to use WooCommerce, and now you need to design your store.

This stage can be difficult. Finding that perfect theme, or even selecting a designer who understands your goals, can eat up time you don’t have. And if you’ve never sold online before, you might feel as if you’re searching for something that just “looks nice,” without having a solid grasp on what’s really important.

To help you understand what’s crucial and what’s not, you should know what the most important features of a store’s design actually are. This will help you separate the designs that “look nice” from those that perform well.

Let’s take a look at the most important features of your WooCommerce store’s design so you can get started on that next crucial stage.

Easily understood navigation

Navigation might very well be the most important part of a store’s design. Good navigation helps new shoppers find what they’re looking for without hassle. On the other hand, poor navigation frustrates them and may even lead them to abandon your store.

The question, then, is what actually constitutes good navigation. The main idea is to present a clear path from the landing page to checkout. No matter what page a visitor initially lands on, they should be able to quickly find their way around your site without having to ask “how do I…?”

Much of the time, this is going to constitute presenting only the most crucial categories or pages in your main navigation, and delegating less important destinations to drop-downs or the site footer.

HUMAN has a simple top-of-site navigation with very basic categories, and the drop-down menu breaks it down just a little further:

A simple navigation that offers a few narrower options in the drop-down menu.
A simple navigation that offers a few narrower options in the drop-down menu.

Kohl’s, a much larger store, also does something similar: their most important categories are at the top, and the drop-down menu has clearly labeled divisions that help guide navigation to the correct (and often more specific) location.

Kohls manages its high amount of sub-categories by adding labels to a drop-down menu.
Kohl’s manages its high amount of sub-categories by adding labels to a drop-down menu.

If you have quite a few products and navigation is getting tricky, you can add the built-in Layered Navigation widget to your WooCommerce store — much like Kohl’s, this will allow customers to filter their search results by color, size, or other criteria you specify.

Adding this layered navigation will help make the process of browsing your store easier -- and faster.
Adding this layered navigation will help make the process of browsing your store easier — and faster.

Presenting both broad and narrow options with clear labels allows customers to browse your store how they want. And if they prefer to avoid your navigation altogether, your search is only a click away.

Compatibility with all devices and screen sizes

As we continue to see a rise in mobile-only shoppers, it’s important to be conscious of the many different devices and screen sizes used by your customers.

Responsive design is a method of web design that automatically scales a site’s appearance up or down to match the screen size on which it is viewed. It’s quickly become a standard for websites in the last few years, thanks in part to Google considering a site’s mobile-friendliness a ranking factor and recommending responsiveness as the best way to comply.

Responsive design means making your store’s design look great and function well on every device, no matter what the size.

With more shoppers opting to use their mobile devices for shopping, your store’s design should absolutely be able to match the screens on which it’s viewed. If it doesn’t, you’ll likely find that your customers are abandoning their carts (if they even make it that far).

The good news: all the WooCommerce themes available on our site are responsive out of the box (including Storefront and its many child themes). And because responsiveness has become a standard, nearly all of the WooCommerce-compatible themes you’ll find on WordPress.org are mobile-friendly, too.

If you’re looking for a theme elsewhere, keep an eye out for the word “responsive” in the description or among the tags. Once you settle on a theme to use, test it on all your own devices to be certain it’s truly mobile-friendly.

If you’re planning to work with a developer to create a responsive design from scratch, take a look at this Google guide to prioritizing mobile-friendliness — it will give you some specific tips to keep in mind as you’re brainstorming together.

Quick loading times for every page

A fun fact: approximately 40% of online shoppers will abandon a website if it takes more than three seconds to load. No matter how beautiful your store may be, if it’s slow, your bounce rate will rise and your conversion rate will drop dramatically.

To avoid losing a huge portion of your customers, you should aim to implement a design that loads all of its assets quickly. Otherwise, you’re going to see high bounce and exit rates.

The slower your site, the higher your chances of driving visitors away.
The slower your site, the higher your chances of driving visitors away.

Don’t worry: it’s entirely possible to achieve a beautiful store design without making all of your visitors tap their feet in impatience. Between compression tools, content delivery networks, and platform-specific tweaks and plugins, you can ensure that even your largest images and graphical elements load straight away.

Here are a few tips to help you keep your design from bogging down your site:

  • Compress large image files. Free services like Kraken.io and TinyPNG allow you to do this in just a few seconds!
  • Make sure your hosting is suitable — consider chatting with your host about upgrading your plan if things seem a bit sluggish.
  • Look into content delivery networks like CloudFlare, which deliver cached versions of your store to visitors from a local server.

Make use of clear, beautiful images

Have you noticed all the large, screen-filling images on stores lately? For example, the Moment homepage is dominated by this beautiful photo of the lens in action on an iPhone:

The first thing Moment visitors see is this large photo.
The first thing Moment visitors see is this large photo.

These large, eye-catching images aren’t just pretty: they immediately direct a visitor’s attention to a crucial call to action.

Take another look at the Moment homepage. The beautiful background photo immediately shows what the product is, while the overlaid text has a clear call to action: essentially, “click here to get this lens.”

Large images like this, combined with calls to action, do a wonderful job of explaining your products or getting your customers to look at something specific. The large area allows you to highlight a product in great detail, and the right photo can sell an item for you from the very first second.

Of course, your site design shouldn’t be focused only on one or two big images on your homepage. You should also use crystal-clear product images throughout your design, whether it’s to direct shoppers to specific pages or simply to show off what you’re capable of.

Two product-driven sections on the New Balance website.
Two product-driven sections on the New Balance website.

Above is a great example from the New Balance store. These images were created simply by overlaying existing product photography on a background — bam, instant homepage promotion. They’re attractive, motivating, and show those new to the brand exactly what New Balance sells.

There’s no reason you should limit the usage of product images to their individual pages. Start utilizing them throughout your entire design, and you’ll have a better shot at directing brand new customers all the way to the order confirmation screen.

An industry and customer match

Finally, while the tips we’ve given you so far are meant to help you find store designs with qualities you like, it’s not always about you. You’ll also need to consider what your customers expect from that design.

You should only choose a design that you feel matches your store’s industry and the needs of your customers. If you pick a theme that functions well but doesn’t fit your company, it might even hurt you in the long run.

If you’re selling high-end fashion accessories, the design you select should be elegant and stylish to reflect this. But if you’re selling athletic sneakers, that same design will likely look out of place on your store — and you won’t like the way it ties into the rest of your branding, likely leading to a quick redesign.

Have a look at this post on appropriate homepage designs for various industries to learn a bit more about what we mean when we talk about finding the right match. You’ll often know it when you see it. 🙂

How to choose a theme for your WooCommerce store

With these tips in mind, you should be better prepared to find a design that meets your needs and suits your customers. However, you still may not be certain where to start looking for that perfect WooCommerce theme.

If you need guidance, here are a few suggestions:

  • Start here. Our Storefront theme is free and 100% compatible with WooCommerce. There are also numerous child themes tailored to specific industries and store types.
  • Do a search. There are plenty of sites that offer free or reasonably-priced themes — you might just have to look around a little bit to find them.
  • Reach out to a WooExpertMany of our WooExperts can customize a theme for you or even design one from scratch, should you prefer to go that route. And with their knowledge of WooCommerce, they make great partners!
  • Finally, if you’re really ambitious… try designing your own theme. Our educational partners don’t just teach WooCommerce — many of them also have HTML, CSS, and website design courses that will help you customize or create a design you love.

We hope this guide has helped you get a better grasp on the design features that really matter. Have any questions? Lend you know and we’ll be happy to help you out.

11 Responses

  1. Freebie Magz
    July 9, 2015 at 2:24 am #

    Great write up Nicole 🙂

  2. Travis
    July 9, 2015 at 12:58 pm #

    Good article! Enjoy reading this blog each week.

  3. Paul Anderson
    July 9, 2015 at 8:25 pm #

    Nice Post. I guess also one more thing is important and that is fast checkout and removing necessary things from website that distract customers

    • bsutton@ocsprocess.com
      July 31, 2015 at 4:14 pm #

      I agree! And if I can add to this, accessibility to the site’s store. I bounce as soon as a login is needed to just look around.

  4. Rai
    July 28, 2015 at 12:07 am #

    Hi Nicole,

    Thanks for the article, could you help me with this question?.
    The traffic measure should be over the complete site or just the content that has products to sale?.
    Let´s say I have a website where the big portion is blog and content, and the smallest portion is the store, should I make the calculation over just the store or over the complete site?.

    Blessings and thanks!.

    • Nicole Kohler
      July 28, 2015 at 2:40 pm #

      Hi Rai,

      This is a great question!

      I’d say that the answer depends on how important that content is to your site. So, for example, if your store actively engages in content marketing as a way to attract customers, and a lot of the people who buy your products do so BECAUSE of your blog or other content, I would include your content in any traffic considerations, calculations for conversion rate, growth planning etc.

      On the other hand, if you’re creating content for other reasons — maybe you are working toward that goal of successful content marketing, but aren’t there yet, or maybe your business has a lot of content that serves a community or local organization and isn’t 100% related to your store, or your store is like a side project — you would probably want to exclude it.

      So it really depends on how valuable you consider that content in your conversion process. If someone would become a customer without it, leave it out. If it tends to help your customers find you or convert though, leave it in.

      Hope that helps! Again, great question, loved thinking this one over 🙂

  5. Aurélien Debord
    July 28, 2015 at 9:48 am #

    Nice article, thanks for sharing all these good ideas.

    • Nicole Kohler
      July 28, 2015 at 2:40 pm #

      Much appreciated Aurélien 😀

  6. Soumya Roy
    August 1, 2015 at 4:21 pm #

    All important points are shared. Especially I vote for the easy navigation, site speed and compatibility on devices. These are absolutely crucial for better user experience as well as for the site optimization.

WooCommerce - the most customizable eCommerce platform for building your online business.

%d bloggers like this: