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:
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.
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.
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.
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.
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:
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.
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 WooExpert. Many 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!
- Read up on the latest trends and best practices. This guide on why design UX matters is a good read.
- 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.