Top 5 Things Designers Miss When Designing for E-commerce

Updated on  
Top 5 Things Designers Miss When Designing for E-commerce

Designing for eCommerce requires more foresight than just making your typography pretty and getting your layouts finessed. As designers we need to plan the experience of our store experience as the business goes through the natural ebbs and flows of running an imperfect business. Designers love to design for the "ideal" state, but we often forget the states websites are in in the non ideal states. Planning for these page states can vastly improve our customers experience when they visit the store, inventory is not in the ideal state that we plan for. What if the product sells out? What if we're in a huge site-wide sale, or the business pivots their product offering?

Here are the top 5 things we see designers miss

1. Empty States for the Cart

The biggest design challenge you have is to move Cold leads (e.g. customers who have never seen the product before) from a prospect to a converted first-time consumer on their FIRST visit. All of these customers will never have had a product in their cart yet - maybe they don't know where to start! You’re missing out on a huge opportunity to guide your customer on a top selling product, if you’re not already designing for an empty cart state! Whether that’s a clever cross-sell or pairing quirky copywriting and aesthetic content, to create a moment of connection with your customer. An easy way to develop messaging that increases trust, is by setting up a purchase collection (i.e. “start here,” “most popular,” “customer’s start with”) to curate the new buyer who has choice overload or doesn't know which products to start with.
empty cart flyout design example
empty cart state little burgundy

2. Missing or Hard to Find Search

Search is often an overlooked feature on the site, because search bars aren't the most aesthetically pleasing to design. But leaving out design for your search experience can be killing your high-conversion intent customers.

- Consumers who use search are 2.4 times more likely to buy. Searchers also drive more revenue, spending 2.6x more across mobile and desktop compared to those who don’t use search.

  • 34% of users tried to search for non-product content.
  • Up to 30% of e-commerce visitors use internal site search, and we’ve all seen this one: site searchers are 2-3x more likely to convert.
Source: Algolia blog - "40+ stats on e-commerce search and KIPs"

Search should be easy to spot, not hidden away or a barely there icon that’s tucked into the corner of your site! Especially if you have a deep catalogue, consider creating a search focused header design to allow your customers to find exactly what they want right away.

 easy to find search in homepage navigation on Arrae site

search navigation easy to find in homepage navigation on Kabrita site


Some of our favourite search focused templates:

3. Add Value Propositions

Be mindful and proactive about customer concerns that could potentially hold them back from completing a purchase from your client’s store.  You can include badges somewhere on your product page that address key features that address customers concerns before they add to cart. For example:

  • Do you have a sale on or a price increase coming up?
  • Are there any products low-in stock?
  • Is this new or a best seller?
  • Is it related to seasonal content or a new look book?
  • How many reviews has this product have? Highlight social proof.
  • Do you have an amazing return/refund policy or guarantee?
  • Is there a free gift with purchase of special incentive to purchasing online? 
tactical value prop on blume product page

Blume does an amazing job using simple icons and short descriptions of 3 key value props: free shipping, money back guarantee, free gift with purchase.

tactical value prop example on Organza product page

 Our client organza saw huge up-tic in sales when they highlighted a money-back guarantee for this sensitive issue product.

4. Tactical Sales Messages

Your free shipping promo doesn't have to only live in a standard top bar (which we recommend having as they have been proven to increase conversion rates on first-time buyers). Consider putting a targeted message on product pages or collection pages for high value products that shipping is free with purchase.

This is an opportunity for a high value promotion piece of copy to be made persistent through the site, regardless where the customer lands. Your analytics will tell you firsthand that the customer is not always landing on the home page.

The most easy win is to include a site wide banner in your header to create less uncertainty around shipping.

5. Product Page States

Designing for different states on your PDP helps keep customers happy and in the know. What does it look like when your product is on sale, out of stock, low stock, or on pre-order? Nothing is more disappointing than adding an item to your cart, waiting an hour and trying to place an order only to find out that it’s out of stock! An easy solve would be an urgency message to inform the customer that there’s only a few left of an item, and to quickly grab what they’ve been eyeing. Accounting for different states will plan for the business and complexity in the above the fold content, to ensure your “add to cart” button is prominently featured. 

sold out product state on Marea product page

Marea wellness has a clear sold out state on their products but doesn't help customers find a product they can easily add to cart. 

preorder product state on Left on Friday product page

Can you tell that this bathing suit is on Pre-order?

Add this checklist to your next design handoff


  1. Empty Cart cross sale or featured collection
  2. Include a tactical sitewide promotion message
  3. Write some on-brand quirky messaging that inspires your customer


  1. Make search easily findable
  2. Mockup the Empty search state
  3. Mockup a search results page

Value Propositions:

  1. On your product detail page as simple 1 liners
  2. Visual badges/stamps/seals

Mockup your different product page states:

  1. On Sale
  2. Low in Stock
  3. Only a few sizes/colors/options left
  4. No Reviews
  5. Pre Order
  6. Best Seller
  7. Already in Your Cart
  8. Promotion or coupon/sitewide sale

Did you know we offer white-labeled or partnership development services for designers who want to offer Shopify design for their services?

Shopify is our specialty and we love partnering with agencies and studios to turn their design dreams into a reality. Book a call with us, or visit our White Label services page to learn more.


Published on  Updated on