Increase Ecommerce Conversions 150 Best Practices 2020 PDF

Increase Your Online
Store’s Conversions
150 Ecommerce Best Practices
V1 (2019-12-03)
Why This Ebook?
Over the last 5+ years, I’ve been working with 7-8 figure ecommerce businesses.
My goal over that time has been to become the best in the world at one thing, and
be known for that one thing. I discovered that my passion is analyzing the user
experience of websites and apps, and helping ecommerce stores increase
conversions and thus sales.
Over time, I built a checklist of the best ecommerce practices (for increased
conversions), to help me do UX (user experience) audits of those stores.
On April 7th of this year (2019), I decided to share my findings. Over the next 8
months I published semi-daily best practices on ecommerce facebook groups,
pulled from my experience and research.
I kept getting asked to package these up as a PDF, and so here it is! Please take a
minute to answer a few questions to let me know what else would be valuable for
you.
Who Am I?
My passion and specialty is analyzing the user experience of ecommerce stores,
and helping you increase conversions and sales.
As the preferred partner of CRO agencies such as Mobile1st, I have the chance to
audit large and successful online stores and their competitors. As part of my work
at nventive, I also analyze the user experience of large american and canadian
clients.
My background is in IT consulting (analysis and programming) with various

agencies and clients since 2001, such as Caisse de Dépôt et de Placement,
Imagina, GFI Solutions, Medisys, Schering-Plough, Jean Coutu, and many more.
Besides business, my biggest passions are playing piano, and martial arts.
Beach, Ocean, Palm Trees?
You might be wondering why the palm tree and the beach theme. The idea is that
by increasing your conversions and sales and growing your business, you will be
able to enjoy life a bit more, take that long due vacation, and recharge your
batteries.
What Else Would Be Valuable For You?
I would love your feedback to make this guide more valuable for you, and help me
figure out what else would be helpful in your business.
You can answer this short survey below with 6 questions (about 90 sec to fill out):
Or message me and let me know your thoughts! You can email me at

matt@matttanguay.com or message me on facebook.

Jump to the or choose a category below:
list of 150
best practices
The list is ordered by date
at which I published them
originally.
Header Search Footer Home
Category Page Product Page Cart Checkout
I grouped the best

practices by these 11
categories as I consider
those to be the main
Account Email, SMS, Notif Misc components of an
ecommerce store.
Header & Menu
1) Consolidated header (mobile)
3) Header with 2-3 rows (desktop)
4) Main product categories in menu’s level 1
5) Tagline and/or guarantee, USP or offer in header
6) Key contact information in header (desktop)
8) Menu items big enough
9) As few menu items as possible, and fit on one screen (mobile)
10) Mega Menu (desktop)
11) Post-sale actions above the fold
12) Menu’s main categories ordered by sales volume
13) Menu’s SUB-categories ordered alphabetically
14) Sticky or semi-sticky header
15) Burger menu easy to close (mobile)
16) Prominent search box in header
86) Avoid menu flickering
Categories
Search
17) Auto-suggestions
18) Search results for corrected spelling
19) Filters to narrow down results
20) Always return search results
21) Previous or top searches
22) Search results first list products
92) Match thumbnails with variation searched for
93) Auto-apply the color filter
104) Allow search within current category
Categories
Header & Menu
1) Consolidated header (mobile)
3) Header with 2-3 rows (desktop)
4) Main product categories in menu’s level 1
5) Tagline and/or guarantee, USP or offer in header
6) Key contact information in header (desktop)
8) Menu items big enough
9) As few menu items as possible, and fit on one screen (mobile)
10) Mega Menu (desktop)
11) Post-sale actions above the fold
12) Menu’s main categories ordered by sales volume
13) Menu’s SUB-categories ordered alphabetically
14) Sticky or semi-sticky header
15) Burger menu easy to close (mobile)
16) Prominent search box in header
86) Avoid menu flickering
Categories
Home
2) Link Bar (mobile)
23) Value proposition statement
24) Call-to-action button
25) Specific unique selling points
27) Avoid automatic carousels
28) Feature top categories
30) Feature products
32) Social proof
35) Long and rich homepage
36) Logos & trust badges
99) Sub-sub-category links
Categories
Category Page
42) Products organized in simple categories
43) Dynamic sorting and filters
44) Product attributes
45) Urgency elements
46) Feature products, bundles or deals
47) Avoid pagination
91) Highlight items in cart
94) Feature important filters
95) Visited vs. unvisited products
96) Truncate filter values
101) Breadcrumbs
102) Intermediary category pages
Categories
Product Page
48) Multiple high quality product images 63) FAQ and/or user Q&A 82) Estimated shipping cost
49) Zooming capability on images 64) Incentivize buyers to review 83) All image thumbnails or truncation
50) Price above the fold 67) No social media share icons 84) “In scale” image
51) Unboxing, explainer or promo videos 68) Sticky Add to Cart (mobile) 87) Offer compatible products
52) Summary and Detailed descriptions 69) Large contrasting Add to Cart (desktop) 98) Avoid ads
53) Readable product descriptions 70) USP bullets or images (desktop) 103) Answer all negative reviews
54) Features and benefits 71) Allow purchase of out-of-stock products
55) Shipping & Return details 72) “You Might Also Like” section
56) Display the expected delivery date 74) Avoid horizontal tabs
57) Clarify what is and isn’t included in kits 75) Group spec sheet elements
58) Steppers for quantity fields 76) Add a summary section with key specs
59) 10+ customer reviews 77) Style spec sheets for easy scanning
60) Sync information across variations 78) Single-column format for spec sheets
61) Interlink variations 79) Ratings distribution summary
62) Uniquely title variations 80) Mention Free Shipping near Buy section
Categories
Footer
7) Sticky click-to-call button (mobile)
37) Logos & trust badges
38) Key contact information
88) Links to Return Policy and Shipping Info
Categories
Checkout
85) Allow to edit order 121) Field labels
105) Store Pickup option 122) Field lengths
109) Limit exit points 123) Address Finder
110) Guest checkout 124) Country before state
111) Upsells 125) Avoid dropdowns < 5 and > 10 items
112) Multiple payment methods 126) Autocomplete state
113) Inline validation 127) Pre-fill city and state
114) Optional & required fields 128) Expiration date format
115) Ask for minimal information 129) Avoid multi-column form
116) Billing address same as shipping address 130) Test one-page & multi-page checkout
117) Show appropriate keyboard (mobile) 132) Input masks for restricted fields
118) Expand credit card fields when selected 133) Increase the perceived security
119) Auto-format spaces in credit card number 136) Validate the address
120) Deduce credit card type
Categories
Account
131) Optional account creation
135) Social login
137) Explain why create an account
138) Avoid email & password confirmation fields
139) Input suggestions for email
140) Low password requirements
141) Account Dashboard
Categories
Email, SMS & Notifications
143) Account registration (welcome) email
144) Cart abandonment emails and/or SMS
145) Request a review
149) Purchase notifications
Categories
Misc
26) Avoid full-page popups 66) Wish List
29) Help choose the right product 90) Cross-device
31) Font sizes 97) Back button
33) User-generated content (UGC) 100) Inspirational images
34) Localization 134) Return in-store or by mail
39) Live Chat 146) Loading speed
40) Chatbot 147) About Us page
41) Compelling newsletter opt-in 148) Optimize for mobile
65) Urgency
Categories
#1
Typically, something like this:
Next
Row 1 (bar above the header): Free Shipping, or offer
On mobile, opt for

Row 2: Burger menu icon (left), logo (middle), cart icon (right).
Row 3: Search box

a consolidated
header that takes
minimal space
Examples (1/6) Categories

#1) On mobile, opt for a consolidated header that takes minimal space
Amazon's mobile header is more standard and

recommended, with the logo and cart on the first row,
and the search box on the second row.
Notice how they opted for a link bar instead of a

burger menu, with their main links (Departments,
Whole Foods, etc.)
Adidas has a minimal header, and everything on one

row. I recommend having the search box always
visible as row #2 instead of that search icon.

Apple's header is even more minimal than Adidas', On ASOS, having 4 icons makes it more difficult to tap On B&H, they chose to add a contact button, which
without even a search. A search box or at least a the right one and not "mis-tap". I'd recommend opens four options: phone, live chat, email, help center
search icon should always be provided. removing the search icon, and adding a search box - and their opening hours. Interesting choice.
below instead.

On Build, the placement of the burger menu isn't Home Depot consolidated the search box within the JC Penney's header is as standard as it gets
standard, but it still works out pretty well, and allows first row, to allow them to have the current selected - Row #1: offer (free shipping above - with a link to
them to have bigger icons on the first row. store on row #2. Interesting and unique design. details)
- Row #2: burger menu, logo, account icon, cart icon
- Row #3: search box

LL Bean's header is also standard, but the offer is Macy's header is standard. Interestingly, the first row is Nordstrom only has a search icon - I'd recommend
below the header instead of above. a value proposition statement instead of an offer. ("we they remove it and put a search box instead, as row #2
ship in 200 countries")

REI's header is a bit strange:

- Row #1: link bar
- Row #2: logo, cart icon, burger menu
- Row #3: Search box
I'd test moving the link bar below the search, and moving
the burger menu to the left (in the standard location)
Sears' header is standard, except for the notifications

bell icon, which we rarely see in ecom headers.

Target also consolidated their search box within their Walmart's header is quite unique. Row #1 contains an
header. Also, the Menu button isn't very obvious since icon to Walmart Grocery. And Row #2 has a on/off
it's close to the logo. button for Next Day Delivery, which I've never seen
before.
Next Categories
#2
Put it right below your header to feature some of your main
Next
product categories. Growth Rock saw a 5% increase with 93%
statistical significance by adding a Link Bar.
On mobile, add a
Link Bar

#2) On mobile, add a Link Bar
Amazon lists their main links (and not directly their On Build, you need to scroll down to see the Link Bar.
main departments) in their Link Bar I'd recommend moving it higher up on the page,
closer to the header

#2) On mobile, add a Link Bar
On REI, it is a bit strange to see the Link Bar at the top Wayfair has the standard Link Bar with their main
of the screen. I'm curious as to why they put instead categories
the offer bar where the Link Bar would normally be.
Perhaps to "shock" the visitors and avoid banner
blindness? Something to test
Next Categories
#3
On desktop, opt for a header with 2 or 3 rows.
Next
For example:
On desktop, opt
Row 1
- contact info
for a header with 2

- “FREE SHIPPING ON ALL ORDERS”
- “My Account” link
- Country selection
or 3 rows Row 2
- logo (left and clickable)
- search box (middle)
- cart icon (right)
Row 3
- Mega menu with the main categories as level 1

#3) On desktop, opt for a header with 2 or 3 rows
Adidas's header on desktop has two rows and is

pretty simple. It doesn't look overwhelming. The
menu items open a Mega Menu, which is a
good practice for ecom stores. Their search box
could be a bit bigger.

On Amazon, the search box is prominent, which

is good. Their Departments menu item opens a
dropdown instead of a Mega Menu.

ASOS's header features their two main

categories (Men, Women) twice, and the search
box is prominent. The way they put the
categories on each side of the offer bar is
unique.
Also, despite having 3 rows, the header is still

quite compact

B&H's header is a bit overloaded with elements.

For example, I'd remove "About Us", along with
the top left dropdown and "Read explora".
"B&H Gift Cards" could be a menu item instead

of a header item.

On Build, the search box doesn't stand out

enough. See Amazon for a better example.
And with 4 rows, the header is overwhelming.

I like on Crutchfield that they have a value

proposition below their logo, and "12 reasons to
shop with us" on the top left. Their free shipping
offer has a link to details, and their phone
number stands out.

With 4 rows, Home Depot's header is a bit

overwhelming to look at, but its clean design
makes it not so bad. Some of the row #1 items
could probably be moved to the footer, or
moved to the main menu.

The ad up top on JCPenney is quite vague. That

row could be removed.
Their search box is prominent.

Cart
73) Upsells on add-to-cart
81) Modal panel
89) Allow to set quantity to zero (0)
106) Persistent shopping cart
107) Badges
108) Upsells in cart page / panel
142) Notify of items no longer available
150) Warn about low stock
Categories
The first row in REI's header acts as a secondary

menu, and makes the header overwhelming to
look at. There are too many options.
Also, their categories menu has 12 + 2 items, and

could be reduced to about 10 + 2.
One good thing is the text in their search box - it

acts as their value proposition statement.

On the Sears store, the search box is prominent

and stands out.
15 categories is a too much. I'd reduce to 10-12 +

a More button.
The Chat button in row #1 could be moved to

row #2 or in the footer (a tab always visible)

On Wayfair, "Registry" isn't a category and could

be moved to the footer.
Row #2 is overwhelming. "Room Ideas" and

"Sale" could be moved to a "More" item in row
#3.
Next Categories
Checkout
85) Allow to edit order 121) Field labels
105) Store Pickup option 122) Field lengths
109) Limit exit points 123) Address Finder
110) Guest checkout 124) Country before state
111) Upsells 125) Avoid dropdowns < 5 and > 10 items
112) Multiple payment methods 126) Autocomplete state
113) Inline validation 127) Pre-fill city and state
114) Optional & required fields 128) Expiration date format
115) Ask for minimal information 129) Avoid multi-column form
116) Billing address same as shipping address 130) Test one-page & multi-page checkout
117) Show appropriate keyboard (mobile) 132) Input masks for restricted fields
118) Expand credit card fields when selected 133) Increase the perceived security
119) Auto-format spaces in credit card number 136) Validate the address
120) Deduce credit card type
Categories
#4) List your main product categories in your menu’s level 1
On Adidas, their main categories are Men, Women, Kids, but you can also list products by Sports and Brands. Release dates are
announcements of products coming up, so not really a category. Examples (2/15) Categories
On Amazon, since they wanted to feature other menu items such as "Today's Deals", they hid their main categories under a Departments
menu item. Examples (3/15) Categories
Apple's header contains their main categories, and a "Support" item, which isn't a category.
ASOS' categories are minimal: Women and Men. That's it. It makes for a very simple menu. Notice how there are no other menu items
besides those two, so it makes the choice extremely simple. Examples (5/15) Categories
On B&H, I like how they added a visual separation between their categories and other items (Used, Specials)
On Build, they laid out the main categories next to the "All Departments" item, which lists the same categories and a few more. I find that
confusing. I'd recommend either they have one or the other. And if they go for listing their categories directly, they could have a More item. Examples (7/15) Categories
Crutchfield has a manually-triggered Mega Menu. And they appended a few additional menu items (More, Specials, Articles & Videos) after
their categories. Examples (8/15) Categories
Home Depot has a confusing menu. Whenever I see a "All Departments" item along with other items and some of those are included in the
full list of categories and some aren't, I have to work it out in my mind. Adding a visual separation would help, or only listing non-category
items next to All Departments. Examples (9/15) Categories
JCPenney implemented what I suggested in Home Depot's comment above. Basically, the items next to "Shop Departments" are not
categories. That way, it's not confusing. Examples (10/15) Categories
LL Bean's menu lists their main categories + a "Sale" menu item (products on sale). That said, the banner below looks like an ad, and it actually
contains other categories, which I didn't notice at first. That's bad design. Examples (11/15) Categories
Macy's kept it simple, with a single menu item ("Shop by Department"). That opens the first dimension of their Mega Menu, then hovering over
an item opens a panel to the right with the sub-menu items. Examples (12/15) Categories
Nordstrom listed their main categories, along with two other menu items (Sale, and Style Guide)
REI lists their main categories, along with "Deals" and "More" menu items. "REI OUTLET" is in a different font, and therefore visually stands out
from the categories and is clear that it's not a category. Examples (14/15) Categories
On the Sears store, I like how the "More..." menu item is visually different (it has a darker background color)
In Wayfair's menu, "Registry" is not a category and should be visually distinguished from the category menu items.
Next Categories
#5 Next
Have a tagline
and/or guarantee,
USP or offer in
your header

#5) Have a tagline and/or guarantee, USP or offer in your header
Amazon
Misc
26) Avoid full-page popups 66) Wish List
29) Help choose the right product 90) Cross-device
31) Font sizes 97) Back button
33) User-generated content (UGC) 100) Inspirational images
34) Localization 134) Return in-store or by mail
39) Live Chat 146) Loading speed
40) Chatbot 147) About Us page
41) Compelling newsletter opt-in 148) Optimize for mobile
65) Urgency
Categories
B&H
Build
Crutchfield
Home Depot
JCPenney
LL Bean
Macy’s
Amazon's mobile header is more standard and

recommended, with the logo and cart on the first row,
and the search box on the second row.
Notice how they opted for a link bar instead of a

burger menu, with their main links (Departments,
Whole Foods, etc.)
Adidas has a minimal header, and everything on one

row. I recommend having the search box always
visible as row #2 instead of that search icon.

REI
Sears
Wayfair
Next Categories
LL Bean's header is also standard, but the offer is Macy's header is standard. Interestingly, the first row is Nordstrom only has a search icon - I'd recommend
below the header instead of above. a value proposition statement instead of an offer. ("we they remove it and put a search box instead, as row #2
ship in 200 countries")

#6) On desktop, show your key contact information in the header
B&H
Build
Crutchfield
#2
Put it right below your header to feature some of your main
Next
product categories. Growth Rock saw a 5% increase with 93%
statistical significance by adding a Link Bar.
On mobile, add a
Link Bar

LL Bean
Next Categories
#7 Next
On mobile, if calls
are important for
your store, place a
sticky CTA button
at the top or
bottom of the
screen

#7) On mobile, if calls are important for your store, place a sticky CTA button at the top or bottom of the screen
I haven't seen this on any store yet, only on service

company websites. However, some stores have a
phone icon in the header, like B&H.
Next Categories
#3
On desktop, opt for a header with 2 or 3 rows.
Next
For example:
On desktop, opt
Row 1
- contact info
for a header with 2

- “FREE SHIPPING ON ALL ORDERS”
- “My Account” link
- Country selection
or 3 rows Row 2
- logo (left and clickable)
- search box (middle)
- cart icon (right)
Row 3
- Mega menu with the main categories as level 1

#8) On mobile, make sure your menu items are big enough to be easily clickable on smaller devices like the iPhone 6
On Adidas, the text font is bigger than usual, but Amazon - standard row height. On ASOS, the menu items are huge because they
the row height is about standard. contain a thumbnail. I gotta say it looks good. The
downside is you have to scroll down much more.

#8) On mobile, make sure your menu items are big enough to be easily clickable on smaller devices like the iPhone 6
Crutchfield has standard row height for menu Nordstrom has a standard row height for menu. REI has bigger text, and slightly taller than usual
items and they’re clearly separated. menu items.
Next Categories
#9
Of course, it’s OK if some of those menu items are expandable
Next
and that when expanded the menu is longer than one screen.
Have as few menu

items as possible,
and make sure
they fit on one
screen (on mobile)

ASOS's header features their two main

categories (Men, Women) twice, and the search
box is prominent. The way they put the
categories on each side of the offer bar is
unique.
Also, despite having 3 rows, the header is still

quite compact

#9) Have as few menu items as possible, and make sure they fit on one screen (on mobile)
Home Depot bolded their main featured menu LL Bean's collapsed menu fits well on one screen. Macy's menu is also very simple. Note that when
items, and a separator before their less important clicking on "Shop by Department", it displays a
items. And the whole thing fits on one screen. sub-menu that doesn't fit on one screen.

While Nordstrom's entire menu is too long to fit on Sears's featured menu items do fit on one screen.
screen, their featured items (bolded) do fit.
Next Categories
#10
Show the sub-categories as columns – ideally 3 to 5).
Next
Optionally show an image for each column.
If your store has a very big navigation structure (lots of menu
On desktop, opt
items), you can have a “multi-dimensional” Mega Menu that
lets users dive into a few levels of menu items.
for a Mega Menu

I like on Crutchfield that they have a value

proposition below their logo, and "12 reasons to
shop with us" on the top left. Their free shipping
offer has a link to details, and their phone
number stands out.

#10) On desktop, opt for a Mega Menu
Build
Crutchfield
Home Depot
Macy's could list some of their main categories

directly in the header. Something to test out.
Their search box doesn't stand out enough.
And a standard cart icon would avoid confusion.

Macy’s
Nordstrom
REI
On Wayfair, "Registry" isn't a category and could

be moved to the footer.
Row #2 is overwhelming. "Room Ideas" and

"Sale" could be moved to a "More" item in row
#3.
Next Categories
Walmart
Wayfair
Next Categories
#11
Post-sale actions are for example: Sign In / Register, Order
Next
Tracking, Customer Service, ...
Place the
post-sale actions
above the fold in
the menu or in the
header

On Amazon, since they wanted to feature other menu items such as "Today's Deals", they hid their main categories under a Departments
menu item. Examples (3/15) Categories
#11) Place the post-sale actions above the fold in the menu or in the header
Amazon merged their Sign In, lists and account links under one menu item.|

ASOS merged their Sign In / Join, account, order tracking and a couple other links under an account icon, which is well implemented. A
good example to follow. Note that the behavior on mobile is quite different (those links are in the burger menu and the account icon only
gives the option to sign up or login).
B&H features their phone number in the header, and they merged their log in, sign up, account, order tracking and wish list under one
menu item. I prefer ASOS' layout, but this is a fairly good inspiration as well.

On B&H, I like how they added a visual separation between their categories and other items (Used, Specials)
On Crutchfield, the Account panel opens only when the Account icon is clicked. They also show their phone number and a Contact
button.

On Home Depot, a panel opens with additional links when clicking the Account icon. I'd recommend moving the Track Order link to that
panel. Also, I'm not a big fan of their two buttons on the site (Live Chat, Feedback) - they don't stand out enough. They'd need to be
redesigned, or moved to the footer.
On JCPenney, the Sign In button opens a side panel with a few links: sign in, sign up, orders, lists, appointments, etc. Not a bad idea.

Home Depot has a confusing menu. Whenever I see a "All Departments" item along with other items and some of those are included in the
full list of categories and some aren't, I have to work it out in my mind. Adding a visual separation would help, or only listing non-category
items next to All Departments. Examples (9/15) Categories
Macy's only has a Order Tracking menu item. They should add contact information or a link to the Help or a way to contact them.

On Nordstrom, hovering over the Sign In menu item opens a panel with options to sign in, open your account, your wish list, and more.

On REI, clicking "Sign In" opens a panel with options to sign in and create an account only. They should add links to Order Tracking, Return
a Product in that panel, along with contact information or a menu item to contact them.

Macy's kept it simple, with a single menu item ("Shop by Department"). That opens the first dimension of their Mega Menu, then hovering over
an item opens a panel to the right with the sub-menu items. Examples (12/15) Categories
Walmart has an account icon which opens a side panel (shown below) with options to sign in, create an account, and track orders.

Wayfair has a "My Account & Orders" menu item, which opens a panel with a few options: account, orders, sign in, create an account, and
more.
Next Categories
#12 Next
Order your menu’s

main product
categories by
sales volume
Categories
On the Sears store, I like how the "More..." menu item is visually different (it has a darker background color)
#14
Semi-sticky means that it re-appears when scrolling back up.
Next
A sticky or semi-sticky header makes visitors not have to scroll
all the way up to go to another page or do another search.
Make your header

sticky or
semi-sticky

#14) Make your header sticky or semi-sticky
Adidas' header is semi-sticky (it disappears when scrolling down, and reappears when scrolling back up a bit).

ASOS' header is semi-sticky.

Amazon
#15
That usually means that the left swiping gesture and tapping
Next
outside of the menu panel should close it. And if there is an X
button, it should be big enough to be easy to click.
On mobile, the
burger menu
should be easy to
close

#15) On mobile, the burger menu should be easy to close
The only way to close the burger menu on Adidas' Apple's menu has the same behavior as Adidas - On ASOS, the menu can be closed by tapping the
store is to tap the X which replaces the burger only the small X closes the menu. large X on the top-right corner, or in the space on
menu icon when the menu is open. It's pretty the right of the menu.
intuitive - users simply tap in the same location that
they did to open the menu. Examples (2/5) Categories
The B&H menu can be closed by re-tapping the The Build menu can be closed with the X that Crutchfield's open menu replaces the burger icon
burger menu icon (it does not change to a X), or by appears on the top right, or in the space on the with a X, and that's the only way to close it.
tapping the space on the right of the menu. If you right of the menu.
expect your shoppers to close the menu by tapping
the burger menu icon, make sure to change it to a Examples (3/5) Categories
X.
Build
Macy's menu can only be closed by tapping the Nordstrom's open menu doesn't show a burger REI's open menu shows an X on the top right, and it
burger menu icon again. I'd recommend they menu icon or a X. It can only be closed by tapping can also be closed by tapping the empty space on
change the icon to a X when the menu is open. in the empty side on the right of the menu. This is the left of the open menu.
bad UX - do not take it as inspiration : )
The Sears menu can be closed by tapping the Wayfair's menu can be closed by re-tapping the burger Walmart's open menu shows an X, and it can also
burger menu icon again, or tapping the space on menu icon (which changes to a X), or tapping the space be closed by tapping the space on the right of the
the right of the open menu. The burger menu icon on the right of the menu. And actually, trying to swipe left open menu.
should be replaced with an X. the menu also works to close it, even though there is no
animation to show it sliding back left. Next Categories
#16 Next
Place a search box

prominently in the
header

JCPenney
#16) Place a search box prominently in the header
Amazon is good inspiration on both desktop and mobile. It has a prominently placed and large search box.

ASOS has a big search box in their desktop header, but only a search icon on mobile. On mobile, clicking the icon hides the page and
displays a search box.

B&H is good inspiration also. It has a big search box on both desktop and mobile.

Nordstrom
Crutchfield is good inspiration. They have a large search box on both desktop and mobile.

Home Depot is good inspiration. Interestingly, also, they managed to fit the search box in their one-row header on mobile.

JCPenney is good inspiration. They maximized the width of their search box on both desktop and mobile.

Wayfair
Next Categories
Macy's has a search box on both desktop and mobile. I'd recommend they make the search on desktop stand out more.

REI has a search box on both desktop and mobile. They gave it a contrasting background color, which attracts the eye to it.

Sears is also good inspiration. They have a search box on both desktop and mobile. And I like how they added a "close" button inside the
search on mobile.

Build
Wayfair also has a search box on both desktop and mobile. It doesn't stand out enough, though.
Next Categories
#17 Next
Provide
auto-suggestions
as users are typing
in the search box

#17) Provide auto-suggestions as users are typing in the search box
Adidas is good inspiration. They suggest searches as well as products based on what you typed in the search box so far. They also added
a link to see all search results for what was typed.

LL Bean
Next Categories
Apple also only suggests searches based on what was typed.

ASOS only suggests searches based on what was typed, but they also show how many results there are for each search, which is
interesting.

B&H suggests searches based on what was typed, along with resources and products. They also added a link to see all search results.

#8
Take the time to actually test your store on various mobile
Next
devices.
On mobile, make
sure your menu
items are big
enough to be
easily clickable on
smaller devices
like the iPhone 6

Crutchfield only suggests searches based on what was typed.

Same with Home Depot - they only suggest searches based on what was typed.

Idem with JCPenney - they suggest searches only.

#9
Of course, it’s OK if some of those menu items are expandable
Next
and that when expanded the menu is longer than one screen.
Have as few menu

items as possible,
and make sure
they fit on one
screen (on mobile)

Nordstrom suggests searches and products based on what was typed.

REI only suggests searches based on what was typed.

Sears only suggests searches based on what was typed.

While Nordstrom's entire menu is too long to fit on Sears's featured menu items do fit on one screen.
screen, their featured items (bolded) do fit.
Next Categories
Idem with Wayfair - only suggested searches based on what you type.
Next Categories
#18
See how Google Search does this.
Next
Return search
results for the
corrected spelling
when users make
typos

#18) Return search results for the corrected spelling when users make typos
Adidas shows results for the corrected spelling, automatically. There's no way to search for what was typed specifically.

Build
Crutchfield searches for your exact spelling, and suggests the corrected spelling with a link to those results.

Home Depot shows results for the corrected spelling, automatically. There's no way to search for what you typed specifically.

Idem for JC Penney - it shows results for the corrected spelling, automatically. There's no way to search for what was typed specifically,
but it tells you what you searched for.

JCPenney
Macy's shows results for the corrected spelling, automatically. It's not possible to search for what was typed specifically.

Nordstrom searches for your exact spelling, and suggests several similar searches with the corrected spelling.

REI searches for your exact spelling, and suggests 3 similar searches with the corrected spelling.

REI
Walmart shows results for the corrected spelling, automatically. It gives you a link to the search results for the exact spelling you typed.

Wayfair shows results for the corrected spelling, automatically. It's not possible to search for what was typed specifically.
Next Categories
#19 Next
Add a category
filter or other
relevant search
filters to narrow
down results

Wayfair
Next Categories
#19) Add a category filter or other relevant search filters to narrow down results
Amazon put their many filters on the left column of the search results page. This is the standard approach.

ASOS shows various filter dropdowns at the top of the page above the results.

B&H shows sub-categories of the category relating to the search term if it finds one. (see the other comment for the regular filters if the
search is more precise)

Amazon merged their Sign In, lists and account links under one menu item.|

Crutchfield has standard filters in the left column.

Home Depot shows categories as left-column filters if your search is general and relates to a category.

Home Depot shows standard filters in the left column if your search keyword is more precise and isn't a main category.

I like how on the Build store there is an item to initiate a return. They also have their contact info in the header, and Build is also a good
example to follow.

LL Bean also has standard filters in the left column.

Macy's has filters on the left side of the screen.

Nordstrom has standard filters, which are all collapsed by default.

On JCPenney, the Sign In button opens a side panel with a few links: sign in, sign up, orders, lists, appointments, etc. Not a bad idea.

Sears put its filters in the left column.

Walmart has filters on the left side, along with above the search results.

On Wayfair, the Filters button opens a side panel with various filters.
Next Categories
On Nordstrom, hovering over the Sign In menu item opens a panel with options to sign in, open your account, your wish list, and more.

#20) Always return search results
Adidas' No Results page lists their main categories, quick links, and recommended products.

ASOS show a few main categories, with a thumbnail photo for each.

Crutchfield show some of their main categories with an icon for each.

Walmart has an account icon which opens a side panel (shown below) with options to sign in, create an account, and track orders.

JCPenney lists their top selling products

LL Bean lists 4 products you might like. I'm not sure how these are selected, since I've never purchased anything on their store. I'm
guessing they just show best selling products.

Macy's lists products you might like, along with their main categories.

#13 Next
Order your menu’s

SUB-categories
alphabetically
Categories
REI lists 4 popular products and 4 additional best sellers

Sears lists products you might like, top categories, and sponsored products

Wayfair lists their departments, and some offers
Next Categories
ASOS' header is semi-sticky.

#21) Show previous or top searches in a panel below the search box as the user starts to type in the search box
Adidas

ASOS: the Clear button is a good idea.

Home Depot: the last option is a link to clear the search history. ASOS' approach is better.

The only way to close the burger menu on Adidas' Apple's menu has the same behavior as Adidas - On ASOS, the menu can be closed by tapping the
store is to tap the X which replaces the burger only the small X closes the menu. large X on the top-right corner, or in the space on
menu icon when the menu is open. It's pretty the right of the menu.
intuitive - users simply tap in the same location that
they did to open the menu. Examples (2/5) Categories
Macy’s

Nordstrom: good inspiration.

Walmart: interestingly, you can clear any of the previous search items, instead of clearing all of them.

Macy's menu can only be closed by tapping the Nordstrom's open menu doesn't show a burger REI's open menu shows an X on the top right, and it
burger menu icon again. I'd recommend they menu icon or a X. It can only be closed by tapping can also be closed by tapping the empty space on
change the icon to a X when the menu is open. in the empty side on the right of the menu. This is the left of the open menu.
bad UX - do not take it as inspiration : )
#22
Other relevant content includes blog posts, other pages, etc.
Next
Search results
should first list
the products found
based on the
search term,
followed by what
was found in other
relevant content
Categories
#23
Next
Display a clear and

concise
benefit-oriented
value proposition
statement above
the fold on your
homepage

#23) Display a clear and concise benefit-oriented value proposition statement above the fold on your homepage
Adidas has a standard headline and subheadline. Good inspiration.

Adidas has a search box visible on desktop. I'd recommend it be wider. On mobile, there is a search icon in the header, which displays the
search box below the header. I'd test making the search box always visible in the header. By "always visible", I mean that the search box
should be part of the header and not need to be triggered to be shown. But depending on if the header is sticky or semi-sticky or not
sticky at all, it won't actually be "always visible" as users scroll down. Examples (2/14) Categories
On B&H's homepage, the first hero section carousel slide has a generic value proposition about cameras and lenses. The second slide
features another category, and the last two slides feature products.
Next Categories
#24
Avoid labels such as “Shop Now”, “Continue”, ... ). Depending on
Next
your store structure, you may want to have more than one CTA
(for example, “Shop Men’s Shoes” and “Shop Women’s Shoes”)
Place a clear &

descriptive
call-to-action
button above the
fold

#24) Place a clear & descriptive call-to-action button above the fold
Adidas: their CTA buttons in the hero section are descriptive and they visually stand out.

B&H is good inspiration also. It has a big search box on both desktop and mobile.

Apple's homepage has two links in the first section - "Learn More", and "Apply Now". Note that the subsequent sections also have similar
CTA links.

ASOS has a single button: "Shop Now".

On B&H, each slide has one or two CTA buttons, and they're different for each slide. NOT good inspiration. It's usually best to avoid image
carousels in the homepage hero section altogether.

Home Depot is good inspiration. Interestingly, also, they managed to fit the search box in their one-row header on mobile.

Home Depot has 3 CTA buttons. They're descriptive, but the whole hero section looks like an add, so that's not great inspiration.

LL Bean has 3 main CTA buttons in the first section. Note that each following section also has one or two CTA button.

Nordstrom has two CTA links in the hero section. I'd recommend that they make those into actual buttons and make them bigger and
stand out more so that shoppers get more compelled to take action by clicking on one of those buttons.

Macy's has a search box on both desktop and mobile. I'd recommend they make the search on desktop stand out more.

Sears has a "Shop Now" button. It's too general (not descriptive enough).

3 out of 4 hero section image carousel slides on Wayfair have the same CTA button ("Shop All Sales"). Slide #3 has a different CTA ("Learn
More"). A good general rule is to avoid image carousels in the homepage hero section, but if you absolutely must have one, then have the
same CTA for each slide, and design the slides so they make sense together (and not disparate topics).
Next Categories
#25
For example, “60 Days Return Policy”. Typically, it’s a good idea
Next
to present two or three selling points above the fold.
Unique selling
points should be
specific

Walmart has a search box visible on both desktop and mobile.

#25) Unique selling points should be specific
Macy's has a section with 3 selling points. Actually, only the middle one really is. The other two are calls to action but not really selling
points.

Sears has a section below the hero section with 5 selling points. Good inspiration.
Next Categories
#26
Make sure they take no more than 15% of the screen, and are
Next
easy to dismiss.
Actually, Google now penalizes intrusive popups on mobile, and
On mobile, avoid
so it is recommended to keep them to maximum 15% of the
screen, and make them easy to dismiss.
full-page popups To be more precise, read Google's original announcement about

it.
that interrupt the So there are some cases where large popups on mobile are still
shopping ok, for instance to accept cookies or to have the user log in.
Otherwise, keep the popup size to about 15%.
experience

Adidas is good inspiration. They suggest searches as well as products based on what you typed in the search box so far. They also added
a link to see all search results for what was typed.

#26) On mobile, avoid full-page popups that interrupt the shopping experience
ASOS has a small popup on the bottom of Sears has a floating button to get their app, Wayfair has a small bar at the top which you
the screen to download their app. which you can easily close. can close, to promote their app.
Next Categories
#27
Opt instead for user-initiated carousels, if any. On the homepage
Next
above the fold, avoid carousels altogether.
Avoid automatic
carousels

#27) Avoid automatic carousels
Adidas has a carousel with two slides, but only the background image changes. The text and buttons on top remain the same, so it only
shows that they have products for both men and women, and it's not too distracting.

ASOS only suggests searches based on what was typed, but they also show how many results there are for each search, which is
interesting.

Amazon has a good use for carousels: featuring some products for some of their categories. Note that they're user-generated, and not
automatically scrolling through them.

Apple's hero section is good inspiration. It has a simple title, sub-title, CTA buttons, and image. Good inspiration.

ASOS has a static hero image. Depending on your browser size, the text overlapping the women in the background is a bit hard to read.
And "Shop Now" is too generic.

Crutchfield only suggests searches based on what was typed.

Home Depot's static hero is too overwhelming to look at and has too many CTA's, but the good thing is it's not an automatic carousel.

Macy's chose to list their main categories inside of their static hero image. That's actually a good idea, but I'd recommend they instead
put the headline there, and introduce the main categories with thumbnails below the hero section.

Nordstrom is good inspiration. Their static hero section is well designed. The only issue is that their CTA "buttons" (links) are too small. I'd
recommend converting them to buttons and making them stand out.

Idem for LL Bean - only suggested searches.

Sears has a well-designed hero section for their Labor Day Sale.
Next Categories
#28 Next
Feature your top

categories (with
images) right
below the fold on
the homepage

#28) Feature your top categories (with images) right below the fold on the homepage
Adidas implemented this very well - it shows 4 main categories with a well-integrated image for each. Good inspiration.

Sears only suggests searches based on what was typed.

ASOS has a section with a contrasting background color with a user-triggered carousel of their main categories. In addition to this, they
feature some other categories with larger images throughout the homepage.

B&H features 12 main categories, with an image for each. That section is partly visible without having to scroll down.

Crutchfield features 9 popular main categories with an icon for each. This section is right below the fold.

#18
See how Google Search does this.
Next
Return search
results for the
corrected spelling
when users make
typos

On JCPenney, there are 4 featured categories partly visible without scrolling down. The next section contains another 3 main categories.

LL Bean features 5 categories over a few sections, which actually take most of the homepage's real estate.

Nordstrom has an automatic carousel towards the bottom of their homepage with their main categories. NOT a good inspiration.

Crutchfield searches for your exact spelling, and suggests the corrected spelling with a link to those results.

Walmart has a section about halfway down their homepage, with 12 featured categories.

Wayfair has a "Shop by Department" section partly visible above the fold (without having to scroll down).
Next Categories
#29
This can be done with a guide, questionnaire, wizard…
Next
Help visitors
choose the right
product

LL Bean searches for your exact spelling, and suggests the corrected spelling with a link to those results.

#30
User-controlled carousels are usually good for this.
Next
Optionally feature
some of your
products AFTER
your featured
categories (on the
homepage)

#30) Optionally feature some of your products AFTER your featured categories (on the homepage)
Adidas has 3 sections on its homepage with featured products. The first two have 2 products per row. The third is a carousel with 4 slides
of 4 products.

Amazon has 7 consecutive carousels with a number of products in each: best sellers, must haves, products Amazon loves, and more. This
is good inspiration for stores with lots of categories and products.

REI searches for your exact spelling, and suggests 3 similar searches with the corrected spelling.

B&H features various deals below the section with their main categories. Interestingly, they have another section near the footer with their
Top Categories.

Crutchfield has a section with 4 featured customer favorites.

Home Depot has a section with sponsored products.

Wayfair shows results for the corrected spelling, automatically. It's not possible to search for what was typed specifically.
Next Categories
Nordstrom has a carousel with deals, and a carousel with best-sellers.

REI features 4 "crowd favorites", near the footer.

Sears features some of their products on sale in a red-background section. They also have a carousel with best sellers, and a carousel
with sponsored products.
Next Categories
Amazon put their many filters on the left column of the search results page. This is the standard approach.

#31) Choose font sizes that are easily readable (16px+), on both desktop and mobile
Apple is good inspiration. Most of the text inside of their pages is quite large, and very easy to read. The font size of their header and
footer items is a bit too small, however.
Next Categories
#32
For example: testimonials, “As Seen On” logos, facebook likes...
Next
anything that builds credibility.
Add social proof

on the homepage

#32) Add social proof on the homepage
B&H has an interesting section with a feed of what's happening now on the store. I like the elements that show a new review or a top
seller. It also includes new instagram posts.

B&H also shows regular filters in the left column when the search doesn't relate to a general category but is more precise.

Crutchfield showcases some customer favorites. Because it includes the rating and # reviews, that's a good section to have.

Crutchfield also has a section with testimonials on their homepage.

I like how Etsy adds pre-selection for their products, mentioning how many "other people want this".

Home Depot shows standard filters in the left column if your search keyword is more precise and isn't a main category.

#33
This can be an instagram feed on the homepage, and/or user
Next
photos and videos on specific product pages.
Add
user-generated
content (UGC)

#33) Add user-generated content (UGC)
LL Bean has an instagram feed on their homepage which showcases pictures shared by their customers.
Next Categories
#34 Next
Localize your store

to the visitor's
country and
currency by
default

Macy's has filters on the left side of the screen.

#34) Localize your store to the visitor's country and currency by default
Home Depot automatically selects the closest store. Opening the store finder can detect my position and it gives me options of nearby
stores to choose from.

JCPenney does not automatically detect my location. But by clicking "Find a Store", there is a button to detect my location.

LL Bean shows which country it automatically detected and is set to ship to. Clicking it allows you to change it to another country (US,
Canada, Japan, or Global).

Sears put its filters in the left column.

Nordstrom automatically detects your country, and has a button to find the store nearest you.

REI only has a "Stores" menu item (a store locator), which does auto-detect my location. It doesn't show my country in the header.

Walmart auto-selects where it's delivering. Clicking it allows you to change the location but it requires a valid zip code or city. NOT good
inspiration.
Next Categories
#20
So if the user searches for a product you do not have in your
Next
store, suggest other related, relevant, or popular products.
To be more precise, your No Results page can include some of
Always return
the following components:
search results
● category suggestions based on the query
● alternate queries similar to the query searched for
● personalized product recommendations based on the
user profile and previous purchases
● contact information (phone number, email, chat) and
other help links
● popular products and categories

#35) Make your homepage long and rich, while optimizing for loading speed
Adidas' homepage is Amazon's Apple's homepage

well designed, and homepage has 13 has 7 sections and
composed of 8 sections, most of has a clean design
colorful and which are carousels. with lots of white
attractive sections, space. Good
including the header inspiration
and footer. Good
inspiration.

ASOS' homepage B&H's homepage Crutchfield's homepage

has 8 sections. The has 10 sections. has 8 sections. Their hero
layout is effective, section image is vibrant, and
but it's not a great the section "Find what fits
design your car" is a good idea.
Good inspiration.

Home Depot's JCPenney's LL Bean's homepage has 7

homepage is quite homepage has 9 sections, and uses large
long, with 14 sections. The layout images. Good inspiration, but
sections. is too compressed, the design has room for
I'd recommend improvement, and the
adding more space homepage could be a tiny bit
to "let it breathe". longer.

Crutchfield show some of their main categories with an icon for each.

Walmart's Wayfair's homepage

homepage has 7 has 10 sections,
sections, and I'd most of which are
recommend quite colorful. Since
increasing the text most sections have a
size of section background color,
headers. they put a bit of
white space
between them to
visually separate
them.
Next Categories
#36 Next
Add a section with

credit card logos,
shipping logos,
and trust badges
towards the
bottom of the
homepage

#36) Add a section with credit card logos, shipping logos, and trust badges towards the bottom of the homepage
ASOS shows logos of payment options right above their footer.

LL Bean lists 4 products you might like. I'm not sure how these are selected, since I've never purchased anything on their store. I'm
guessing they just show best selling products.

Build shows a trust badge, followed by their payment options, in the footer.

Crutchfield has a couple of trust badges in the footer.

REI has a 100% satisfaction guarantee. It's not a trust badge, but it does establish some trust.
Next Categories
REI lists 4 popular products and 4 additional best sellers

#38
Contact information can include your phone, email, and social
Next
media.
Add key contact

information to the
footer

#38) Add key contact information to the footer
Apple has a phone number in the footer

B&H has a section with their phone numbers, contact form, and live chat.

#21 Next
Show previous or
top searches in a
panel below the
search box as the
user starts to type
in the search box

Crutchfield has a menu item to contact them, and their social media icons. I'd recommend actually putting the contact information
directly in the footer.

Home Depot shows a phone number.

JCPenney has a section with a phone number, email, a button to open their customer service page, and a button to contact them directly
on Twitter.

Home Depot: the last option is a link to clear the search history. ASOS' approach is better.

REI has a section with their contact options. Good inspiration.

In Wayfair's footer, clicking the "Call Us" button shows the phone number.
Next Categories
#39 Next
Add a Live Chat to

quickly answer
your visitors’
questions

Nordstrom: good inspiration.

#39) Add a Live Chat to quickly answer your visitors’ questions
B&H has a Live Chat menu item in the header.

Build's Live Chat menu item changes to "Chat Hours" outside of business owners.

Crutchfield's "Contact Us" menu item opens a side panel with a few contact options, including a Live Chat.

#22
Next
Search results
should first list
the products found
based on the
search term,
followed by what
was found in other
relevant content
Categories
On JCPenney, the Chat button is visible on the side of the screen only when in the Help page.

On Macy's store, the chat button is only available on the contact page.

On Nordstrom, you need to open the contact page to open the Live Chat.

Since I live in Canada and Amazon detects my location automatically, the sub-headline focuses on their value proposition for their
canadian clients.

#40 Next
Add a chatbot to
your Live Chat to
give immediate
responses 24/7,
and product
guidance
Categories
#41 Next
Have a compelling
title, description,
and CTA button for
your newsletter
opt-in

#41) Have a compelling title, description, and CTA button for your newsletter opt-in
Adidas' newsletter section title has a clear value proposition (news and 15% off). Good inspiration.

Adidas: their CTA buttons in the hero section are descriptive and they visually stand out.

Crutchfield has a very generic title, but a value-oriented sub-title ($350 reward card).

Home Depot has a concrete value offer for their newsletter ($5 off and savings & tips)

REI's newsletter title is too generic. The subtitle is a bit better, but still quite generic (co-op offers, events, cool new gear).

ASOS has a single button: "Shop Now".

#42 Next
Products are well

organized in
simple categories

#42) Products are well organized in simple categories
Adidas's menu is good inspiration. It has only 6 main items, big bold level 2 sub-menu items, and the level 3 items are arranged one per
column.

Apple has the simplest menu of all. 7 level one menu items, and that's it.

Home Depot has 3 CTA buttons. They're descriptive, but the whole hero section looks like an add, so that's not great inspiration.

Build features some of their sub menu items, which makes their Mega Menus easier to process and choose the right page.

Home Depot's is complex, it has a lot of items, but they organized it pretty well, in 3 levels (with bolding for leaf category). They also
limited the amount of items per category to not overwhelm the shopper.

JCPenney used a bi-dimensional Mega Menu, with their main categories in the left column, and sub-categories showing on the right of
that. Good use of bolding and white space to separate each category.

REI has a single "Shop the deals" CTA button. It could be a bit bigger.

REI's store has a lot of products and categories, but they made good use of bolding, white space and a limited amount of items per
sub-category. Good inspiration if you have a lot of products.

Sears features a few popular sub-categories with thumbnails, followed by a full list. Good inspiration.

Wayfair's menu is textual only. I'd recommend to make the sub-categories stand out more with bolder & more contrasting text.
Next Categories
#25
For example, “60 Days Return Policy”. Typically, it’s a good idea
Next
to present two or three selling points above the fold.
Unique selling
points should be
specific

#43) Have relevant dynamic sorting and filters in the product category pages
Adidas shows which filters are applied, and you can easily remove any of them. I'd recommend however to visually separate filters and
sorting.

Amazon shows all the filters in the left panel.

ASOS shows a blue line over the filter when a value in it is selected. I'd recommend visually separating the Sort from the filters.

Sears has a section below the hero section with 5 selling points. Good inspiration.
Next Categories
Build's filters are all collapsed by default. That gives an overview of what you can filter on. And the sorting is separate from the filters
(shown above the list), which is good.

Crutchfield's sorting is separate from the filters. The filters are all expanded by default, but the number of options for each filter is limited
(with a "Show more" link).

Home Depot separates filters and sorting. They also feature a few filters, which I'm guessing are the most used or the most relevant for
that list. Good inspiration.

#26) On mobile, avoid full-page popups that interrupt the shopping experience
ASOS has a small popup on the bottom of Sears has a floating button to get their app, Wayfair has a small bar at the top which you
the screen to download their app. which you can easily close. can close, to promote their app.
Next Categories
LL Bean separates filters and sorting. The layout of their filters is however visually confusing. They indented the options, and I'd
recommend instead visually grouping each filter.

Macy's separates filters and sorting. Only one of the filters is expanded by default.0

Nordstrom separates filters and sorting. I'd recommend that they align their sorting dropdown with their filters.

While Amazon's carousel is well done, I would still recommend they make it user-triggered instead of automatic.

Sears separates filters and sorting. Only a few filters are expanded by default, and the majority are collapsed. A maximum of 6 options are
shown, with a "show more" link to show the rest. Good inspiration.

Walmart separates filters and sorting. Most filters are collapsed by default.

Wayfair separates filters and sorting. The options are displayed in scrollable dropdown panels. NOT a good example to follow.
Next Categories
ASOS has a static hero image. Depending on your browser size, the text overlapping the women in the background is a bit hard to read.
And "Shop Now" is too generic.

#44) Display these product attributes in category pages: image, title, price, ratings, and product variations
Adidas for example has these

product attributes, in their shoe
category:
- label (new)
- favorite icon
- variants
- tag (category)
- title
- price
- # colors

Amazon in their CDs category

has these product attributes:
- label (best seller)

- title
- year
- type
- composer
- "ships to Canada"
- star rating & # reviews
- prices & availability

ASOS has minimal product

attributes:
- favorite icon
- title
- price
There is no additional
information shown when
hovering a product with the
mouse.

Macy's chose to list their main categories inside of their static hero image. That's actually a good idea, but I'd recommend they instead
put the headline there, and introduce the main categories with thumbnails below the hero section.

Build shows these attributes in

their Kitchen Sink category:
- add to compare
- title
- price
- availability

Crutchfield shows these

attributes in the Speakers
category:
- label (top seller)

- title
- SKU
- availability
- description
- shipping cost
- regular price
- discount
- price
- Add to cart
- add to compare

Home Depot shows these

attributes:
- add to compare
- variants
- SKU
- title
- price, regular price, saving
- description
- delivery cost
- add to cart

Sears has a well-designed hero section for their Labor Day Sale.
Next Categories
LL Bean shows these attributes:
- title
- price range
- variants

Macy's has these attributes:
- variants
- title
- regular price, current price
range
- more like this

Adidas implemented this very well - it shows 4 main categories with a well-integrated image for each. Good inspiration.

REI shows these attributes for

each product:
- # variants
- title
- price range
- add to compare

Sears has these attributes:
- cashback amount
- variants
- regular price
- current price
- title
- seller
- add to compare
- offer

Walmart displays these

attributes:
- variants
- brand
- title
- price
- delivery / pickup time and
cost

B&H features 12 main categories, with an image for each. That section is partly visible without having to scroll down.

#45
Show how much they save on sale items, and have limited
Next
quantity or limited time offers.
Add urgency
elements to
category pages

#45) Add urgency elements to category pages
Adidas adds a label for new products. It's not urgency, but it does drive users to action by getting their attention on these products.

Amazon identifies best sellers with a label. It's not urgency, but it helps shoppers make a choice of which product to check out and
purchase.

B&H builds their shoppers' excitement by labeling new releases and specifying the expected date of availability.

Just like Amazon, Crutchfield labels their top sellers, which makes the product selection process easier.

JCPenney uses urgency ("few left") and exclusivity ("only at JCP"). Good inspiration. I'd recommend they also use labels for best sellers
and new releases.

Walmart labels new products.

Wayfair has labels for products on sale, and blogger's picks. Good inspiration. They should also label best sellers and products running
out of inventory.
Next Categories
#46 Next
Feature products,
bundles or deals
at the top of
category pages

#46) Feature products, bundles or deals at the top of category pages
Amazon is the best example I

found among the sites I looked
at. Great inspiration. They have
multiple sections at the top of
the category page with featured
products:
- best sellers
- top rated
- recommended for you
- most wished for
- most gifted
- hot new releases

Crutchfield shows their best seller as the first product in the list.
Next Categories
#47
Avoid infinity scrolling.
Next
On desktop, use a combination of lazy loading and a “Load

More” button. Show about 10-30 products on page load, and
Avoid pagination
then lazy-load another 10-30 products as they scroll down, until
they reach 50-100 products. Then, display a “Load more” button
in category pages
and repeat
On mobile, show 15-30 on page load, then show a “Load More”

button. When the user clicks on it, load the next 15-30 elements
all at once (no lazy loading).

#47) Avoid pagination in category pages
ASOS implemented this well. Great inspiration.

Crutchfield implement a Load More button, but I'd recommend also showing a small progress bar like on ASOS.

LL Bean only lazy loads more products as you scroll down to the end of the list. It doesn't show you how many more there are.
Next Categories
#48 Next
Have multiple high

quality product
images for each
product (in the
product page)

#48) Have multiple high quality product images for each product (in the product page)
Adidas is good inspiration. In the example below, the product has 12 images. However, their design makes it hard to scroll down to the
additional thumbnails not visible by default.

This product on Amazon is a good example, with 7 images.

On ASOS, this product has 4 images and a video. A video is worth several images.

B&H has 11 images and a video for this product. I also like their "Show more" link which shows additional images. Another option is to open
an overlay panel with the full list of images when clicking "show more".

Here's Build's example, with 4 images for this product. Having 3 or 4 images is a minimum.

#29) Help visitors choose the right product
B&H's cable finder is great inspiration. It makes it easy to identify the cable you need based on the two connectors.
Next Categories
Home Depot only shows 2 images by default, but the third is the "show more" button, which opens a panel with all the images. Great
inspiration.

JCPenney shows 4 images by default, with a carousel to view the rest. Carousels are slow to use. I'd recommend replacing it with a "show
more" image link which triggers a panel with all the images (see Home Depot for inspiration).

Macy's has a carousel which shows 4 images by default.

Nordstrom has a carousel with 5 images shown by default.

Amazon has 7 consecutive carousels with a number of products in each: best sellers, must haves, products Amazon loves, and more. This
is good inspiration for stores with lots of categories and products.

Walmart has a carousel with 3 images shown. I'd recommend the same - replace the carousel (on desktop) with a fixed list and a "more"
image with triggers a panel with all images.

Wayfair has lots of images for some of their products. The carousel isn't easy to use on desktop, but it's good for mobile.
Next Categories
#49 Next
Add zooming
capability to your
product image
gallery, directly on
the photos on
mobile

#49) Add zooming capability to your product image gallery, directly on the photos on mobile
On Adidas (on desktop), clicking on a product image opens a panel with a larger version of it, and the ability to zoom by clicking on it. On
mobile, the behavior is similar, except that in the popup panel, you can pinch and slide the image instead of clicking on it.

Crutchfield has a section with 4 featured customer favorites.

On ASOS, on desktop, you can use the mouse wheel or click on the image to zoom in and out. On mobile, you can pinch or slide the
image directly, or double-tap it to zoom in and out.

On B&H, on desktop, clicking an image opens an overlay panel then you can click on the image or use the + and - signs at the bottom to
zoom in and out. On mobile, you need to tap the image, which opens an overlay panel. Then you need to tap the image again to open it
"full-screen" so you can pinch and slide to zoom in and out. There's an X to close that and go back to the overlay panel.
On Build, on desktop, you can zoom by hovering over the image. Clicking on it opens the overlay panel which has the same behavior
(hover to zoom in and out). On mobile, you need to tap the image, which opens an overlay panel. You can then pinch or slide the image
directly, or double-tap on it to zoom in and out.
On Crutchfield, on desktop, you need to click the image to open an overlay panel in which you can click on the image to zoom in and out.
On mobile, tapping the image opens an overlay panel, in which you can pinch and slide the image or double-tap it to zoom in and out.

Nordstrom has a carousel with deals, and a carousel with best-sellers.

On JCPenney, on desktop, you can click the image directly to zoom in and out. On mobile, it opens an overlay panel in which you can
pinch, slide or double-tap the image to zoom in and out. Interestingly, they show an icon of a pinching gesture on top of the image for a
couple seconds, to indicate that pinching works on mobile.
On LL Bean, on desktop, you can (single) click the image to zoom in and out. On mobile, you can double-tap, pinch or slide the image,
but it does not work well (it scrolls the page.

On Macy's, on desktop, you can zoom in by hovering the mouse over the image. On mobile, you need to tap the image and it opens an
overlay panel in which you can double-tap, pinch and slide the image.

Nordstrom, on desktop, requires you to click the image to open the overlay panel where the image is fully zoomed in and you can scroll
down and up with the mouse wheel. On mobile, the behavior is strange. You have to tap on the image, and then tap again to zoom in and
out (a single tap, not a double). And pinching is not supported.
#31 Next
Choose font sizes

that are easily
readable (16px+),
on both desktop
and mobile

On Sears, on desktop, you need to click the image to open the overlay panel. But then it's not possible to zoom in or out. On mobile, you
need to tap the image, then you double-tap, pinch and slide.

On Walmart, on desktop, you can zoom by hovering over the image. When clicking it, it opens a panel with the larger image and there's +
and - zoom buttons to zoom in and out. On mobile, you can zoom in by pinching directly the image.

On Wayfair, on desktop, you can zoom by hovering over the image with your mouse. On mobile, you need to tap the image, which opens
an overlay panel. There is no zoom functionality in that panel, though.
Next Categories
#50 Next
Display the price

clearly above the
fold in the product
page (on both
desktop and
mobile)

B&H has an interesting section with a feed of what's happening now on the store. I like the elements that show a new review or a top
seller. It also includes new instagram posts.

#50) Display the price clearly above the fold in the product page (on both desktop and mobile)
Amazon shows the price in two places (on desktop). Indicating how much they save is a good practice (instead of only showing the
regular and discounted price).

ASOS' price is displayed high up, and it stands out. Good inspiration.

On B&H, the price is displayed in a box on the right, high up on the page, and it stands out.

On Build, I'd recommend moving the price above the sale box.

Crutchfield also has a section with testimonials on their homepage.

On Home Depot, the price is big and stands out. It's interesting how it is placed below the description. Something to test.

On JCPenney, the price section is confusing: there is a first discount (from $430 to $214.99), then a special offer which brings the price
down to $161.24. I'd recommend redesigning the layout so that it's clearer.

LL Bean shows a price range high up on the page and the font size is bigger than the rest of the text so it stands out. I'd recommend
removing the second currency mention (CAD 25.00 - 39.00), and mentioning they need to select a variant below to see the actual price.

Macy's price stands out because it's bolded and red. I'd recommend striking through the regular price.

#33
This can be an instagram feed on the homepage, and/or user
Next
photos and videos on specific product pages.
Add
user-generated
content (UGC)

REI's price is shown high up, but it stands out less than the title.

Sears is good inspiration. It clearly shows the regular price, how much they save, and the total. The price is big, bold, and red.

On Walmart, the price stands out more than the title, and is shown high up on the page.

Wayfair displays the price at the top of the page, aligned with the title.
Next Categories
Amazon clearly shows which country is currently selected (automatically detected). The headline even changes, and it gives me the
option to shop on my country's store (Amazon Canada - amazon.ca). Good inspiration.

#51) Add unboxing, explainer or promo videos to your product pages
Adidas - the video in this example is on position 2.

Amazon seems to put the video in last position in the thumbnails.

Apple has a keynote and film about their iPhone 11.

ASOS puts a video as the last product gallery thumbnail.

LL Bean shows which country it automatically detected and is set to ship to. Clicking it allows you to change it to another country (US,
Canada, Japan, or Global).

Home Depot, in this example product, has two videos.

REI puts a video as the last thumbnail.

Target

Wayfair puts the product video as the last thumbnail.
Next Categories
REI only has a "Stores" menu item (a store locator), which does auto-detect my location. It doesn't show my country in the header.

#52) Have two versions of product descriptions: Summary and Detailed
Adidas breaks down the product information in 3 tabs (description, specifications, and product story). This "chunking" makes it easier to
digest the information. It's not exactly what I mention in the best practice, but it still is a way to have the summary (description) and
detailed information (the other two tabs).
Amazon has a summary description, and a section lower on the page with all the detailed information about the product.

B&H does something similar to what Amazon does, by having a summary description, and a section lower with all the product
information.

Home Depot puts a few bullets of description at the top, and a section lower with the full description and some other links and
information.

Adidas' homepage is Amazon's Apple's homepage

well designed, and homepage has 13 has 7 sections and
composed of 8 sections, most of has a clean design
colorful and which are carousels. with lots of white
attractive sections, space. Good
including the header inspiration
and footer. Good
inspiration.

#53
Use bullets, expandable sections, and bolding.
Next
Make detailed
product
descriptions
readable

#53) Make detailed product descriptions readable
While horizontal tabs are a bad idea (27% of users overlook the hidden content in the inactive tabs), Adidas did a good job with the layout
of the content of those tabs. They added visual hierarchy with bolding and bigger text for headings, and used bullets and icons when
relevant.
Apple is great inspiration for the layout of their product pages. They use large headlines and images.

ASOS doesn't have tabs for the product information, but rather a few sections with slightly bigger headline text, which makes it pretty
easy to consume that information.

Nordstrom's REI's homepage has Sears has 13 sections and overall good
homepage has 7 9 sections and a inspiration. It's longer than most of the
sections and is a good inspiration of other websites, but with the use of
good example of the amount of large headers and changing design
how to have some content to have. throughout the page, it's fairly easy to
white space to not "digest".
overwhelm the
shopper.

JCPenney organized its product information pretty well, with some text, bullets, and a couple of boxes on the right.

LL Bean has some bolding and bullets for their product details. However, a design like Crutchfield is better (big headings for those
sections).

Macy's uses vertical tabs and bullets. Great inspiration.
Next Categories
#54 Next
Product
descriptions
should generally
have features and
benefits, and
overcome
objections

ASOS shows logos of payment options right above their footer.

#54) Product descriptions should generally have features and benefits, and overcome objections
One of the biggest objections to Apple's phones is the battery life. They made sure to address it in the description, along with mentioning
other benefits. Their copy is great inspiration.
Next Categories
#55 Next
Provide Shipping &

Return details in
Product pages (as
a tab, section, or
link)

Amazon example - shipping information in the right column.

B&H puts a couple of links to more information displayed in tooltips.

Crutchfield has a couple of trust badges in the footer.

Home Depot has some info about shipping, and a link to more delivery options.

JCPenney has a section with information on shipping and returns, with a link to more information.

LL Bean has a one liner about shipping, and a link to more details.

Macy's has a vertical tab section with some information about shipping & returns, and a few links to more details.

#38
Contact information can include your phone, email, and social
Next
media.
Add key contact

information to the
footer

On Sears, clicking the Shipping section opens another panel with more information.

Wayfair has a vertical tab section with information about shipping & returns, and a few links to more details.
Next Categories
#56 Next
On the product
page, display the
date buyers can
expect to get the
product on

#56) On the product page, display the date buyers can expect to get the product on
Adidas offers same-day delivery, so they don't need to put an actual date.

Build displays their phone number, email, and address.

Home Depot tells you when you'll get the product.

Sears tells you the date you'll get the product on.

Wayfair tells you when it ships. Is that the date it leaves the warehouse, or when you get the product? That language is confusing. I
recommend an approach like Amazon, Home Depot or Sears.
Next Categories
#57
Show included accessories in a product image, or have a
Next
section with "included in kit" images. Clarify it in the description
as well.
Make it clear what

is and isn’t
included in your
product kits

JCPenney has a section with a phone number, email, a button to open their customer service page, and a button to contact them directly
on Twitter.

#57) Make it clear what is and isn’t included in your product kits
ASOS has an image of the kit, and lists the components included in the product description. I'd recommend making the list of
components its own list (instead of a single bullet in the description)

In addition to an image of the kit components, B&H lists the items included in the kit. Great inspiration.

Build has an image of the kit components, and a bullet list of what the kit includes. Good inspiration.

Crutchfield is also great inspiration, with a separate bullet list for what's included in the kit.

In Wayfair's footer, clicking the "Call Us" button shows the phone number.
Next Categories
Walmart puts the list of all components as a single paragraph. NOT good inspiration. Something like Crutchfield, Build or B&H is much
better.
Next Categories
#58 Next
Use steppers for

quantity fields
instead of
textboxes

#58) Use steppers for quantity fields instead of textboxes
Here's how Amazon B&H has a similar approach

implemented it. While they than Amazon, except that
don't have steppers, at least the dropdown takes most of
the dropdown is the screen, and they don't
mobile-friendly. And if you have a delete option in the
choose 10+, it lets you put a dropdown.
value manually. The one
good thing about this
approach is that you can
easily add a "0 / delete this
item" choice if you prefer that
over having a "delete" link.

Build is good inspiration, LL Bean has steppers (+ and

with bit + and - buttons. You - buttons) but they're a bit
can also set a value too small.
manually.
Next Categories
B&H has a Live Chat menu item in the header.

#59) Aim to have 10+ customer reviews for each product

B&H

Build

Crutchfield

Home Depot has a Live Chat button on the side of the screen.

JCPenney

Macy’s

Nordstrom

REI

On Nordstrom, you need to open the contact page to open the Live Chat.

#60 Next
Sync product
information and
customer reviews
across product
variations
Categories
#61
In all these examples that follow except for Crutchfield,
Next
selecting another variant does not load another page - it loads
in the same page. So while this recommendation applies
technically only to the way Crutchfield implemented variations
Interlink product
(a page for each), the way the other sites interlinked variants
simplifies the shopping experience.
variations

#61) Interlink product variations
Adidas

Amazon

#41 Next
Have a compelling
title, description,
and CTA button for
your newsletter
opt-in

Home Depot

JCPenney

LL Bean

Macy’s

Crutchfield has a very generic title, but a value-oriented sub-title ($350 reward card).

REI

Sears

Wayfair
Next Categories
#62 Next
Uniquely title
product variations

Wayfair's newsletter title is too generic ("know about our daily sales").
Next Categories
#63 Next
On the product
page, add a FAQ
and/or user Q&A
to answer
shoppers’
questions

#63) On the product page, add a FAQ and/or user Q&A to answer shoppers’ questions
Amazon

B&H

Crutchfield

Apple has the simplest menu of all. 7 level one menu items, and that's it.

JCPenney

Macy’s
Next Categories
#64 Next
On product pages,
incentivize buyers
to leave a review

#64) On product pages, incentivize buyers to leave a review
Crutchfield does this right, by giving any who submits a review a chance to win a $350 rewards card.
Next Categories
Home Depot's is complex, it has a lot of items, but they organized it pretty well, in 3 levels (with bolding for leaf category). They also
limited the amount of items per category to not overwhelm the shopper.

#65) Test urgency elements
Build has a section on their homepage with a one week sale.

JCPenney displays their limited time offer at the top of their homepage.

Macy's has a limited time offer at the top of their homepage.

All of Sears' homepage is about their blowout event. Good inspiration.

REI's store has a lot of products and categories, but they made good use of bolding, white space and a limited amount of items per
sub-category. Good inspiration if you have a lot of products.

#66 Next
Add a Wish List

feature to your
store

#66) Add a Wish List feature to your store
Adidas allows you to favorite (add to wish list) products both in the list and in the product page.

Amazon allows you to create multiple (wish) lists and add products to them.

On ASOS, you can favorite products in the list and in the product page.

#43
1. Avoid or offer explanations for industry-specific or
Next
ambiguous filters
2. Have visual filters if the values are visually driven
Have relevant 3. Allow users to combine multiple filtering values of the
dynamic sorting
same type
and filters in the

product category
pages

Build only allows you to save products to a project (a sort of wish list) from the product page.

Crutchfield has a "Add to Wishlist" button on their product page.

On Home Depot, you can add items to your wish list (favorites) from the product list and product page.

JCPenney only has a heart icon (add to favorites) in the product list, and not in the product page.

ASOS shows a blue line over the filter when a value in it is selected. I'd recommend visually separating the Sort from the filters.

On REI, you can add products to the Wish List only from the product page.

Sears allows you to add a product to the wish list from the product page only.

On Walmart, you can add to wish list from the product page.

Wayfair allows you to favorite products from both the product list and product page. The "Save" button is a bit confusing - it's better to be
clear with a label such as "Add to Wish List".
Next Categories
Crutchfield's sorting is separate from the filters. The filters are all expanded by default, but the number of options for each filter is limited
(with a "Show more" link).

#68
This also goes for the “Continue to Checkout” button in the Cart:
Next
make it sticky on mobile.
On desktop, instead of a sticky button, have a large button (or
On mobile, have a
two - one at the top and one at the bottom of the Cart page)
with a contrasting color.
sticky Add to Cart

bar or button in
the Product page

#68) On mobile, have a sticky Add to Cart bar or button in the Product page
I found a few examples, but not in the main On Shoes.com, the sticky Add to Cart button Beardbrand has their sticky Add to Cart
stores I've been analyzing for these best is at the top of the screen. button at the bottom of the screen.
practices. Here's the first one: Sephora.
Next Categories
#69 Next
On desktop, have a
large contrasting
Add to Cart button
above the fold on
the Product page

#69) On desktop, have a large contrasting Add to Cart button above the fold on the Product page
Adidas' Add to Bag button is above the fold, and contrasting. Good inspiration.

LL Bean separates filters and sorting. The layout of their filters is however visually confusing. They indented the options, and I'd
recommend instead visually grouping each filter.

ASOS has a large green-colored contrasting Add to Bag button. Good inspiration, especially since that color contrasts against the other
colors above the fold.

B&H is also good inspiration, with a large Add to Cart button.

Crutchfield almost did it right, but the button is a bit cut off by the fold. I'd recommend moving the product page content up so that the
Add to Cart is fully visible without scrolling down.

On Home Depot, there are two Add to Cart buttons with exactly the same label, differentiated only by the label above them. I'd
recommend making that differentiation clearer. That said, the buttons are visible above the fold, which is good.

REI separates filters and sorting. Their filters are all expanded by default, but the number of options is limited to 7 and there's a "Show
more" link if there are more than that.

Nordstrom's Add to Bag is black, which fits with their brand. It is not very contrasting, but since there are no other buttons, it's ok.

Sears used a complementary color for their Add to Cart, so it stands out very well. The button could be a bit wider, but it's good
inspiration.

Walmart's Add to Cart stands out, but I'd recommend making it wider / bigger.

Wayfair's Add to Cart button is above the fold, wide, and fits their brand. Good inspiration.
Next Categories
Wayfair separates filters and sorting. The options are displayed in scrollable dropdown panels. NOT a good example to follow.
Next Categories
#70) On desktop, add USP bullets or images under the Add to Cart button
Adidas mentions their free shipping, free returns, and delivery time. So the line is blurry between USP and shipping information (see best
practice #55) - oftentimes, it's a mix of both. Shipping information IS part of your store's value proposition.

AliExpress is good inspiration. They added small icons, and positioned those USP points right below the Buy Now and Add to Cart
buttons.

Here's Disney's example. The bullets below the buttons are a couple of offers and free shipping.

Luxy's implementation is exactly what I meant by this best practice. Great inspiration. They placed it as a section below the button which
works for their product page design, but it could also be right below the Add to Bag button instead.

Amazon in their CDs category

has these product attributes:
- label (best seller)

- title
- year
- type
- composer
- "ships to Canada"
- prices & availability

Shoes has the standard "free shipping, free exchanges" USP right below their Add to Cart button.
Next Categories
#71
I found that “Email Me” buttons or waitlists are ineffective for
Next
out-of-stock products.
Allow instead users to purchase temporarily out-of-stock
Allow users to
products, warn them, and increase the delivery time. Also
prominently display product alternatives.
purchase For discontinued or deprecated products, do not allow them to

buy it, and focus solely on promoting product alternatives.
temporarily
out-of-stock
products
Categories
#72 Next
Have a “You Might

Also Like” section
at the bottom of
the Product Page

#72) Have a “You Might Also Like” section at the bottom of the Product Page
Adidas has a traditional

"You May Also Like" section,
but also:
- "Others Also Bought"

- "Recently Viewed Items"

Build shows these attributes in

their Kitchen Sink category:
- add to compare
- title
- price
- availability

ASOS has the traditional

and also a section with
complementary items ("Buy
the Look")

B&H has a section with

products customers also
viewed.

Crutchfield lists products

that are frequently
compared with this one.

Home Depot shows other

products frequently bought
together with this product,
and other sections:
- More like this

- Get everything you need
- Sponsored products
- Customers Also
Compared These (product)
with (other category)
- Customers who viewed
this item bought
- Related products

JCPenney shows these

attributes:
- favorite icon
- variants
- price range, regular price
range
- description
- add to cart

REI has these sections to

recommend related
products:
- People also viewed

- People who bought this
item also bought

Sears has these sections:

this also liked
- Customers also bought

Walmart has these

sections:
- More from the collection

- Customers also
considered
these products

Wayfair has these sections:
- Frequently bought
together
- Compare similar items
- Customers also viewed
Next Categories
Nordstrom has these attributes:
- title
- price range

#73) Offer upsells when adding a product to cart
In this example of product, Amazon recommends accessories that go with the product the shopper just added to their cart. Good
inspiration.

B&H recommends accessories, with a link to all accessories (same as Amazon). Good inspiration.

Crutchfield offers a warranty, and relevant accessories. Well done.

Home Depot suggests other related products.

Walmart displays these

attributes:
- variants
- brand
- title
- price
- delivery / pickup time and
cost

Macy's shows a list of other products shoppers also viewed. Those are similar products, and not upsells or cross-sells. NOT good
inspiration.

REI shows other products that customers have bought (not just viewed), and they seem to be relevant. Good inspiration.

Sears presents a list of other products that shoppers have viewed (but not necessarily bought). NOT good inspiration, they're not very
relevant to the item they just added to their cart.

Walmart shows other products that shoppers have bought. That's a more relevant list than products other shoppers viewed.

Adidas adds a label for new products. It's not urgency, but it does drive users to action by getting their attention on these products.

#74
27% of users overlook the hidden content in the inactive tabs
Next
Avoid horizontal
tabs in Product
pages

#74) Avoid horizontal tabs in Product pages
Macy's has 3 vertical "tabs" (expandable accordion sections). The first one (Product Details) is expanded by default.

Wayfair has implemented this very well, with various expandable tabs and the first one expanded by default. It's better inspiration than
Macy's as the tabs clearly organize the information.
Next Categories
#75 Next
Group spec sheet

elements into
sections for easier
scanning
Categories
Just like Amazon, Crutchfield labels their top sellers, which makes the product selection process easier.

#77
Add horizontal and vertical shading, icons, and lines
Next
Style your spec

sheets to make
scanning easier
Categories
#78
Avoid having multiple specs per row
Next
Opt for a
single-column
format for your
spec sheets
Categories
#79
Users rely on it even more than the content of individual reviews
Next
to provide the overall picture of how other users experience a
product. Without a ratings distribution summary at the top of the
review section, shoppers are likely to let the first few reviews
Add a ratings
determine how positively or negatively they perceive the
product, and wonder if some of the reviews are fake.
distribution
summary with a
filter on the star
ratings

#79) Add a ratings distribution summary with a filter on the star ratings
Adidas shows the average,

number of reviews, a
breakdown of star ratings
(which you can filter on),
and the % of user
recommendations by
product attribute.
Great inspiration.

Wayfair has labels for products on sale, and blogger's picks. Good inspiration. They should also label best sellers and products running
out of inventory.
Next Categories
B&H has a simple ratings

distribution, with these
components:
- average rating (but no

numerical value)
- number of ratings
- breakdown of star ratings
(which you can filter on)
Adidas & Amazon have

implemented this better.

Build has a simple ratings

distribution summary:
- breakdown of star rating

- average rating (with a
numerical value)

Crutchfield's ratings
distribution summary is also
simple:
- average rating (without a

numerical value)
- # reviews
- breakdown by star rating
The way they implemented

the filter is interesting - you
can select multiple star
ratings that you want to be
shown below.
I'd recommend they add a

numerical value for the
average rating, and possibly
a breakdown by feature.

Home Depot's ratings

distribution summary is
good inspiration, except
that it doesn't allow to filter
on individual star ratings.
Here's what they've done

well:
- big numerical value for the

average rating
- # ratings
- breakdown by attribute
- % of customers who
recommend the product
(which is interesting to have
as it gives a yes/no despite
the score they gave the
product).

Crutchfield shows their best seller as the first product in the list.
Next Categories
Macy's ratings summary

has these components:

numerical value)
- # ratings
(but you cannot filter)
(without numerical values,
which forces you to
estimate it)
recommend it

Nordstrom's ratings
comprised of:

numerical value)
- # ratings
- attribute rating (fit, width...),
which is qualitative

REI's ratings distribution

summary has these
components:

(and you can filter per single
value)
- average rating
- attributes
I'd recommend making the

overall rating stand out, and
I'd move it to the left (see
Home Depot for inspiration).

Sears has these

components in their ratings
summary:
- average rating (with

numerical value)
- % customers who
(with the # of reviews for
each, and it allows you to
filter)

Crutchfield implement a Load More button, but I'd recommend also showing a small progress bar like on ASOS.

On Wayfair, the ratings

summary is made of:

numerical value)
- # of ratings
Next Categories
#80
Not just in the site-wide banner or header.
Next
Mention your Free

Shipping also near
the Buy section on
the Product page

#80) Mention your Free Shipping also near the Buy section on the Product page
Adidas has a link to their "Free Shipping & Free Returns" and their same day delivery, right below the "Add to Bag" button. Good
inspiration.

B&H has a link to their free shipping offer directly below the product price.

Adidas is good inspiration. In the example below, the product has 12 images. However, their design makes it hard to scroll down to the
additional thumbnails not visible by default.

Crutchfield mentions their free shipping above their Add to Cart button and added a small tooltip for more information.

Home Depot has a link to their Free Delivery directly below their Add to Cart button.

LL Bean mentions their free shipping below the product price, with a link to more details.

REI has a link to their free shipping information right below the product price.

B&H has 11 images and a video for this product. I also like their "Show more" link which shows additional images. Another option is to open
an overlay panel with the full list of images when clicking "show more".

Wayfair mentions their free shipping below the price.
Next Categories
#81
This is actually one of Google's best practices for mobile retail.
Next
Logically though, it depends on the type of products you sell in
your store. If generally your visitors only buy a single product,
you should send them to the cart right away. If they're likely to
When clicking
buy more than one product, let them continue shopping (don't
disrupt their experience by sending them to the cart), while
“Add to Cart”,
giving them the option of checking out or viewing the cart.
open a modal
panel instead of
redirecting to the
Cart page

#81) When clicking “Add to Cart”, open a modal panel instead of redirecting to the Cart page
Adidas shows a popup in

the middle of the screen,
with two CTA buttons:
- View Bag
- Checkout

Amazon loads a side panel

with the item added to cart
and two CTA buttons:
- Cart
- Proceed to checkout (#
items)

Home Depot only shows 2 images by default, but the third is the "show more" button, which opens a panel with all the images. Great
inspiration.

B&H opens a popup in the

middle of the screen, with a
single main CTA button:
- View Cart

Crutchfield opens a big

popup in the middle of the
screen, with two main CTA
buttons:
- Go to cart
- Keep shopping

Home Depot opens a

screen, with the Checkout
CTA button which stands
out the most. There are also
two other main CTA
buttons:
- View Cart (# items)

- Check out with PayPal

JCPenney opted for a side

panel with two main CTA
buttons:
- Continue Shopping
- Checkout

Nordstrom has a carousel with 5 images shown by default.

Macy's displays a popup

which takes most of the
buttons:
- View Bag & Checkout

- Continue Shopping

Nordstrom shows a small

popup in the center of the
screen, with a dominant
CTA button: Checkout.
There is also a smaller
"View Shopping Bag (#
items)" CTA link below it.

REI shows a popup with two

main CTAs:
- Cart & Checkout

- Continue shopping

Sears displays a popup

towards the top of the
buttons:
- Back to Shopping
- Next Step
"Next Step" is not a good

label, because it is not clear
to shoppers what the next
step actually is. It should be
more descriptive, such as
"Checkout".

Wayfair has lots of images for some of their products. The carousel isn't easy to use on desktop, but it's good for mobile.
Next Categories
#82
About 21% of US online shoppers abandon orders because they
Next
aren’t able to see the total order cost upfront before checking
out.
If your shipping is
And about 64% of users look for shipping costs on the product
page, before deciding whether to add a product to the cart.
not free, show the Adding an estimated shipping cost is particularly important for
lower-priced products because shipping costs are a high
estimated percentage of the product price.
shipping cost in However, shipping costs for large or heavy products are
typically very important if additional surcharges and handling
Product pages fees are added.

#82) If your shipping is not free, show the estimated shipping cost in Product pages
Amazon displays the shipping cost directly on the product page, next to the price, and in the right side "purchase column".

On ASOS, clicking the link "Delivery and return info" opens a popup with all the shipping options.

On LL Bean, since there is a free shipping minimum, it means that there is a shipping cost on orders below that limit. They put a "Details"
link that opens their Shipping Information page, which mentions their flat shipping rate on small orders.
Next Categories
On Amazon, on desktop, you can zoom in by hovering your mouse over the image. On mobile, you need to first tap the image, which
opens an overlay panel, and you can pinch, slide or double-tap to zoom in and out.

#83) On the Product page, either display all image thumbnails (no truncation), or reveal all thumbnails
Amazon does it half right - for most products, all thumbnails are shown, which is good. If too many thumbnails (and strangely 8 is too many in
the example below so they only show 7 +1), they have a truncation link (a +1 button), which in itself causes usability issues and makes a certain
% of visitors miss those extra images. The best practice is to open that "details panel" when ANY of the thumbnails is clicked.
B&H shows a limited amount of thumbnails (6 + a "More" thumbnail). They also have a thumbnail for customer images, which is interesting.
The "More" thumbnail opens a popup (overlay panel) with all the thumbnails, in which there are two tabs: Product Images and Customer
Images.
Home Depot lists 5 thumbnails, with a "More" thumbnail. Clicking any thumbnail opens the popup with the detailed gallery (popup with all
images). Good inspiration.

Target shows 4 thumbnails, then a "More" thumbnail. Only the "More" thumbnail and videos trigger the detailed gallery (popup with all
images)
Next Categories
On Build, on desktop, you can zoom by hovering over the image. Clicking on it opens the overlay panel which has the same behavior
(hover to zoom in and out). On mobile, you need to tap the image, which opens an overlay panel. You can then pinch or slide the image
directly, or double-tap on it to zoom in and out.
#84) Include at least one “in scale” image per product to help shoppers get a sense of the product’s size
In this example from ASOS, the bag is shown on a person.

On Build, this faucet is shown in its natural environment, a bathroom sink.

On Macy's, the bedding is shown in a bedroom.

On Nordstrom, this blender is shown on the kitchen counter.

On JCPenney, on desktop, you can click the image directly to zoom in and out. On mobile, it opens an overlay panel in which you can
pinch, slide or double-tap the image to zoom in and out. Interestingly, they show an icon of a pinching gesture on top of the image for a
couple seconds, to indicate that pinching works on mobile.
Sears has a picture of this exercise bike in a gym.

Target shows this table in the context of a living room.

Walmart has a photo of these two chairs in a somewhat realistic environment

On Wayfair, this dining set has a picture in a real outdoor setting.
Next Categories
Nordstrom, on desktop, requires you to click the image to open the overlay panel where the image is fully zoomed in and you can scroll
down and up with the mouse wheel. On mobile, the behavior is strange. You have to tap on the image, and then tap again to zoom in and
out (a single tap, not a double). And pinching is not supported.
#86
Menu flickering is when users move their mouse towards a
Next
sub-category, and instead accidentally activate another parent
category, causing the drop-down menu to change.
Avoid menu
flickering by
implementing a
300ms hover delay
and/or mouse path
analysis
Categories
#87
Compatible products can be for example accessories and
Next
attachments.
Offer relevant
compatible
products on the
Product page

#87) Offer relevant compatible products on the Product page
Adidas has a "Complete the Look" section with complementary products in the photo. Well done.

Amazon lists other products usually bought along with this product, and shows the total based on what you select to add. Good
inspiration.

On Walmart, on desktop, you can zoom by hovering over the image. When clicking it, it opens a panel with the larger image and there's +
and - zoom buttons to zoom in and out. On mobile, you can zoom in by pinching directly the image.

ASOS does something similar to Adidas, with a "Buy the Look" section that contains other products in the photo.

B&H lists relevant accessories. There is however no way to add all or several of them quickly to the cart (like on Amazon).

Crutchfield has a section with categories of accessories. NOT good inspiration, because the user has to browse through a LOT of
products. You should simplify their choice by minimizing the number of options (like on Amazon, Adidas, and ASOS).

Home Depot implemented this in a similar way to Amazon. Good inspiration.

Adidas shows up the price high up on the product page, right below the product title, but it's quite small.

Walmart implemented this in a similar way to Amazon. Good inspiration, though they should allow you to select which of those
complementary products you want to add to cart.

Wayfair shows compatible products, but doesn't make it easy to add them to cart.
Next Categories
#88 Next
Add links to your

Return Policy and
Shipping Info in
the footer

#88) Add links to your Return Policy and Shipping Info in the footer
Adidas
- Delivery
- Returns
I like how they added a

headline for each section of
their footer. It makes it a lot
easier to find what you're
looking for. Each category
has only a few links.

On B&H, the price is displayed in a box on the right, high up on the page, and it stands out.

ASOS
- Delivery & Returns
I'd recommend separating

those into two pages.

B&H
- SHIPPING
- RETURNS
I like how they added a

short value proposition
statement below each.

Build
- Returns
- Shipping Policy

Crutchfield
- 60-day returns
- Free Shipping

On Home Depot, the price is big and stands out. It's interesting how it is placed below the description. Something to test.

JCPenney
- Returns
- Shipping Information

LL Bean
- SHIPPING INFORMATION
- RETURNS
And when shopping from

Canada, they renamed it to
"Canadian Returns".

Macy’s
- Shipping & Delivery

- Returns

Nordstrom
- Shipping
- Returns & Exchanges

Macy's price stands out because it's bolded and red. I'd recommend striking through the regular price.

Sears
- Returns & Exchanges

- Shipping & Delivery
Next Categories
#89
Auto-update the cart as soon as it’s changed.
Next
Allow users to set

a quantity of zero
(0) as a way to
delete products in
their cart

#89) Allow users to set a quantity of zero (0) as a way to delete products in their cart
Amazon has a "0 (Delete)" value in their quantity dropdown.

On B&H, on desktop, the quantity is a text field, and you can put the value "0" to delete that item. On mobile, it is not possible as the
quantity dropdown does not contain the "0" option.

Sears is good inspiration. It clearly shows the regular price, how much they save, and the total. The price is big, bold, and red.

Crutchfield has a dropdown value of "0" for both desktop and mobile. Good inspiration, except that the "0" value label should be
something like "0 / Delete" or "0 (Delete)" instead of just "0".

Home Depot has a text field for the quantity, on both desktop and mobile, and you can enter "0" to delete the item.

On REI, clicking the minus button (-) on either desktop or mobile removes the item.

Sears, as illustrated in the image along with the post text, has a "0/remove" quantity dropdown value which deletes the item (on either
desktop or mobile).
Next Categories
#51 Next
Add unboxing,
explainer or promo
videos to your
product pages

#91
Add a label or replace the "Add to Cart" button with "View Cart”.
Next
You can also update those added items to allow shoppers to
change the quantity, and/or include links to additional products
or matching accessories.
Highlight items
that are in the
shopper’s cart

#91) Highlight items that are in the shopper’s cart
Amazon adds a checkmark to products when added to cart, and changes the button to "View Cart" instead of "Add to Cart". Good
inspiration.

#91) Highlight items that are in the shopper’s cart
Very few stores seem to do this, but it's a good practice. Here's how B&H implemented it. While it's good that they do add the View Cart
button for items already in your cart, it's not 100% clear. I'd recommend adding a green checkmark with a label like "Added to cart", in
addition to the View Cart button.
Next Categories
#92
12% of users search using a color keyword. The thumbnails of
Next
products in search results should show the variation that
matches the color they want.
Dynamically
update the
thumbnails of
products to match
the variation
searched for

Apple has a keynote and film about their iPhone 11.

#92) Dynamically update the thumbnails of products to match the variation searched for
Amazon implemented this well. Note that the other variations are listed only in the product page and not in the product list, contrary to
Adidas.

B&H implemented this, and interestingly includes the name of the color in each variant. The variants are listed in the product page only.

Crutchfield implemented this, and the variants are listed in the product page only.

JCPenney implemented this, and shows variants in the product list, as well as the product page. Some of the products seem
mis-categorized though, as a search for red shirts listed some shirt of other colors.

Home Depot, in this example product, has two videos.

Nordstrom implemented this, and shows variants in the product list and product page.

Walmart implemented this, and shows variants in the product list and product page.
Next Categories
#93 Next
Auto-apply the
color filter that
matches the color
searched for

#93) Auto-apply the color filter that matches the color searched for
JCPenney shows the color filter from the search query above the search results.

Wayfair puts the product video as the last thumbnail.
Next Categories
#94
- Have the featured filtering values in the filter sidebar and at the
Next
top of the product list.
- Don’t use banner-like graphics for featured filters
Feature important - Adjust the visual style of the featured filters to match their
product filters at
relative importance by using text links, buttons or visual
thumbnails.
the top of the

product list

#94) Feature important product filters at the top of the product list
Adidas highlights the most important filters by bolding them.

Home Depot features their top filters, and puts all the other filters in a section "More Ways to Filter"

Walmart has a few filters at the top of the list, and the rest of the filters are in the left column.
Next Categories
Amazon has a summary description, and a section lower on the page with all the detailed information about the product.

#95) Visually distinguish between visited and unvisited products
The only example I found is from eBay. I viewed the first two results, so note the different link color for those compared to the next two
results. Alternatively, you could add a label or icon for products that were viewed (instead or in addition to changing the product title
color).
Next Categories
#96
- Truncate filters after about 10 values (truncate if minimum 5
Next
values)
- Use the site-wide link styling for the truncation link
Truncate filter - Position the truncation link close to the filter values
values - Add a visual indicator next to the truncation link (an arrow or a
+)
- Fade the last filter value

#96) Truncate filter values
Amazon does this half right, with only a "See More" link at the end of the filter values.

Home Depot only has a "+ See More" link to view the other filter values.

Nordstrom has a short description at the top, and a few sections lower with additional information.
Next Categories
Sears opted for a "see more" link to view other filter values.

Walmart only has a "See More ..." link to view other filter values.
Next Categories
#97
Consider these four elements as “new pages”, so that clicking
Next
the Back button will behave as expected:
- Overlays & lightboxes (Back button closes it)
Avoid breaking - Filtering and sorting (Back button goes back to the previous
Back button
filtering or sorting values)
- Multi-step checkouts (Back button goes back to the previous

expectations step)
- AJAX pagination (Back button goes back to the previous page)
Categories
#98
- Avoid all types of ads above or within the product list
Next
- Avoid text ads below the product list
- Avoid overlay dialogs on page load
- Avoid highly graphical ads in prime content locations on the
Avoid ads (or what

homepage (especially when it comes to competitions and
discounts)
looks like ads) on Graphics that adopt the characteristics of the site (background,
the product list

text colors, fonts, etc) and avoid visual boxing are less likely to
be perceived as ads.
Adding ads in the sidebars is fine, as long as they’re not mixed

with filters or sub-categories.
Categories
Apple is great inspiration for the layout of their product pages. They use large headlines and images.

#100
Add ‘+’ buttons on inspirational product images which open an
Next
overlay dialog with more details on the product selected.
If the image only showcases one product, a text link underneath
Link to all
it is sufficient.
depicted products
An app such as this one (if you're on Shopify) might do the trick:
https://apps.shopify.com/image-hotspots-by-widgetic
in inspirational
images

#100) Link to all depicted products in inspirational images
REI does this very well:
Next Categories
#101
You can also add a "Back to Results" link on desktop if they
Next
come from a search.
Display
hierarchical
breadcrumbs on
desktop. On
mobile, have a link
to the parent
category only.

#101) Display hierarchical breadcrumbs on desktop. On mobile, have a link to the parent category only.
Adidas has a Back button (with back arrow) and the breadcrumbs without the current product. Good inspiration.

JCPenney organized its product information pretty well, with some text, bullets, and a couple of boxes on the right.

ASOS shows breadcrumbs including "Home" and the current product. NOT good inspiration. The logo already links back to the
homepage, and the product title is already shown in the product page, so those two elements are unnecessary in the breadcrumbs.

B&H shows breadcrumbs including the "Home" link, which is unnecessary. Also, if you come from a search, there is no "Back to Results"
link, it shows instead the regular breadcrumbs. NOT good inspiration.

Build displays breadcrumbs including the Home icon and the current product. And if you come from a search, there is no "Back to
Results" link, but rather only the same breadcrumbs. NOT good inspiration.

Crutchfield displays breadcrumbs including the Home icon and the current product. And if you come from a search, there is no "Back to
Results" link. NOT good inspiration.

#54 Next
Product
descriptions
should generally
have features and
benefits, and
overcome
objections

LL Bean has breadcrumbs including the "Home" link and the current product. NOT good inspiration.

Macy's has breadcrumbs including a "Macy's" link (which brings you back to the homepage). And if you come from a search, there is no
"Back to Results" link. NOT good inspiration.

Nordstrom has no breadcrumbs and only has a "Back" link with a left arrow. NOT good inspiration.

REI has standard breadcrumbs, without a "Home" link and the current product. Good inspiration. However, if you come from a search,
there is no "Back to Results" link.

#55 Next
Provide Shipping &

Return details in
Product pages (as
a tab, section, or
link)

Walmart has breadcrumbs with a "Home" link. If you come from a search, there is no "Back to Results" link. NOT good inspiration.

Wayfair shows standard breadcrumbs, in addition to a "Back to Results" link and left arrow, and the current product SKU. Good inspiration,
except for the SKU, which I'd recommend moving under the product title.
Next Categories
#102
Some of your shoppers need inspiration and guidance to help
Next
them make up their mind about which sub-category they’re
interested in.
Have intermediary
Provide thumbnail previews, longer titles, and descriptions for
those sub-categories. These components will also clarify
category pages for

categories with ambiguous industry jargon.
Feature the sub-categories prominently, at the top of the

the first 1-2 levels intermediary category pages..
of categories Intermediary category pages can also contain content such as:
- guides
which introduce - image galleries

- featured products
sub-categories - links to wizards, finders, configurators

- popular brands
- cross-navigation (links to other relevant categories)
Also add a traditional category sidebar with text links to

sub-categories.
#102) Have intermediary category pages for the first 1-2 levels of categories which introduce sub-categories
Adidas' level 1 category ASOS features a

page features the sub-category in the hero
sub-categories in a very section, then a few
visual and attractive way. categories with large
Good inspiration. images. At the bottom, they
list more categories in a
slider. Clean design, good
inspiration.

Build mentions when the order will leave the warehouse, and has a link with details about returns and shipping.

Crutchfield first lists sub-categories, with Home Depot's level 1 category pages are
thumbnails. It is followed by some text, long, with a lot of sections. It gives the
which is chunked down in sections (which shopper lots to look at and explore:
is better than on Build). The next section is
relevant articles and videos. Overall fairly
- Shop All
good inspiration, but I'd recommend
- Shop Customer Favorites
increasing the size of the thumbnails and
- Featured Categories
perhaps featuring one or some of them.
- Featured Events
- Exclusively at The Home Depot
- Inspiration You Can Shop
- More Top Picks
- Inspiration & Guides
- Newsletter
- Value proposition "bullets"
- Top Sellers
I like how they mixed it up, and the page

is not monotonous. Good inspiration.

JCPenney uses different layouts based on LL Bean is good inspiration in terms of

the category page. In this example, they how it "breathes". There is plenty of white
mix offers, sub-categories and featured space, especially between sections.
collections, followed by trending products. However, the layout of this page is quite
Good inspiration, but the layout is a bit too monotonous and I'd recommend
compact I'd recommend making it featuring some of their most popular
"breathe" more (adding some white space sub-categories.
and not having everything so crammed
together).

Macy's features various Nordstrom is good REI has a beautiful and

collections and inspiration, and has a good relevant hero image, followed
sub-categories by laying out hero section, lots of white by a text list of
tiles of various sizes with large space, and various layouts sub-categories, and featured
images, and interesting throughout the page to avoid sub-categories with
slogans (instead of the boring the shopper. thumbnails. They also list
sub-category names). Good some articles (expert advice).
inspiration, although I'd I'd recommend using
recommend adding more thumbnails for all
white space, especially sub-categories, but still
between sections, and having featuring some with larger
bigger section titles. thumbnails.

Sears has a good Walmart has a good Wayfair's level 1 category

hero section with a hero section, followed pages are overwhelming
cute image and some by a slider with their to look at because there
offers, a list of main sub-categories, are many sections that all
sub-categories, then sub-sub-categories, look the same, with lots
various sections and sponsored products. of options for each. NOT
layouts: They also feature one good inspiration. The one
of their products with good thing is they have
a video. Good good thumbnails for each
- Discounts
inspiration, although option.
- Best
I'd recommend not
Stu
using a slider for the
ff
featured categories at
- Value proposition "bullets" (perks)
the top, but rather
- Brands We Love
showing them all and
- What's New
perhaps making the
most popular ones
bigger.
Next Categories
LL Bean has a one liner about shipping, and a link to more details.

#103) Answer all negative reviews
Adidas has a canned response to negative reviews. While the layout is good (gray background, Adidas logo, indentation), a more genuine
response would be a lot better.

On Build, the supplier is the one answering the negative reviews. Responses have a gray background which make them stand out, and
they're personal and not canned. Good inspiration. I would only recommend adding a small logo of the supplier at the top left of the
response box.
Crutchfield is good inspiration. The response box stands out with a redish color, and they included a small logo. I would only recommend
responding to more of their negative comments, if not all.

LL Bean responds to some of their negative comments. The layout is NOT good inspiration however.

On Sears, clicking the Shipping section opens another panel with more information.

#104
Option 1: Give an auto-complete option to search in the current
Next
category
Option 2: Auto-update the search field to the current category
Allow users to
(Search Scope)
search within their

Option 3: Search in the current category by default, but add a
dropdown in the results page to change the scope of the
search
current category Option 4: Add a “Search Within” dropdown next to the search
box
Implementing this is especially important for mobile users.

#104) Allow users to search within their current category
Amazon has a dropdown to choose the category to search into. Good inspiration.

ASOS only has filters, one of which is "Gender", which matches their two main categories.

Build lists categories in the search results page if your search term is general enough (such as "light"). If your search is narrower (for
example "60w light"), then there is a "Product Category" filter on the left to narrow down your results.

Adidas offers same-day delivery, so they don't need to put an actual date.

Home Depot shows categories matching the search term, along with a Department filter on the left.

JCPenney suggests categories matching the search term.

LL Bean has a "Narrow By" filter in the search results page.

Macy's has a Gender filter in the search results page, which matches some of their main categories.

Sears tells you the date you'll get the product on.

REI suggests search terms that match some of their categories. Good inspiration.

Sears lists categories in the search results page for the search term you looked for. They also have a Category filter in the left column.

Walmart is the best inspiration I've found. First, just like Amazon, they have a dropdown to choose a category to search into.

Walmart (cont) - when typing a search term, it suggests search terms that include categories.

Amazon only puts an image of the kit components, but doesn't have a list of the included components.

Wayfair suggests search terms with various categories.
Next Categories
#105 Next
Offer a Store
Pickup option
directly in the
shipping option
selector

#105) Offer a Store Pickup option directly in the shipping option selector
On B&H, you can choose to pickup your items by checking the store pickup checkbox and filling out your information.

On JCPenney, the choice of shipping or pickup is in the cart, and it opens a side panel to check store availability closest to you.

Build has an image of the kit components, and a bullet list of what the kit includes. Good inspiration.

On Walmart, the choice between Delivery and Pickup is in the checkout.
Next Categories
#106 Next
Make your
shopping cart
persistent

#106) Make your shopping cart persistent
Amazon is a good example of this. On a semi-daily basis I go on various ecom stores to look for examples for these best practices, and
Amazon is one of the stores that always keeps my cart items. Many of the other stores don't and I need to re-add items, which, if I was
shopping for real, would be frustrating.
Next Categories
#107 Next
Add security,
guarantee, and
trust badges to
the Cart page

Walmart puts the list of all components as a single paragraph. NOT good inspiration. Something like Crutchfield, Build or B&H is much
better.
Next Categories
#107) Add security, guarantee, and trust badges to the Cart page
ASOS also shows the payment methods they accept.

Crutchfield is good inspiration. They display trust & security badges, in addition to the accepted payment methods.

LL Bean has a "VeriSign Secured" badge in the cart page.

REI has a "Norton Secured" badge in the cart page.

Build is good inspiration, LL Bean has steppers (+ and

with bit + and - buttons. You - buttons) but they're a bit
can also set a value too small.
manually.
Next Categories
#108 Next
Offer upsells on
the cart page or
panel

#108) Offer upsells on the cart page or panel
Adidas

Amazon

Apple

Build

Home Depot

Build

LL Bean

LL Bean

Macy’s

REI
Next Categories
JCPenney

#109) Limit the exit points (remove the site navigation) during the checkout process
Adidas doesn't have a link back to the cart, but you can click the Back button to navigate back.

ASOS has an Edit button to go back to the Cart, but no header and footer navigation.

B&H doesn't have header or footer navigation, but does have an "Edit Cart" button to go back to the cart.

Crutchfield only kept a phone number in their header, and has a breadcrumbs with a cart icon to navigate back to the cart.

Home Depot doesn't have a header and footer navigation (except for a phone number at the bottom), but they have an "Edit Cart" link on
the top right to go back.

JCPenney also removed their header and footer, and only kept a cart icon on the top right to navigate back to the Cart.

LL Bean only kept a customer service phone number in the header, without any link to navigate back to the Cart, but you can hit the Back
button.

Macy's also removed their header and footer navigation in their checkout, but they have a Shopping Bag link and icon to go back to the
Cart.

Idem with Nordstrom - no navigation back, except for a Cart icon.

REI's back link is to their Sign In / Register page because that is the previous step. There is no other header and footer navigation.

#61
In all these examples that follow except for Crutchfield,
Next
selecting another variant does not load another page - it loads
in the same page. So while this recommendation applies
technically only to the way Crutchfield implemented variations
Interlink product
(a page for each), the way the other sites interlinked variants
simplifies the shopping experience.
variations

Walmart only has a Cart icon in the header, and a link in the footer to leave feedback.

Wayfair has a "Back to Cart" link back, and no other navigation in the header. They have a link to leave feedback and a link to call them, in
the footer.
Next Categories
#110
According to Business Insider, 28% of US online shoppers
Next
abandon their cart because they don't want to register/create
account just to make a purchase.
Offer a guest
ASOS’s approach removed the account creation step on the
checkout login page and it reduced their abandonment rate by
checkout
50%
Offer the guest checkout as a prominent option. This means

that it could be selected by default, and visually attract more
attention than the “Sign in” option.
The same email address should work with multiple guest

checkouts, to allow the same person to make more than one
guest purchase with their email address.
Offer account creation after checkout, in the Thank You page.

#110) Offer a guest checkout
Apple has an explicit Guest Checkout section with a "Continue as Guest" CTA button. Good inspiration.

Crutchfield

Crutchfield's checkout is as a guest by default, but they give you the option to login with a "Account login" CTA button in the top right.

Home Depot gives you the choice to "Checkout as a Guest" or "Sign In " if you're a returning customer. Good inspiration.

JCPenney offers shoppers to sign in, continue as a guest, or create an account. Good inspiration.

LL Bean gives two choices: Sign In, or New Customers / Guest. This layout is NOT a good example.

LL Bean

Nordstrom has a guest checkout by default. In order to login, shoppers need to do so before reaching the checkout. NOT good
inspiration.

REI gives the choice to sign in, check out as a guest, or go through the PayPal Checkout. I'd recommend they also add a CTA button to
create an account.

Sears offers 3 options: Sign In, Join, or Guest Checkout. Good inspiration.

Walmart has the option to Sign In or "Continue" without an account. There is no option to create an account. I'd recommend adding that
option, and renaming the Continue CTA button to "Continue as Guest".
Next Categories
REI

#112
Typical payment methods include credit card, PayPal Google
(cont)
Pay, and Apple Pay.
In regards to PayPal, roughly half the stores offer an express
Offer multiple
PayPal checkout with a CTA button at the same place as the
normal "Checkout" button (in the cart). And the other half offer
payment methods
PayPal as a payment method at the same level as the credit
card option in the checkout page.
According to Neil Patel in this recent podcast episode:
"For certain audiences, instead of having a normal

checkout flow, using a PayPal checkout flow, even though
it's not as convenient for the user, we're seeing in certain
instances that conversions are going up, especially within
certain regions, especially inside the United States, and the
reason being is people are worried about security."
My recommendation is abstract of the payment gateway you

choose. Users don't care which gateway you use, they care that
their preferred payment method is supported.
Categories
#112
Stripe is obviously a good gateway choice as it supports a lot of
Next
options:
- cards (VISA, Mastercard, Maestro, AMEX)
Offer multiple
- wallets (Alipay, Apple Pay, Google Pay, Microsoft Pay,
Masterpass, Visa Checkout, WeChat Pay)
payment methods The main issue I see with Stripe however is that it doesn't
integrate with PayPal, which is an option a lot of shoppers want.
So I recommend testing having a PayPal checkout vs (or in

addition to) having a normal checkout flow with cards. So
obviously if you're already with Stripe, PayPal isn't an option (
you can manually add it with some code), but you could at least
then test one of the other wallets, such as Apple Pay or Google
Pay or Masterpass or Visa Checkout.

#112) Offer multiple payment methods
Next Categories
#113
Show a checkmark after each correct input
Next
Implement inline
validation in
forms, and
preserve the form
field data entered
on validation
errors

#62 Next
Uniquely title
product variations

#113) Implement inline validation in forms, and preserve the form field data entered on validation errors
Apple has inline validation, but they do not validate the validity of the contents of some of them. Also, I'd recommend moving the error
messages a bit closer to the fields, or adding space between fields so that it is clear which field the error message is about.

B&H has inline validation but only shows an error message on the right of the fields with a validation error. Also highlighting the field in
red like Adidas or Apple would be a good idea.

Build is good inspiration. They highlight the fields in red. However, I'd recommend not highlighting the field labels in red because it looks
a bit overwhelming when there are several errors.

Crutchfield is good inspiration. They highlight both the field labels and fields, but it looks fine with their layout. Also, they validate the
actual input, for example by not allowing the name to only contain one letter. However, they do not validate the zip code properly.

Amazon

JCPenney is good inspiration, with a red background in the field, an exclamation point icon, and explicit error messages.

LL Bean highlights the field box in red, adds an X, and has enough space between fields. They however do not have inline validation for
the password.

Macy's has a good layout for their inline validation, but they do not properly validate all form fields' contents. For example, "1 1" should not
be a valid full name.

Nordstrom seems to have exactly the same checkout form as Macy's, and thus, the same pros and cons.

Home Depot

Sears does good inline validation, but I'd recommend adding more space between fields, or grouping the error with the field like REI
does. Currently, when there are errors, the whole form is crammed.

Walmart is NOT a good example, in terms of layout. When a field has a validation error, the field label is replaced with the error message.

Wayfair's inline validation is mediocre. The error message is too close to the next field, and some fields don't have an explanation of what
the error is (they're just red).
Next Categories
#114
Add asterisks to required fields, and “(Optional)” next to optional
Next
fields
Surprisingly only a few of the stores I looked at implement this -
Clearly mark form

and it is very easy to do.
fields as optional
or required

#64 Next
On product pages,
incentivize buyers
to leave a review

#114) Clearly mark form fields as optional or required
I included Amazon in this list as a counter-example. There are no "required" asterisks, and no mention that fields with an asterisk are
required. NOT good inspiration.

Crutchfield puts asterisks at the end of required field labels. Good inspiration (if you have separate field labels and not in-field
placeholders like Shopify).

REI also adds asterisks at the end of their field labels. Good inspiration for separate field labels.

Walmart has small asterisks at the end of their separate field labels. They also added an explanation: "Required field *". Good inspiration if
you have separate field labels, though I'd recommend increasing the size of the field label texts and asterisks.
Next Categories
Build has a section on their homepage with a one week sale.

#115) Ask for the minimal amount of information in the checkout
Adidas has 9 forms in its

checkout form. Note also
that the country is
auto-detected and you
don't need to fill it out.
They could reduce that

number by two by merging
"First Name" and "Last
Name" into a "Full Name"
field, and removing the
"Address 2" field by default
and adding a link to add that
field.

Amazon has 13 fields, but by

forcing shoppers to log in or
create an account, the
address and the credit card
are both saved in the
account, so purchases are
easy to make and shoppers
don't have to fill any fields.
However, I'd recommend

removing the "Address line
2" by default, and adding a
link to add that field. And
they could move the ZIP
code above the City and
State fields so that they get
auto-filled when entering a
ZIP code.

Apple has 13 fields

including the address and
payment information. I'd
recommend merging the
first and last name fields,
and removing the
apartment field by default,
and adding a link to add it. It
would bring it down to 11
fields. The address could
also be a single
auto-complete field, which
would bring the number
down to 7.

ASOS has a 8 fields. I'd

first and last name fields.
Their "Address Finder" field
is great inspiration. Also, the
"Name on card" field could
possibly be removed.

All of Sears' homepage is about their blowout event. Good inspiration.

Crutchfield has 8 checkout

fields by default. Notice the
"Full Name" field and the link
to "Add address line 2". Good
inspiration.

Home Depot has 12

checkout fields. I'd
recommend merging First
Name and Last Name, and
removing "Address Line 2"
by default and adding a link
to show it (see Crutchfield
for inspiration).

JCPenney has 11 checkout

fields. The First Name and
Last Name fields could be
merged, and the "Apt, Suite,
Floor" field removed and
replaced with a link, like the
"Company Name" link.

LL Bean has 15 checkout

forms. One big problem with
their checkout form is they
ask for the Billing address
by default instead of having
a checkmark to make it the
same as the Shipping
address. It adds an extra 12
fields. I would also
recommend the usual -
merge First Name and Last
Name into a Full Name field,
remove "Address Line 2" and
"Address Line 3" by default,
and have an Address Finder
field.

Adidas allows you to favorite (add to wish list) products both in the list and in the product page.

Nordstrom has an identical

checkout to Macy's. Please
see Macy's comment.

REI has 12 checkout fields.

Notice the "Add a line" link
below the address field.
Good inspiration.
However, I'd recommend

the usual - merge the First
and Last Name fields, and
replace the address fields
with an Address Finder.
Optionally, with an Address
Finder, you can also add a
link below to enter a manual
address.

Sears has 6 fields. There is

no need for address fields
because the only option is
store pickup. I would
First and Last Name fields,
removing the "Stress
Address Line 2" fields by
default, and replacing the
address with an address
finder.

Walmart has 15 checkout

fields. The First and Last
Name could be merged,
and the "Apt" field removed
by default. They also ask for
First Name and Last Name
on the card= - these two
fields could be possibly
removed.

B&H allows you to add products to multiple wish lists, from both the product list and the product page.

#116
In other words, check the “Same as shipping address”
Next
checkmark by default). If they uncheck it, then it displays fields
to set a different shipping address.
Make the billing

address the same
as the shipping
address by default

#116) Make the billing address the same as the shipping address by default
Adidas has that checkbox,

but it's too crammed
together. I'd recommend
adding more space.

Apple has a section for the

Billing Address with that
"Use my shipping address"
checkbox, and it is checked
by default. Good inspiration.

ASOS has a different

approach. Instead of a
checkbox, they show the
billing address (which is the
same as the shipping
address by default), and
there's a button to change it
if desired. The downside of
this is that it forces the user
to look at the billing address
and deduct that it is the
same as the delivery
address. The upside of a
checkbox instead doesn't
require you to read the
address and make a
decision from that, you can
simply uncheck it if you
want the billing address to
be different.

On Home Depot, you can add items to your wish list (favorites) from the product list and product page.

Crutchfield reversed the

addresses, asking first the
billing address. And the
checkbox says "Ship to my
Billing Address", which is
good inspiration. It's simple,
users don't have to worry
about the second address if
it is the same.

Home Depot first asks for

the shipping (delivery)
address, then they have a
"Use as Billing Address"
checkbox. They don't show
that billing address if it is the
same, which simplifies the
experience for the user.
Good inspiration. I'd only
recommend adding some
more space above and
below the checkbox.

LL Bean labeled the

checkbox "This is my billing
address". It should be
checked by default.

REI has users enter their

billing information first, then
the shipping information is
the same by default, with a
link to change it. This forces
users to think, whereas a
checkbox is simpler. I'd
recommend a checkbox
instead of this, or at least in
addition to it.

On REI, you can add products to the Wish List only from the product page.

Wayfair has a checkbox "Set

as default shipping address"
and doesn't repeat the
address if it is checked.
Good inspiration. It just
needs a bit more white
space above and below.
Next Categories
#117 Next
On mobile, show
the appropriate
keyboard based on
the type of the
field the user is
typing into
Categories
#118 Next
Expand the credit

card fields only
once that payment
option is selected

#118) Expand the credit card fields only once that payment option is selected
Adidas displays a choice of credit/debit card or PayPal with radio buttons. The credit card section is expanded by default. And that is fine
if most of their shoppers use that option.

Wayfair allows you to favorite products from both the product list and product page. The "Save" button is a bit confusing - it's better to be
clear with a label such as "Add to Wish List".
Next Categories
ASOS implemented this very well. They make you choose the payment type you desire first. This simplifies the checkout process and it
unclutters the page.

B&H has tabs for the two payment options. The Credit/Debit/Payboo option is selected by default.

Build lists the payment options on the left with tabs. The first option is selected by default.

Crutchfield has vertical tabs (accordion) with radio buttons for the various payment options. While the first option (credit card) is selected
and the form fields are showing by default, this layout makes it obvious what the options are. Not bad.

#68) On mobile, have a sticky Add to Cart bar or button in the Product page
I found a few examples, but not in the main On Shoes.com, the sticky Add to Cart button Beardbrand has their sticky Add to Cart
stores I've been analyzing for these best is at the top of the screen. button at the bottom of the screen.
practices. Here's the first one: Sephora.
Next Categories
Macy's also has radio buttons for the payment options. Not optimal. Nordstrom has the same checkout, so this same layout.

REI has horizontal tabs for the payment options. As detailed in best practice #74, horizontal tabs should generally be avoided (27% of
users overlook the hidden tabs, according to Baymard). Not good inspiration.

Sears has horizontal tabs, and a button to add a credit card. Not good inspiration.

Wayfair has radio buttons for the payment options. Not optimal, but the options are fairly well distinguishable.
Next Categories
Amazon has contrasting orange buttons to add to cart and buy now. Since there are no other elements above the fold competing for
attention, this is good inspiration.

#119) Allow and auto-format spaces in the credit card number field
Adidas is a good example of what NOT to do. As you can see, by not chunking the credit card numbers in groups of 4, it is hard to read it
and validate that you typed it properly.

#119) Allow and auto-format spaces in the credit card number field
Amazon automatically adds spaces in the credit card number field. Good inspiration. However, it is not possible for the user to add
spaces.
Next Categories
#120 Next
Deduce and
display the credit
card type
automatically as
the user starts to
enter their card
number

#120) Deduce and display the credit card type automatically as the user starts to enter their card number
Before typing anything in the credit card field, Apple shows small icons of all the credit cards supported. As you start typing the credit
card number, the credit card type is automatically detected. Good inspiration.
Next Categories
Crutchfield almost did it right, but the button is a bit cut off by the fold. I'd recommend moving the product page content up so that the
Add to Cart is fully visible without scrolling down.

#121) In the checkout form, use field labels instead of placeholder text
Adidas is a perfect example of what NOT to do. As soon as you start typing, the field label disappears. That means that you need to
delete the input in a field to figure out what that field is.

Apple's checkout form field labels behave like on Shopify. As you start typing, the palceholder label moves up a bit within the field and
gets smaller. Good inspiration.

ASOS' layout is standard, with form field labels above the fields. Also good inspiration. I personally find that this design is a bit cleaner
than having the labels within the fields.
Next Categories
#122
To be clear, the field size should be static, not adjusted
Next
dynamically. It should simply set to match the expected input.
For example, a zip code field should be shorter than a name
Match the length

field.
of form fields to
the length of the
input

Nordstrom's Add to Bag is black, which fits with their brand. It is not very contrasting, but since there are no other buttons, it's ok.

#122) Match the length of form fields to the length of the input
Crutchfield made their Zip and Phone fields smaller than the other fields. It helps improve the experience and making the checkout form
a little bit easier to fill.

#122) Match the length of form fields to the length of the input
In comparison, here is the Shopify checkout form. The related fields are grouped (first/last name, country/province/postal, but the size
of the fields is the way it is only so that the form is "justified" (same width). Adjusting the width of fields based on their expected input (in
the other examples) is a slightly better experience.
Next Categories
#123
This is known as an Address Finder. See the Uber app as a good
Next
example of how to do this.
Look into the Google autocomplete API. You can turn this on in
In the checkout
Shopify in the checkout setting.
form,
autocomplete the
address as they
start typing

#123) In the checkout form, autocomplete the address as they start typing
ASOS has a good Address Finder, with a Clear button. Good inspiration, it is well integrated in the form, and there is no Google logo.

Wayfair's Add to Cart button is above the fold, wide, and fits their brand. Good inspiration.
Next Categories
Build uses the Google API to find the address. I'd recommend removing the "powered by Google" logo if possible.

Crutchfield uses the same Google API as Build to find the address.

Macy's and Nordstrom both have a well-integrated address finder. Well done. I would only recommend adding a "Clear" button like on
ASOS.

REI uses the same Google API. I'd recommend removing the Google logo if possible, it is distracting.

AliExpress is good inspiration. They added small icons, and positioned those USP points right below the Buy Now and Add to Cart
buttons.

Wayfair has a well-integrated address finder, with an X instead of a "Clear" button. A "Clear" button is more obvious, but an X is cleaner.
Both are good. Good inspiration.
Next Categories
#124
In the checkout form, if you sell to multiple countries, this will
Next
ensure that the state/province values are for the correct
country.
Place the country

field before the
state/province
field

#124) Place the country field before the state/province field
Shopify
Next Categories
#125
The reason why you should avoid dropdowns with more than
Next
about 10 options is that they are annoying to use. For
dropdowns with fewer than about 5 options, it can be replaced
with radio buttons, toggle switches or checkboxes (if only 2
Avoid dropdowns
options), etc.
in forms for fields

with fewer than 5
or more than 10
items

Office Depot put an offer there, which in a way is part of their value proposition. Not the best inspiration, but still relevant.

#125) Avoid dropdowns in forms for fields with fewer than 5 or more than 10 items
Amazon's Country dropdown has about 250 options. That is quite overwhelming.

#125) Avoid dropdowns in forms for fields with fewer than 5 or more than 10 items
Since most form dropdowns appear in the address (for the State/Province and Country fields), an elegant solution is to use an Address
Finder (see best practice #123). This is ASOS' checkout form.
Next Categories
#126
The reason for this is that it contains too many options and
Next
makes a dropdown unusable.
This recommendation is if you don't have an address finder (see
Have an
best practice #123).
autocomplete text
field for the
State/Province
(instead of a
dropdown)
Categories
#127
This tip is valid only if you don't have an Address Finder field
Next
and keep the traditional address fields (street, city,
state/province, country, zip). It will simplify the checkout form a
little. Please see best practice #123 for a better solution (an
Automatically
Address Finder field).
pre-fill City and

From the data I found, about 11-12% of people quit because the
checkout is too complex / long, so this helps a bit.
State fields when According to Baymard's data however, a whopping 26% of users
abandon purchases during the checkout flow solely because
the user enters a the checkout flow was too long or too complex. Now they don't
say exactly what too complex means.
zip/postal code The average store had 14.88 checkout fields in 2016, 12.8 fields
in 2018, and they recommend only having 6-8 fields for a guest
checkout (including the credit card fields). So, fewer fields is
better. And my assumption is that having to fill fewer fields is
almost as good as having fewer fields altogether.
See best practice #123 for a more elegant solution.

Categories
#72 Next
Have a “You Might

Also Like” section
at the bottom of
the Product Page

#128) Format the expiration date field the same as on the physical credit card
Adidas has the Expiry Date fields in the correct format (MM / YY) but they are not keyboard-friendly. NOT good inspiration.

Amazon's Expiration Date fields are not keyboard-friendly, but they're in the correct format. NOT good inspiration.

Apple has an interesting approach for this field. It's a text field, but they automatically add the slash (/) as you start typing the year (on the
third character entered).

ASOS is good inspiration, with two keyboard-friendly dropdown fields. The only possible improvement would be to have custom combo
text & dropdown fields in which you can type directly.
Next Categories
ASOS has the traditional

and also a section with
complementary items ("Buy
the Look")

#129) Avoid multi-column form layouts
Adidas' checkout form has one field per row, except for the First/Last Name fields, and the Province/Postal Code fields. Like I mentioned
above, a Full Name field is recommended instead of First Name and Last Name. And all of the address fields could be replaced with a
single Address Finder field.
Amazon is a good illustration of this best practice. They have one field per row. It keeps the form very linear and simple.

Apple's checkout form has only the Zip Code and City/State fields on the same row. I'd recommend having an Address Finder field
instead.

ASOS is great inspiration - one field per row. Clean and simple.

Home Depot shows other

products frequently bought
together with this product,
and other sections:
- More like this

- Get everything you need
- Customers Also
Compared These (product)
with (other category)
this item bought
- Related products

#130
Test a One-Page Checkout especially if your average order
Next
value is low and you’re selling impulse purchases. If you can,
split test against a multi-step checkout, because it is not clear
which option will yield higher results for your specific industry
Test both a
and store, as evidenced below:
one-page and a
- One-page checkouts and digital wallets (Amazon Pay,
Apple Pay, PayPal One Touch) have improved mobile
multi-page
conversion by up to 10% at launch. For Power Support,
they say a 26% increase in orders within two weeks after
installing Amazon Pay. (source)
checkout - For GetElastic, single-page checkout outperformed its
old multi-page checkout by 21.8%. (source)
- But multi-step checkouts can help you identify
bottlenecks, and be less clutered and overwhelming to
look at as it minimizes the amount of information
displayed and required at any point.
- And this article shows that both one-step checkout and
multi-step checkouts convert about the same, with
perhaps a very slightly higher conversion rate with
multi-step checkouts. See the graph attached below.
#130) Test both a one-page and a multi-page checkout
I looked at 46 of the top ecom stores, and found that 20% have a single-step Above is a breakdown per number of steps
checkout, and about 80% have multi-step checkouts.
That said, I do consider the choice of login / account creation / guest checkout as a
step. So a lot of the stores that I marked as having 2 steps are in fact that
login/account/guest page + a page for entering all the information. And typically,
there is a "Continue" button at the end of each of those sections to move on to the
next section.
And so, to be clear, I consider a step to be a separate page (and not sections within
the same page).
The full list

of stores I
looked at.
Here's a good example of the login / account creation / guest checkout choice page
I mentioned (pulled from the Apple website):

Example Example
Single-Step Multi-Step
Checkout Checkout
(ASOS) (Adidas)
Next Categories
Sears has these sections:

this also liked

#131) Offer optional account creation in the order confirmation page
I drafted this mockup to illustrate what that

can look like. The section in red is what you
could add to your Order Confirmation page to
have them create an account. The second
password field is optional, you could ask for
their password simply once.
Next Categories
#132
Input masks reduce the number of validation errors, which can
Next
reduce site abandonments.
According to Baymard, 64% of sites don’t use input masks (or
Use input masks

don’t use them correctly) to help shoppers enter their data in
restricted inputs. And in the testing they did, 89% didn’t follow
for restricted
formatting examples for restricted fields.
You should also consider regional differences in format. For

fields, such as the example, the date format in the US is MM/DD/YY, in Europe it’s
DD/MM/YY, and in Canada and Japan it’s YYYY/MM/DD.
phone number or For more information on the formatting of the credit card
credit card number specifically, please refer to best practice #119.
number

#132) Use input masks for restricted fields, such as the phone number or credit card number
Apple does this very well with their phone number field. As you type the first number, they add a parenthesis automatically. As you type
the 4th number, they close the parenthesis and add a dash. And the field doesn't allow letters.

#132) Use input masks for restricted fields, such as the phone number or credit card number
Shopify handles the phone number in a similar way. However, they don't validate that the phone is in a valid format (you can enter any
letter or special character). You might be able to add input masks with Shopify Plus by customizing the checkout form.
Next Categories
#73 Next
Offer upsells when

adding a product
to cart

#133) Increase the perceived security of your checkout page
On B&H, they added a padlock icon in the "Begin Checkout" button in their cart.

Build added a padlock on the "Secure Checkout" button in the cart page.

Crutchfield added a padlock on their "Go to secure checkout" button in the cart page.

JCPenney added padlock on their "Checkout" button in the cart page., and a trust badge right below the credit card number. I also like
how they added a small credit card icon in the field. I've seen several stores do that.

Crutchfield offers a warranty, and relevant accessories. Well done.

Sears added a padlock on the "Proceed to Checkout" button in their cart page.

Wayfair added a padlock on the "Proceed to Checkout" button of the cart page.
Next Categories
#134
According to Baymard, about 20% of users prefer returning a
Next
product directly to the store or a physical location. “In-store” can
be in your brand store, at the post office and/or at the UPS
location, and it should obviously be free. Present that option
Offer the
visually equally to the mail option.
possibility to
return products
in-store, in
addition to a
return-by-mail
option

#134) Offer the possibility to return products in-store, in addition to a return-by-mail option
Like a lot of stores, ASOS only offers returns via mail. I wanted to include this to show what stores typically do.

Macy's shows a list of other products shoppers also viewed. Those are similar products, and not upsells or cross-sells. NOT good
inspiration.

JCPenney offers both return options, but the layout and design of their Returns page is quite mediocre.

Nordstrom also offers both options, but the page layout could be improve to be closer to what Home Depot did.

Sears' Returns page layout is a bit better than JCPenney and Nordstrom by having medium-sized section headers for the two options,
and contrasting hyperlinks for the calls-to-action.

Walmart uses an accordion to present their 3 return options. Good inspiration.
Next Categories
Walmart shows other products that shoppers have bought. That's a more relevant list than products other shoppers viewed.

#135
That said, there are pitfalls to using social login.
Next
It relies on third parties, such as Facebook. And if that third party

loses credibility due to security issues for example, then your
Test social login

shoppers might trust your store less. It also has been said to
"cheapen" the experience.
Potentially poor adoption - MailChimp did an experiment with

social login, and found that only 3.4% of users actually made
use of it.
So this is definitely something to test, if you can.
In this recent episode of the Marketing School podcast (minute

6), Neil Patel says this about social login:
"We used to go so many more conversions when we'd just have people
sign up with a Google authentication or Facebook authentication. But
we've been testing in 2019 the removal of that stuff and people fill out
all the forms manually. Even though it's more work for them, we're
seeing our signups and checkouts drastically increase due to the fact
that they feel more secure and you have less of their data."

#135) Test social login
If you want to base your decision

on what other stores are doing, I
looked at 50 of the top
ecommerce stores (see the table
attached). 42 of those 50 stores
only use username/email and
password login.
Next Categories
#136
If the address validation fails, suggest the corrected address if
Next
possible (and highlight the suggested change). Otherwise, give
them the option to use or edit either the provided address or
the suggested one.
Validate the Note that if you’re using an Address Finder field instead of the
address and warn

standard address fields, you should not need an address
validator. However, the address finder isn’t necessarily perfect.
the shopper if it
I’ve seen examples where you could type an address with a
street number (only a street name), which is invalid. So
depending on the quality of the address finder, you may still
cannot be verified want to have an address validator to catch invalid addresses
that the Address Finder allows.
According to Addressy, 65% of smartphone users prefer

type-ahead address verification (a synonym for an Address
Finder) above all other forms.

#136) Validate the address and warn the shopper if it cannot be verified
When Amazon cannot verify your address, they suggest a corrected address. They highlight the suggested change. The interesting thing
is that there is an Edit button for both the Original Address and the Suggested Address. Good inspiration.

Macy's has 3 vertical "tabs" (expandable accordion sections). The first one (Product Details) is expanded by default.

Crutchfield validates that the combination of City, State and Zip match together, but doesn't seem to validate the actual address.

Gap validates the address and allows you to use the address you typed, or edit it. They don't specify what the problem is exactly, nor
suggest a fix.

JCPenney validates the address, and detects in this example that a street number is missing or invalid. The error message appears at the
top of the form instead of in a popup or close to the address fields. Good inspiration for the quality of the address verification

Sears verifies the address, shows you the address you typed if it isn't valid, and allows you to edit it or proceed with what you typed.

#76 Next
Add a summary
section with key
specs to your spec
sheets
Categories
#137
Place that statement or bullets in the Sign Up (account creation)
Next
page, and in the Order Confirmation page next to the form to
create their account.
Explain why your

shoppers should
create an account

#137) Explain why your shoppers should create an account
In Adidas’ Account page, they list 6 reasons to create an account. Good inspiration.

Build has a single sentence with some benefits of joining. Bullets like on Adidas better communicate those benefits.

Crutchfield lists 5 bullets with benefits directly in the small popup that appears when clicking “Your account”. Good inspiration.

#79
Users rely on it even more than the content of individual reviews
Next
to provide the overall picture of how other users experience a
product. Without a ratings distribution summary at the top of the
review section, shoppers are likely to let the first few reviews
Add a ratings
determine how positively or negatively they perceive the
product, and wonder if some of the reviews are fake.
distribution
summary with a
filter on the star
ratings

Nordstrom has 3 benefits with small thumbnails. The thumbnails better communicate the benefits than only text. Good design and
inspiration

Sears mentions some benefits directly in the Sign in popup.

Sears also repeats and details those benefits in the Account Creation form. Good inspiration.
Next Categories
#138
Formisimo observed over a two-month period that their
Next
password repeat field was responsible for over a quarter of all
the people that abandoned their sign up process. Along with a
few other changes, they were able to improve their Sign Up
Avoid email and

page conversions by 55%, and decrease by 24% the number of
corrections made in the Confirm Password field.
password If a form has an email or password confirmation field, the natural
confirmation fields
reaction of most people is to copy-paste their email or
password into that confirmation field. And thus, if they made a
mistake in the first field, they will paste that mistake into the
in the Account confirmation field.
Creation form By removing the Password Confirmation field, you should then
allow users to see the password they’re typing so that they can
verify it before submitting the form. This can be done with a
“SHOW” text or icon button inside the Password field.

B&H has a simple ratings

distribution, with these
components:
- average rating (but no

numerical value)
- number of ratings
- breakdown of star ratings
Adidas & Amazon have

implemented this better.

#138) Avoid email and password confirmation fields in the Account Creation form
B&H doesn't have a Password Confirmation field, and there is a checkbox underneath the password to "Show Password". Their design isn't
ideal, the SHOW button should be inside the field, but it still works. Note that the "..." buttons in the right side of fields are because I have a
password manager installed, LastPass, so please ignore.
Build is good inspiration. No Password confirmation field, and there is a "Show" button inside the field.

Home Depot is also good inspiration, with a "Show" button inside the field, and no Password confirmation.

JCPenney has a "Show" button inside the field, and no Password Confirmation. Good inspiration.

Home Depot's ratings

good inspiration, except
that it doesn't allow to filter
on individual star ratings.
Here's what they've done

well:

average rating
- # ratings
(which is interesting to have
as it gives a yes/no despite
the score they gave the
product).

Sears has a similar design to B&H, with a checkbox under the Password field to show it. However, their account creation form does have
an email confirmation field. It is strange that they'd ask to confirm the email but not the password. NOT good inspiration.

Walmart has a good account creation form, with a "Show" button. Well done.
Next Categories
#139
For example, if the user inputs “johndoe@gfail.com”, the
Next
suggestion shown below would be “Did you mean
johndoe@gmail.com?”.
Provide input
suggestions for
the email field in
the Account
Creation form

#139) Provide input suggestions for the email field in the Account Creation form
Build does this well - the suggestion appears right below the email field.
Next Categories
Nordstrom's ratings
comprised of:

numerical value)
- # ratings
- attribute rating (fit, width...),
which is qualitative

#140) Use low password requirements
Amazon simply requires a minimum of 6 characters for the password. They specify the requirement both inside of the field and below it.
Good inspiration. However, they do have a Password Confirmation field, which is a bad practice (see best practice #138).

Build requires a minimum of 6 characters and has no other requirements for the password field.

Walmart allows passwords between 7 and 100 characters, which is good.
Next Categories
#141
Avoid or minimize images as a general rule. Use them only if
Next
you want to draw attention to that component.
Use text links and possibly icons.
Use a visually
consistent style
for the Account
Dashboard cards

Walmart is good
inspiration, for the
components they do have
in the ratings distribution
summary:

average rating
- # ratings
(with the # ratings for each,
and you can filter on by
single value).
I'd recommend adding a

rating of the % of customers
who recommend the
product.

#141) Use a visually consistent style for the Account Dashboard cards
Amazon is great inspiration for the Account Dashboard. The first couple of rows of cards have icons and it draws more attention to those
cards which are the most important. It is followed by two more rows of cards with only links.

ASOS has a clean design for their Account Dashboard, but the Account Overview page serves no purpose other than looking good. It
does not give an actual overview of the account.

B&H has lots of images in their dashboard, and that is quite distracting.

Build opted for a standard left-side menu for their Account Dashboard, instead of cards like on Amazon. This layout is fine, though
Amazon's is preferable.

Adidas has a link to their "Free Shipping & Free Returns" and their same day delivery, right below the "Add to Bag" button. Good
inspiration.

On JCPenney, opening the Account Dashboard shows a welcome screen, which forces an unnecessary click to choose another option in
the left-side menu.

On LL Bean, from the menu, the Account Dashboard page isn't accessible, only the sub-pages are. This main dashboard page is only
accessible by clicking "My Account" in the breadcrumbs.

On Nordstrom, when clicking "Your Account" in the header menu, it opens the list of Purchases by default.

REI uses cards for their Account Dashboard, with a very purified layout (only links, no icons nor images). It's easy to find what you're
looking for. But if you compare with Amazon, then you can see that highlighting certain cards at the top by adding an icon is a good idea
(See the Amazon example).
Crutchfield mentions their free shipping above their Add to Cart button and added a small tooltip for more information.

On Walmart, clicking "Account" opens the dashboard, on the Purchase History page by default. It doesn't give an overview.
Next Categories
#142 Next
Notify shoppers of
items in cart no
longer available,
and make it easy
to remove them

#142) Notify shoppers of items in cart no longer available, and make it easy to remove them
Amazon automatically moves the items that are no longer available to a "Saved for later" section at the bottom of the cart. That way, the
shopper doesn't actually have to delete them from the cart in order to proceed to the purchase. That is the ideal solution. Also, they notify
the user at the top of the cart page.
ASOS adds a red "Size out of stock" label when the variant is no longer available. However, you need to manually remove them from the
cart.

REI has a link to their free shipping information right below the product price.

Nordstrom, similarly to Amazon, automatically moves the unavailable products to a "Sold out" section at the bottom of the cart. However,
if you try to proceed to checkout, a message prompts you to first remove those items from the cart, with a CTA button to go back to the
cart. That can generate frustrations in shoppers. I'd recommend instead either notifying users at the top of the cart, or in that "error page"
which products are sold out, with a CTA button to proceed anyway without those products.
REI clearly warns users of products no longer in stock, and that those products will be removed from the cart. What they do not specify is
WHEN those items will be removed. It turns out that they're removed when proceeding to checkout, which does make sense. I'd
recommend instead moving those products to a separate section like Amazon or in case they get back in stock in the future, or to allow
shoppers to find similar products.
Walmart add a red "Out of stock" label to items no longer available, and moves them to a "Saved for later" section at the bottom of the
cart, like on Amazon. If you try to proceed to checkout, they show a popup with the unavailable products and a warning, and options to
return to cart or proceed to checkout anyway. The out-of-stock products are simply ignored if you checkout.
Next Categories
#143
The welcome email is your first touch point via email with your
Next
prospects or customers, so it will set the tone for your
communication with them. Make sure it contains some or all of
the components below:
Send a relevant - Your logo
account
- Links to the main product categories
- Links or buttons to access the account, track order, find a
registration
store, etc.
- A warm welcoming message (and optionally a nice hero
section with a beautiful image)
(welcome) email -
-
A few value proposition “bullets” with icons
(Optionally) a promotion
- Customer support or contact information
- Social media icons and buttons to download your app (if
any)

#81
This is actually one of Google's best practices for mobile retail.
Next
Logically though, it depends on the type of products you sell in
your store. If generally your visitors only buy a single product,
you should send them to the cart right away. If they're likely to
When clicking
buy more than one product, let them continue shopping (don't
disrupt their experience by sending them to the cart), while
“Add to Cart”,
giving them the option of checking out or viewing the cart.
open a modal
panel instead of
redirecting to the
Cart page

#143) Send a relevant account registration (welcome) email
Ebay lists some of Home Depot has

their main a button to
categories at the download their
top of the email. app at the top
The main CTA right corner of the
button leads to email. The main
their website. They CTA button opens
then include your Account
various value Dashboard. They
proposition bullets then include 5
to reinforce their value proposition
brand. Finally, they bullets, followed
include their social by 3 promotions,
media icons. contact
information, and
social media
icons.

The header of the JCPenney Nordstrom’s email looks like a

welcome email looks like a website, with a menu
website header, with small containing their main
links at the top right to open categories, a hero image, a
your account, track your warm welcoming headline, and
order, return a product, and an attractive layout for the rest
their phone number. Then of the email. Below the
they show some of their welcoming text are CTA
main product categories. buttons to shop and find a
The next section includes a store. The next section
promotion and the main CTA includes value proposition
button opens the store bullets, and finally social media
homepage. There is a icons and a button to
section with buttons to download their app
download their app. The rest
of the email is a big blurb of
text which most people will
not read.

REI includes a small Sears’ email verification

link at the top left, in email has an attractive hero
addition to a large section, with a large and
and contrasting CTA contrasting CTA button to
button to access verify your email. The next
your account. They section includes 5 value
also list a few value proposition bullets,
proposition bullets (5 followed by a footer with
in text bullets, and 3 links to various pages,
highlighted below). social media icons, and a
button to download their
app.

Sears’ welcome The Victoria’s Secret Walmart’s welcome

email also shows an welcome email email contains small
attractive hero includes an attractive links to get help and
section, with a CTA hero section with one access your account.
button to become a of their models and a Then, there is a hero
member. Then, there short welcome. They image, a welcome
are two value then feature four main message, a CTA
proposition bullets, a categories with button to get started,
section to download thumbnails, and and 3 value
their app, a section several more proposition bullets
that features their categories with text with thumbnails. In
Home Services, and links. There are then the footer, there are
the same footer with three featured links links to download
links, social media with icons, and finally their app and to their
icons, and a button to their social media social media
download their app. icons and buttons to accounts.
download their app.
Next Categories
ASOS displays a small

panel attached to the cart
icon, with the same two
CTA buttons:
- View Bag
- Checkout

#144
SMS remarketing is a viable alternative to email. About 98% of
Next
SMS messages are opened, and 90% are read within 3 minutes,
a clickthrough rate of about 36% (according to SalesCycle), and
28.7% conversion (about a third of clicks on SMS links result in
Send cart
recovered sales).
abandonment
emails and/or SMS

#144) Send cart abandonment emails and/or SMS
Amazon's abandoned cart email Baron Fig's email

contains: contains:
- the list of products you left in - 2 CTA buttons/links,
your cart to either view your
- a link and a CTA button to view cart or visit the store
your cart - The list of products
- sponsored products left in the cart
- value proposition "bullet" about
their free delivery
The email subject line
- some navigational links at the
is "Complete your
top and bottom
Purchase"
The subject line is the name of

one of the products in the
abandoned cart.
The sponsored products (ads)

attract more attention than the list
of products left in the cart. I'd
recommend bringing the focus to
the list of products the shopper
was interested in instead.

Bliss' abandoned cart email contains: Crutchfield's email contains:

- A menu with a few links including two main - A header similar to their website's header but with
product categories simplified links
- The list of abandoned products - A Hero section that attracts the eye, with a large
- Suggestions of other products you might love headline (well done)
- A banner about their free shipping - CTA button to view cart
- A footer with social media icons, links, and - The list of abandoned products
contact info - A CTA section to reach out to one of their experts
- Their footer with social media icons and contact
info
They send you more than one email, too. Subject
lines are:
- The One That Got Away? 🤔 Good inspiration.
- No Worries, We’ve Got Your Bag
- 15% Off = Instant Happiness
They send 3 emails with the same title: "We think you
may have left something behind"
Good inspiration.
I would recommend to test adding a section with
related products they might also love, and having
different subject lines for each email.

Mulberry’s cart abandonment email contains: Nordstrom's abandonment emails contain:

- The list of abandoned products - Header with a few main product categories
- CTA button to view the cart - The list of abandoned products
- Other products you might like - A CTA section to make a Wish List
- Contact info - Other recommended products
- Value proposition bullets
- Footer with social media icons and other links
Subject lines:
- "Your Shopping Bag items are hot - don't miss out!"
The subject lines of the two emails they send are: - "Check out before your favorites sell out!"
- “Products that caught your eye…”
- “Have you forgotten something?”
Good inspiration.
Good inspiration, though I’d recommend adding links

to a few main product categories in the header.

Home Depot opens a

screen, with the Checkout
CTA button which stands
out the most. There are also
two other main CTA
buttons:
- View Cart (# items)

- Check out with PayPal

#145
Research by Yotpo of 200K stores and 163M orders discovered
(cont)
the impact of various elements in the email subject line on the
number of reviews obtained:
Send an email
1) Exclamation point (!) 4) UPPERCASE
- Health & beauty: +30.4% - Electronics: +26.7%
after delivery to
- Food & tobacco: +83.5% - Health & beauty: -39%
- Sport: -10% - Sport: -21%
request a review
- Electronics: 30%
5) Incentives (coupon, discount,
2) Question mark (?) sale)
on the product(s) - Electronics: +21.7%
- Apparel: +23%
- Health & beauty: +31.5%
- Electronics: +16.8%
they bought - Health & beauty: -6.7% - Apparel: +8.7%

- Food & tobacco: +106%
3) Store name
- Health & beauty: +14%
- Sport: +13%
- Electronics: +15.5%
- Food & tobacco: -74%
Categories
#145
This article on Jilt contains 3 samples of Product Review
Next
Request emails (towards the bottom of the article):
https://jilt.com/blog/ask-for-product-reviews/
Send an email
Reviews.io has several example emails also:
https://blog.reviews.io/5-awesome-review-collection-email-e
after delivery to
xamples
A few more examples and guidelines here:

request a review https://www.campaignmonitor.com/blog/email-marketing/2
019/08/8-best-practices-to-encourage-customer-reviews-thr
on the product(s) ough-email/
they bought
Categories
#146
Performance and conversion are inextricably connected.
(cont)
Amazon has shown that each 100ms of latency costs them 1%
in sales. Walmart chalks up an extra 2% conversions with every
second of performance improvement. Any online shopper will
Optimize your
tell you that faster is better than slower.
website
A 2013 study of the effects of mobile web performance on user
emotional engagement found that a mere 500 millisecond
performance
delay resulted in a 26% increase in user frustration, and an 8%
drop in engagement.
(loading speed) A study by Skilled from 2016 found that:
- 79% of customers “dissatisfied” with web performance

are less likely to buy again.
- 64% of smartphone users expect a website to load in four
seconds or less
- 47% of online shoppers expect webpages to load in two
seconds or less
- If your site makes $100K per day, a 1 second
improvement in page speed brings an additional $7K in
revenue
Categories
#146
- A 1 second delay in page load time means 11% loss of
(cont)
page views
- A 1 second delay means a 7% reduction in conversions
Optimize your
Shopify recommends these 12 improvements to optimize your
store’s loading speed:
website
1. Use fast and reliable hosting
2. Use a CDN
performance
3. Use Google Tag Manager for your tracking
4. Prioritize testing and optimizing your mobile
performance
(loading speed) 5.
6.
Minimize your use of quick view windows
Minimize the use of Liquid forloops
7. Use Shopify’s built-in image size parameters to minimize
thumbnail sizes
8. Eliminate or minimize homepage hero slides
9. Remove any apps you’re not using
10. Compress and reduce images in size and number.
Compress with TinyPNG, TinyJPB, or one of the many
Shopify apps available
11. Minify your code
12. Reduce redirects and broken links Categories
Macy's displays a popup

which takes most of the
buttons:
- View Bag & Checkout

- Continue Shopping

#146) Optimize your website performance (loading speed)
Here is the performance on both mobile and desktop of 12 of the stores I looked at, by alphabetical order (according to Google
PageSpeed Insights). Amazon clearly stands out from the pack.

Let's take a look at the performance on mobile separately.

And the desktop performance
Next Categories
#147
Make it personal, add video, highlight your people. Use visual
Next
hierarchy and supportive images to help your users consume
the information. If you have a lot of About content, have an
overview page with links or buttons to sub-pages.
Have an About Us
page, share your
story

Sears displays a popup

towards the top of the
buttons:
- Back to Shopping
- Next Step
"Next Step" is not a good

label, because it is not clear
to shoppers what the next
step actually is. It should be
more descriptive, such as
"Checkout".

#147) Have an About Us page, share your story
Apple has a few links

to About pages in
their footer:
Newsroom, Apple
Leadership, Job
Opportunities,
Investors, Events, and
Contact Apple. The
screenshot is of their
“Apple Leadership”
page. I’d recommend
having also an
overview About page,
which could possibly
include a timeline of
the company’s history
and product launches.
ASOS has a very simple About page, with 3 choices: “Who we are”, “The ASOS Brands”, and
“The ASOS experience”. Good inspiration.

B&H’s About page is fairly Build starts their About Crutchfield's About page is very
long, and it contains 3 page with a hero image long. It starts with a
videos. Video is usually and short paragraph. They well-designed hero section with
more engaging than text then display some a mosaic of images in the
and images, so that’s good important numbers, a background, and a value
inspiration. The overall paragraph about their proposition statement on top,
layout of the page could story, social media icons, a followed by a sub-menu of the
largely be improved few links, a message from sections below. Note that the
however (see Amazon’s the President, a CTA to screenshot captured is a bit
About page). enroll, and 4 value bugged and repeated the hero
proposition bullets. While section.
the page contains good
components, it doesn't
I won't mention all the elements
flow very well.
from that page, but here are a
few noteworthy components:
- a video by the CEO
- their values
- the history of the company (a
beautiful visual timeline)
- awards they won

Home Depot has a separate site for JCPenney's Company Info page has a
their corporate information. Their few sections with text and images,
About page contains: followed by a few CTA buttons to access
- a hero image other related pages.
- a link to to see their history
- images with links to more information
about the company (values, etc.)
- vision
- some numbers, laid out in a very
interesting way on shelves
- news

LL Bean's Company Information Macy's has a well-designed

page is text only. Few people will About minisite, starting with a
actually read through all that hero section and sub-menu
text. BAD inspiration. listing the sections below. The
following sections are:
- numbers
- brands
- map of stores
- sections featuring other
pages to read
- awards
Good inspiration.

Amazon displays the shipping cost directly on the product page, next to the price, and in the right side "purchase column".

Wayfair's main About starts with a video, then their

brands, promise, culture, and a long list of awards. Good
inspiration, but I'd recommend featuring some of the
related sub-pages which are listed in the left menu.
Next Categories
#148
According to Shopify, mobile traffic now accounts for 50% of
(cont)
visits, and about 35% of purchases.
During the 2018 holiday season, about a third of online
Optimize your
purchases came from smartphone users. On Black Friday, with
6.2 billion in online revenue, 40% of sales came via a mobile
store for mobile

device. During Cyber Monday (7.9 billion), 54% of visitors and
30% of purchases came from mobile devices.
(or create a 80% of shoppers used a mobile phone inside of a physical store
to either look up product reviews or compare prices.
separate mobile According to BigCommerce, mobile ecommerce sales are
experience) expected to account for 54% of total ecommerce sales by 2021.
According to Google from 2018 data, if people have a negative

experience on mobile, they’re 62% less likely to purchase from
your store in the future. And based on 2017 data, a one second
delay in mobile load times can lower mobile conversions by up
to 20%.
Categories
#148
Below are some of the best practices I already talked about
Next
which are specifically for mobile:
- Consolidate your mobile header (see #1 and #16)
Optimize your
- Test a link bar (see #2)
- Add a sticky CTA bar (see #7)
store for mobile

- Make your menu items big enough (see #8)
- Simplify your menu (see #9)
(or create a
- Make the burger menu easy to close (see #15)
- Avoid full-page popups that interrupt the shopping
experience (see #26)
separate mobile -
-
Choose readable font sizes (see #31)
Add zooming capability to product galleries (see #49)
experience) - Add a sticky Add to Cart bar or button in the Product
page (see #68)
- Simplify breadcrumbs (see #101)
- Show the appropriate keyboard based on the field type
(see #117)
And this Shopify article is a good starting point to think about

your mobile or mobile-responsive site
Categories
#149
According to TrustPulse, activity notifications (such as
Next
purchases by other shoppers) have been shown to increase
conversions by up to 15%. These typically appear in a small
popup as purchases happen, at the bottom of the screen.
Test purchase Below are some of the shopify apps that offer these types of
notifications
notifications:
- https://apps.shopify.com/shoppop
- https://apps.shopify.com/mps-sales-notification
- https://apps.shopify.com/provesource
- https://apps.shopify.com/bizzy-social-proof
Categories
#83
If you reveal all thumbnails, do it in an overlay panel when users
Next
click any thumbnail (and include a truncation link).
On the Product
page, either
display all image
thumbnails (no
truncation), or
reveal all
thumbnails

#150) Warn users in the cart for products low in stock
Adidas

Build

Crutchfield

Nordstrom

Home Depot lists 5 thumbnails, with a "More" thumbnail. Clicking any thumbnail opens the popup with the detailed gallery (popup with all
images). Good inspiration.



Increase Ecommerce Conversions 150 Best Practices 2020 PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Increase Ecommerce Conversions 150 Best Practices 2020 PDF

Uploaded by

Copyright:

Available Formats

Increase Your Online

My background is in IT consulting (analysis and programming) with various

Or message me and let me know your thoughts! You can email me at

Or message me and let me know your thoughts! You can email me at

Category Page Product Page Cart Checkout

I grouped the best

Row 1 (bar above the header): Free Shipping, or oﬀer

On mobile, opt for

Row 3: Search box

Examples (1/6) Categories

Amazon's mobile header is more standard and

Notice how they opted for a link bar instead of a

Adidas has a minimal header, and everything on one

Examples (2/6) Categories

Examples (3/6) Categories

Examples (4/6) Categories

Examples (5/6) Categories

REI's header is a bit strange:

Sears' header is standard, except for the notiﬁcations

Examples (6/6) Categories

Examples (1/2) Categories

Examples (2/2) Categories

for a header with 2

Examples (1/12) Categories

Adidas's header on desktop has two rows and is

Examples (2/12) Categories

On Amazon, the search box is prominent, which

Examples (3/12) Categories

ASOS's header features their two main

Also, despite having 3 rows, the header is still

Examples (4/12) Categories

B&H's header is a bit overloaded with elements.

"B&H Gift Cards" could be a menu item instead

Examples (5/12) Categories

On Build, the search box doesn't stand out

And with 4 rows, the header is overwhelming.

Examples (6/12) Categories

I like on Crutchﬁeld that they have a value

Examples (7/12) Categories

With 4 rows, Home Depot's header is a bit

Examples (8/12) Categories

The ad up top on JCPenney is quite vague. That

Their search box is prominent.

Examples (9/12) Categories

The ﬁrst row in REI's header acts as a secondary

Also, their categories menu has 12 + 2 items, and

One good thing is the text in their search box - it

Examples (11/12) Categories

On the Sears store, the search box is prominent

15 categories is a too much. I'd reduce to 10-12 +

The Chat button in row #1 could be moved to

Examples (12/12) Categories

On Wayfair, "Registry" isn't a category and could

Row #2 is overwhelming. "Room Ideas" and

Examples (1/13) Categories

Amazon's mobile header is more standard and

Notice how they opted for a link bar instead of a

Adidas has a minimal header, and everything on one

Examples (2/6) Categories

Examples (5/6) Categories

Examples (1/2) Categories

Examples (1/1) Categories