Simple Yet Effective Website Design Tips For Ecommerce Stores

Successful ecommerce store design merges conversion strategy, visual design, and technical engineering to create a smooth shopping experience.

Recently I discovered a local muffin company that makes the most amazing bran muffins with big chunks of fruit and nuts and chocolate in them. I tried a few different flavors in a sample box and fell in love. Whether you eat them hot or cold, they’re packed with flavor and totally delicious.

We go on a lot of road trips and pack all of our own road trip food. The last road trip was 9 days and 27 meals, no cooking. Because the bran muffins I found are stored in the freezer or refrigerator, I figured they would be perfect for road trip breakfasts. So a week before our spring break trip I went to their website and tried to place an order.

I tried to place an order… but the buying experience was horrendous:

• The site is difficult to use.
• You can’t view all products at once or scroll through all products available.
• It’s hard to find information, like whether or not a flavor has dairy in it.
• All of the products are displayed in auto-advancing carousels or sliders, making it difficult to remember what you just saw.

The entire time I was shopping, all I could think of is how terrible my customer experience is and how much the design must be turning other potential buyers away. Then it got even worse. I got to check out and there was no local shipping option or an explanation of what one of the shipping acronyms means. I had to contact them to figure out shipping.

Now you’d think I would have learned my lesson and not ordered from them again, but I like shopping local and supporting local businesses, and we REALLY like their muffins. So I went to their website to order muffins again.

• The good thing was that I knew exactly where to find the muffin flavors I wanted.
• The bad thing was that the local shipping option I used before (that was super confusing) was now gone. So I had to reach out again and the company apologized for their broken site, said they fixed it, and asked me to try again. But the site was still broken and for the next several days, no one responded to my requests to make a purchase.

I ended up abandoning the cart, I’m still irritated, and they lost my business — and frankly, the shopping experience was so bad that I don’t know if I will order from them again.

E-Commerce Store Design Matters

What I wish they understood is that design matters.

Whether your e-commerce store is little or big, based in WordPress or on an all-in-one platform, e-commerce store design is a critical part of the conversion process and bad eCommerce design can tank your sales, drive away future sales, hurt your brand, and negatively affect the long term success of your business.

Think of the last time you bought online from a brand you love. You probably didn’t even notice the design because good design doesn’t get in the way.

• Bad design causes friction, confusion, and irritation, which results in abandoned carts and lost sales.
• Good design showcases the products, making them the star of the experience, and works to make shopping and buying an easy, smooth, obvious experience.

What you must understand is that e-commerce store design isn’t just about how the website looks, but how it works and how the user moves from page to page, step-by-step through the buying process. A successful e-commerce store design merges conversion strategy, visual design, and technical engineering to create a simple and smooth shopping experience.

E-Commerce Web Design Tips

eCommerce web design is all about putting your buyers first to ensure they can find what they need, fill their cart, and checkout as effortlessly and quickly as possible.

Here are 28 eCommerce web design tips to help make your next eCommerce project a success:

1. Use simple and obvious navigation

Clear is always better than clever. Keep your navigation menu simple, clear, and obvious. Don’t make buyer guess at what a creating label means. Also, keep your navigation menu in the places buyers expect it to be — at the top of the page and along the left side.

2. Make the search bar easy to find

If you have more products than fit in a single page view, you need to add a search bar, and the more products you have, the more important search becomes. Consider skipping the small magnifying glass icon or mini search feature, and instead, go with a prominent search box that is front and center so it’s easy to find.

If you’re hesitant to add a prominent search box to your eCommerce website, consider that:

1. Amazon has more money and runs more tests than any other online website and their search bar is at the top, in the center of the page, and completely obvious.
2. Ask a teenager or someone in their twenties to find something or buy something online and watch what they do. They don’t navigate screens to find the app, they go straight to the search. They don’t scroll through a store website, they go right to the search.

3. Make search filters simple

When you have a lot of products, giving users the ability to filter the results by color, size, brand, or any other option, helps them find what they’re looking for quickly. But just as you need to give them the ability to refine the search results, you also need to give buyers a way to change or undo the filter parameters.

4. Make the cart easily accessible

Don’t hide the shopping cart icon or put it somewhere weird! Make the cart easily accessible and obvious throughout the entire buying journey. Consumers expect to see it at the top right of the page, so put it there.

5. Move social media icons to the footer

If you own an e-commerce website, it’s a pretty safe bet that you’d rather have a visitor make a purchase than leave your website to visit Facebook. If this is the case, ditch the social media icons in the header and sidebar and move them to the footer so they are easy to find in case a customer wants to connect with you on a specific social platform, but not distracting a buyer from completing their purchase.

6. De-emphasize the newsletter sign up

If a customer visited your eCommerce store and only took one action, would you want them to make a purchase or sign up for your newsletter that they make ignore or delete or mark as spam? If your answer is “make a purchase,” it’s time to re-evaluate where your newsletter sign up call to action is positioned.

Never let a call to action for something free distract a customer from completing a purchase. Move your newsletter sign up to the footer, then add an exit intent popup to capture their email when they’re leaving your site or invite them to subscribe during the checkout process.

7. Display products on one page

Whenever possible give buyers the option to view all products available on one page, or to choose the number of products displayed per page. Please don’t limit the number of products per page to a number like six, especially when there are 50 products available. Instead, either display all products or give buyers options to choose from, like 20/page, 50/page, 100/page.

8. Ditch the sliders and carousels

Sliders result from a lack of clarity, a lack of decision-making, and a lack of leadership. They’re the design solution that’s implemented when a client can’t make up their mind, too many stakeholders have opinions and no one will make a decision, or a designer gets frustrated when a client doesn’t listen and they give up.

Displaying products in a slider, especially one that advances on its own, is bad because:

• It is difficult to see the products for sale or gather information about them without clicking.
• It is hard to know if you’re actually seeing everything that is available.
• Customers may not remember what they saw.
• It may advance before the customer is ready.
• You’re removing the ability for buyers to compare products easily.

9. Save items in cart

I can’t tell you how many times I begin shopping online, get distracted or pulled away by a client phone call, meeting, meal, or some other thing that demands my time, and need to come back and finish my purchase later.

I LOVE it when I come back later that day or the next day and the items I already found are still in my cart and I don’t have to start over. It save me time, makes me a happier shopper, and most of the time, I end up buying more.

10. Use quality photography

I can’t tell you how many times a prospect has shared an e-commerce website they like with us during a sales call, and we have had to point out that the WordPress theme the site uses is actually very simple and basic, but the site uses gorgeous high-quality photography, which makes it look stunning, high-end, and completely custom.

As a store owner or store designer, you can not ever underestimate the importance of quality product photography. Fabulous product photos will attract more attention and better represent the brand — the better product photographs are, the better the products will sell, and the more money the store will make.

11. Provide multiple photos

In addition to high-quality product photos, an e-commerce store needs to provide multiple photos of a product. Photos can answer a lot of customer questions and help sell the product.

• Include photos of the product from all angles, from, side, back, top, bottom.
• Include photos of any critical part of the product.
• Include photos of the product in use or in context.
• Include photos of each product variation so buyers can see exactly what they are buying.

12. Consider adding video

If potential customers have concerns about how a product is used or how it works, consider adding a short demo video to show another person using the product successfully.

13. Stick to action color

Train your customers to recognize when it’s time to take action by using one action color throughout your website. This means that every link, button, and call to action should always be the same color, and that color is not used for anything else.

14. Don’t hide admin content

For an eCommerce store (and really, every website), consumers need to be able to quickly and easily find administrative content like the company’s complete contact information, the refund policy or return policy, the privacy policy, shipping details, and the terms of use. Buyers expect to find this information or links to this information in the footer, so make sure it’s there when they need it.

15. Don’t make me register

I don’t want to register or create an account, I don’t want every e-commerce website I shop at to save my information, and I don’t want another password to remember. It’s okay to give buyers an option to register and create an account, but if they don’t want to, give them the option to check out as a guest.

16. Include reviews

When considering a purchase, one of the first things many consumers do is read the reviews. They look for the best five-star reviews and the worst one-star reviews, then check out those in the middle. In fact, a 2017 study by BrightLocal states that 85% of consumers trust online reviews as much as personal recommendations, positive reviews make 73% of consumers trust a local business more, and responding to reviews is more important than ever, with 30% naming this as key when judging local businesses.

If you’re worried about including reviews because someone may post a negative review, get over it. Negative reviews actually legitimize the rest of your reviews. According to MIT Technology Review, negative reviews that are specific actually tend to serve as risk mitigators. Negative reviews that are well written can actually increase sales of a product. One reason is that buyers gain confidence that “if this is the worst this product will throw at me, it must be pretty good.”

17. Make out of stock items obvious

When a product is out of stock, alter the design for that product listing in your store to show buyers that it is currently unavailable. Don’t make them go through the process of clicking to the individual product page, checking out the options, and reading the reviews, only to find out that it’s not available and they just wasted their time.

18. Show multiple checkout buttons

When product pages include images, descriptions, videos, frequently asked questions, manufacturer specifications, reviews, related products, and other details, page can get pretty long. Help buyers complete their purchase with less friction buy including checkout buttons at the top and bottom of the page.

19. Make it fast

If your store is slow and it takes a long time for products to load, buyers are going to bounce and head to one of your competitors to make a purchase. When it comes to e-commerce, speed matters. The faster your store loads and works, the more sales you’re going to make.

• Invest in quality managed website hosting, like Liquid Web’s Managed WooCommerce hosting.
• Be smart about the plugins you use.
• Optimize all images, cropping them to the right dimensions for your site design and optimizing them not just for SEO, but for size and speed.

20. Keep it simple and clean

Consumers should notice the products for sale before they notice the design of the website. The website design for an e-commerce website must be simple, clean, and free from clutter. It should make the products shine and keep all attention of what’s for sale.

At every stage of the buying process, evaluate what is displayed on the page and eliminate all unnecessary distractions, especially during checkout.

21. Add check out page reviews

Want to boost your sales? Consider adding testimonials or reviews from happy customers to your check out page to reaffirm that buying from you is a great decision.

22. Communicate shipping fees early

Don’t surprise online shoppers with shipping fees at check out!

In the world of Amazon Prime and Zappos, free shipping is becoming the expected norm. If customers will have to pay shipping fees, or spend a certain amount to earn free shipping, communicate exactly what the terms are early and often and give them an option to check the shipping fee for their destination at any time.

23. Use proper tags for SEO

Make sure your eCommerce store uses the right tags for better search engine optimization and increased organic search traffic. For example, make sure that on product pages:

• The single H1 is the name of the product.
• The sub headlines in the product description use an H2.

And on product category pages:

• The category title uses the single H1.
• The names of the products displayed on the category page use an H2.

24. Use clear product titles

Don’t get fancy with your product titles. Keep them clear, specific, and obvious. If the item you’re selling has a specific part number, include the part number because people searching for the specific part will often type the part number in the search box.

25. Use informative product descriptions

When writing product descriptions, yes, you need to include the features and manufacturer details. But you also need to include the information your customers may be looking for to help them make a buying decision.

For example, if you’re selling a t-shirt, let buyers know if it:

• May shrink during the first wash
• Runs small and they need to order two sizes up
• Runs big and should go down one size

26. Showcase top selling items

When evaluating an e-commerce WordPress theme, plugin, or all-in-one platform, or considering hiring a freelancer or agency to design a custom e-commerce website, make sure you consider the ability to showcase or feature specific products.

For example, you may want to:

• Highlight your most popular products at the top.
• Showcase seasonal products at the top.
• Feature specific partner products or sale products.

27. Add trust seals

When it comes to trust seals or security seals, a survey by Econsultancy found that 48% of potential shoppers said the presence of trustmarks to reassure shoppers would make them trust a website more. While many shoppers may not understand exactly what the seals mean, trust is largely based on feelings rather than an understanding of the technological details and advantages, and most people buy based on emotion.

28. Make it mobile-friendly

As a designer who designs and works on websites daily, it’s hard to imagine someone building a website that isn’t responsive or mobile optimized, let alone an e-commerce website. While responsive design may have been optional five years ago, it’s a requirement today and when we talk about mobile-friendly, we’re not just referring to responsive design, but mobile payment optimization PayPal One Touch and digital wallets like Amazon Pay and Apple Pay.

The E-Commerce Design Bottom Line

Poor design and a frustrating shopping experience will alienate customers, harm your brand, and cause a decrease in sales. But with a smart strategy, great design, and meticulous engineering, e-commerce store owners can ensure that making a purchase is easy and fast. As a result, there will be fewer support inquiries, fewer returns, and more happy, satisfied customers, which in turn, means more sales and bigger profits — and who doesn’t want that!