#1) On mobile, opt for a consolidated header that takes minimal space

Typically, something like this: Row 1 (bar above the header): Free Shipping, or offer Row 2: Burger menu icon (left), logo (middle), cart icon (right). Row 3: Search box

#2) On mobile, add a Link Bar

Put it right below your header to feature some of your main product categories. Growth Rock saw a 5% increase with 93% statistical significance by adding a Link Bar.

#3) On desktop, opt for a header with 2 or 3 rows

On desktop, opt for a header with 2 or 3 rows. For example: Row 1 contact info “FREE SHIPPING ON ALL ORDERS” “My Account” link Country selection Row 2 logo (left and clickable) search box (middle) cart icon (right) Row 3 Mega menu with the main categories as level 1

#4) List your main product categories in your menu’s level 1

List your main product categories in your menu’s level 1. Show them directly in the menu (on both desktop and mobile). In my experience, you can usually fit up to 10 categories in the menu, but less is more. Around 3-7 category menu items is best. The exception to this is if you have several other very important pages besides your product categories which you also w...

#9) Have as few menu items as possible, and make sure they fit on one screen (on mobile)

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

#10) On desktop, opt for a Mega Menu

Show the sub-categories as columns – ideally 3 to 5). Optionally show an image for each column. If your store has a very big navigation structure (lots of menu items), you can have a “multi-dimensional” Mega Menu that lets users dive into a few levels of menu items.

#11) Place the post-sale actions above the fold in the menu or in the header

Post-sale actions are for example: Sign In / Register, Order Tracking, Customer Service, …

#14) Make your header sticky or semi-sticky

Semi-sticky means that it re-appears when scrolling back up. 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.

#15) On mobile, the burger menu should be easy to close

That usually means that the left swiping gesture and tapping 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.

#20) Always return search results

So if the user searches for a product you do not have in your store, suggest other related, relevant, or popular products. To be more precise, your No Results page can include some of the following components: category suggestions based on the query alternate queries similar to the query searched for personalized product recommendations based on the user profile and ...

#24) Place a clear & descriptive call-to-action button above the fold

Avoid labels such as “Shop Now”, “Continue”, … ). Depending on your store structure, you may want to have more than one CTA (for example, “Shop Men’s Shoes” and “Shop Women’s Shoes”)

#25) Unique selling points should be specific

For example, “60 Days Return Policy”. Typically, it’s a good idea to present two or three selling points above the fold.

#26) On mobile, avoid full-page popups that interrupt the shopping experience

Make sure they take no more than 15% of the screen, and are easy to dismiss. Actually, Google now penalizes intrusive popups on mobile, and so it is recommended to keep them to maximum 15% of the screen, and make them easy to dismiss. To be more precise, read Google’s original announcement about it. So there are some cases where large popups on mobile are still ...

#27) Avoid automatic carousels

Opt instead for user-initiated carousels, if any. On the homepage above the fold, avoid carousels altogether.

#29) Help visitors choose the right product

This can be done with a guide, questionnaire, wizard…

#32) Add social proof on the homepage

For example: testimonials, “As Seen On” logos, facebook likes… anything that builds credibility.

#33) Add user-generated content (UGC)

This can be an instagram feed on the homepage, and/or user photos and videos on specific product pages.

#37) Add credit card logos, shipping logos, and/or trust badges to the footer

Typically these appear on the right side. If you also have a section with those logos on the homepage, you can optionally omit them on the homepage footer. See best practice #36. Most sites that have logos and badges put them in the footer or right above the footer.

#38) Add key contact information to the footer

Contact information can include your phone, email, and social media.

#43) Have relevant dynamic sorting and filters in the product category pages

Avoid or offer explanations for industry-specific or ambiguous filters Have visual filters if the values are visually driven Allow users to combine multiple filtering values of the same type

#45) Add urgency elements to category pages

Show how much they save on sale items, and have limited quantity or limited time offers.

#47) Avoid pagination in category pages

Avoid infinity scrolling. On desktop, use a combination of lazy loading and a “Load More” button. Show about 10-30 products on page load, and then lazy-load another 10-30 products as they scroll down, until they reach 50-100 products. Then, display a “Load more” button and repeat. On mobile, show 15-30 on page load, then show a “Load More” button. When the...

#57) Make it clear what is and isn’t included in your product kits

Show included accessories in a product image, or have a section with “included in kit” images. Clarify it in the description as well.

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

Encourage reviewers to add a photo and/or video to their review.

#61) Interlink product variants

In all these examples that follow except for Crutchfield, 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 (a page for each), the way the other sites interlinked variants simplifies the shopping experience.

#65) Test urgency elements

Urgency elements include limited quantity, limited time, and contextual offers.

#67) Avoid social media share icons on the product page

They tend to reduce conversions slightly. A case study done by VWO revealed that removing social share buttons increased conversions by 11.9%.

#68) On mobile, have a sticky Add to Cart bar or button in the Product page

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

#71) Allow users to purchase temporarily out-of-stock products

I found that “Email Me” buttons or waitlists are ineffective for out-of-stock products. Allow instead users to purchase temporarily out-of-stock products, warn them, and increase the delivery time. Also prominently display product alternatives. For discontinued or deprecated products, do not allow them to buy it, and focus solely on promoting product alternatives.

#74) Avoid horizontal tabs in Product pages

27% of users overlook the hidden content in the inactive tabs

#77) Style your spec sheets to make scanning easier

Add horizontal and vertical shading, icons, and lines

#79) Add a ratings distribution summary with a filter on the star ratings

Users rely on it even more than the content of individual reviews 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 determine how positively or negatively they perceive the product, and wonder if some of the reviews are fake.

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

This is actually one of Google’s best practices for mobile retail. 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 buy more than one product, let them continue shopping (don’t disrupt their experience by...

#82) If your shipping is not free, show the estimated shipping cost in Product pages

About 21% of US online shoppers abandon orders because they aren’t able to see the total order cost upfront before checking out. And about 64% of users look for shipping costs on the product page, before deciding whether to add a product to the cart. Adding an estimated shipping cost is particularly important for lower-priced products because shipping costs are a hi...

#83) On the Product page, either display all image thumbnails (no truncation), or reveal all thumbnails

If you reveal all thumbnails, do it in an overlay panel when users click any thumbnail (and include a truncation link).

#84) Include at least one “in scale” image per product to help shoppers get a sense of the product’s size

For example, show the product within a typical environment, or people interacting with the product. 42% of users try to estimate the product’s size from its product images.

#86) Avoid menu flickering by implementing a 300ms hover delay and/or mouse path analysis

Menu flickering is when users move their mouse towards a sub-category, and instead accidentally activate another parent category, causing the drop-down menu to change.

#87) Offer relevant compatible products on the Product page

Compatible products can be for example accessories and attachments.

#90) Support cross-device shopping

Users should be able to continue on another device by emailing their cart or saving it for later.

#91) Highlight items that are in the shopper’s cart

Add a label or replace the “Add to Cart” button with “View Cart”. You can also update those added items to allow shoppers to change the quantity, and/or include links to additional products or matching accessories.

#92) Dynamically update the thumbnails of products to match the variation searched for

12% of users search using a color keyword. The thumbnails of products in search results should show the variation that matches the color they want.

#94) Feature important product filters at the top of the product list

Have the featured filtering values in the filter sidebar and at the top of the product list. Don’t use banner-like graphics for featured filters Adjust the visual style of the featured filters to match their relative importance by using text links, buttons or visual thumbnails.

#96) Truncate filter values

Truncate filters after about 10 values (truncate if minimum 5 values) Use the site-wide link styling for the truncation link Position the truncation link close to the filter values Add a visual indicator next to the truncation link (an arrow or a +) Fade the last filter value

#97) Avoid breaking Back button expectations

Consider these four elements as “new pages”, so that clicking the Back button will behave as expected: Overlays & lightboxes (Back button closes it) Filtering and sorting (Back button goes back to the previous filtering or sorting values) Multi-step checkouts (Back button goes back to the previous step) AJAX pagination (Back button goes back to the previous p...

#98) Avoid ads (or what looks like ads) on the product list

Avoid all types of ads above or within the product list Avoid text ads below the product list Avoid overlay dialogs on page load Avoid highly graphical ads in prime content locations on the homepage (especially when it comes to competitions and discounts) Graphics that adopt the characteristics of the site (background, text colors, fonts, etc) and avoid visual boxing...

#99) Add sub-sub-category links to help users decide which path they should take to find the product they want

It also helps returning users bypass intermediate pages and go directly to the sub-sub-category they want. I looked at 55 of the top ecom stores, and haven’t found a single one that is doing this. However, most of them have at least a thumbnail to illustrate the category, and several of them also added a label.

#100) Link to all depicted products in inspirational images

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

#101) Display breadcrumbs

Display hierarchical breadcrumbs on desktop. On mobile, have a link to the parent category only. You can also add a “Back to Results” link on desktop if they come from a search.

#102) Have intermediary category pages for the first 1-2 levels of categories which introduce sub-categories

Some of your shoppers need inspiration and guidance to help them make up their mind about which sub-category they’re interested in. Provide thumbnail previews, longer titles, and descriptions for those sub-categories. These components will also clarify categories with ambiguous industry jargon. Feature the sub-categories prominently, at the top of the intermediary c...

#103) Answer all negative reviews

Highlight positive and negative reviews at the top of the reviews section Respond to negative reviews Style your responses to reviews: add indentation, a box or a different background color, and your logo According to Baymard, 53% of users specifically seek out the negative reviews for one or more products they are interested in. 37% of users also positively factor i...

#104) Allow users to search within their current category

Option 1: Give an auto-complete option to search in the current category Option 2: Auto-update the search field to the current category (Search Scope) Option 3: Search in the current category by default, but add a dropdown in the results page to change the scope of the search Option 4: Add a “Search Within” dropdown next to the search box Implementing this is espe...

#109) Limit the exit points (remove the site navigation) during the checkout process

This will reduce the likelihood of them navigating away to another page of the site and abandoning their cart. Keep minimal links in the footer, such as your FAQ, shipping & return policies, and contact info. To be clear, I don’t mean not allowing people from navigating back (with links, or worst case, simply with the back button to go back) to the cart then...

#110) Offer a guest checkout

According to Business Insider, 28% of US online shoppers abandon their cart because they don’t want to register/create account just to make a purchase. ASOS’s approach removed the account creation step on the checkout login page and it reduced their abandonment rate by 50%. Offer the guest checkout as a prominent option. This means that it could be selected by...

#111) Offer relevant upsells at checkout and after purchase

According to Neil Patel (read blog post): If you have very low conversion rates everywhere, then try to optimize that first. However, if you have a low conversion rate on your checkout page, then put it only in your product pages (or in any other part where you don’t have low conversion rates). If you have high conversion rates in one of your checkout steps, test p...

#112) Offer multiple payment methods

Typical payment methods include credit card, PayPal Google Pay, and Apple Pay. In regards to PayPal, roughly half the stores offer an express PayPal checkout with a CTA button at the same place as the normal “Checkout” button (in the cart). And the other half offer PayPal as a payment method at the same level as the credit card option in the checkout page....

#114) Clearly mark form fields as optional or required

Add asterisks to required fields, and “(Optional)” next to optional fields. Surprisingly only a few of the stores I looked at implement this – and it is very easy to do.

#115) Ask for the minimal amount of information in the checkout

Default visible fields: Full Name, Street Address,Zip Code, Country, Phone, Email, Credit Card #, Security Code Add links to make additional fields visible: Apartment/Suite (Address Line 2) Company Coupon Auto-detect the city and/or region based on the postal code.

#116) Make the billing address the same as the shipping address by default

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

#119) Allow and auto-format spaces in the credit card number field

Shoppers struggle with verifying that they typed their credit card number correctly, which is a cause of cart abandonment. Baymard observed that 23% of users either type or verify their card number in 4-digit blocks. Allowing them to type spaces and auto-formatting their card number with spaces can increase their accuracy when typing the number and checking that they ...

#121) In the checkout form, use field labels instead of placeholder text

The issue is when the placeholder text disappears as soon as you start typing, you can easily forget which field that was – especially if you’ve filled out a few fields. Shopify’s default behavior is fine because once you start typing in a form field, the placeholder text becomes a label above the text you’re typing.  Example – ...

#122) Match the length of form fields to the length of the input

To be clear, the field size should be static, not adjusted dynamically. It should simply set to match the expected input. For example, a zip code field should be shorter than a name field.

#123) In the checkout form, autocomplete the address as they start typing

This is known as an Address Finder. See the Uber app as a good example of how to do this. Look into the Google autocomplete API. You can turn this on in Shopify in the checkout setting.

#124) Place the country field before the state/province field

In the checkout form, if you sell to multiple countries, this will ensure that the state/province values are for the correct country.

#125) Avoid dropdowns in forms for fields with fewer than 5 or more than 10 items

In the checkout form, if you sell to multiple countries, this will ensure that the state/province values are for the correct country. The reason why you should avoid dropdowns with more than 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 o...

#126) Have an autocomplete text field for the State/Province (instead of a dropdown)

The reason for this is that it contains too many options and makes a dropdown unusable. This recommendation is if you don’t have an address finder (see best practice #123).

#127) Automatically pre-fill City and State fields when the user enters a zip/postal code

This tip is valid only if you don’t have an Address Finder field 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 Address Finder field). From the data I found, about 11-12% of people quit because the checkout is too complex / ...

#128) Format the expiration date field the same as on the physical credit card

The ISO standard for this format is “MM / YY”. Make sure that keyboard use is supported for these fields, and not force users to use the mouse as 24% of users prefer filling out the expiration date with the keyboard.

#129) Avoid multi-column form layouts

Some exceptions: credit card details, city, state, and ZIP fields. I’m not mentioning the Name field because it should be a single Full Name field, instead of First Name and Last Name. To quote Baymard (source): Forms with multi-column designs often lead users to: omit fields, simply because they do not notice them or because they misinterpret the meaning of the mu...

#130) Test both a one-page and a multi-page checkout

Test a One-Page Checkout especially if your average order 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 and store, as evidenced below: One-page checkouts and digital wallets (Amazon Pay, Apple Pay, PayPal One Touch) ha...

#132) Use input masks for restricted fields, such as the phone number or credit card number

Input masks reduce the number of validation errors, which can reduce site abandonments. According to Baymard, 64% of sites don’t use input masks (or don’t use them correctly) to help shoppers enter their data in restricted inputs. And in the  testing they did, 89% didn’t follow formatting examples for restricted fields. You should also consider regional dif...

#133) Increase the perceived security of your checkout page

According to Baymard, 18% of shoppers (from 1044 respondents in US) abandon their cart because they do not trust the site with their credit card information. The tips below are especially important if your store is NOT a large brand such as Apple, Microsoft or Walmart. Encapsulate the credit card fields with a solid background color to make it look more secure than t...

#134) Offer the possibility to return products in-store, in addition to a return-by-mail option

According to Baymard, about 20% of users prefer returning a 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 visually equally to the mail option.

#135) Test social login

Research from 2012 / 2013 reveals that: 86% of people are bothered when needing to create new accounts on websites. 92% of users have left a website instead of resetting or recovering their login. 31% do so frequently. 60% of shoppers are more likely to use social login on mobile 64% of millennials use social login avoid spending time filling out a registration form....

#136) Validate the address and warn the shopper if it cannot be verified

If the address validation fails, suggest the corrected address if possible (and highlight the suggested change). Otherwise, give them the option to use or edit either the provided address or the suggested one. Note that if you’re using an Address Finder field instead of the standard address fields, you should not need an address validator. However, the address finde...

#137) Explain why your shoppers should create an account

Place that statement or bullets in the Sign Up (account creation) page, and in the Order Confirmation page next to the form to create their account.

#138) Avoid email and password confirmation fields in the Account Creation form

Formisimo observed over a two-month period that their 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 page conversions by 55%, and decrease by 24% the number of corrections made in the Confirm Password field. If a form has an email o...

#139) Provide input suggestions for the email field in the Account Creation form

For example, if the user inputs “[email protected]”, the suggestion shown below would be “Did you mean [email protected]?”.

#140) Use low password requirements

According to Baymard’s large scale checkout usability, “strict password rules can cause an 18.75% checkout abandonment rate among existing account users as they try to sign in.” The real problem arises when trying to sign in. If they got forced to create a more complex password and could not use their standard one they generally use, they’re having difficulty ...

#141) Use a visually consistent style for the Account Dashboard cards

Avoid or minimize images as a general rule. Use them only if you want to draw attention to that component.  Use text links and possibly icons.

#143) Send a relevant account registration (welcome) email

The welcome email is your first touch point via email with your 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: Your logo Links to the main product categories Links or buttons to access the account, track order, find a store, etc. A warm welcoming message (and optionally a ni...

#144) Send cart abandonment emails and/or SMS

According to SaleCycle, the cart abandonment rate in 2016 was about 75% across all regions. Baymard mentions it is 69.57%, based on 41 studies, and that stat was last updated in September 2019. Based on Omnisend’s research, 46.1% of people open cart abandonment emails, 13.3% click inside the email, and of those clicks, more than 35% end up buying something. They als...

#145) Send an email after delivery to request a review on the product(s) they bought

Research by Yotpo of 200K stores and 163M orders discovered the impact of various elements in the email subject line on the number of reviews obtained: 1) Exclamation point (!) Health & beauty: +30.4% Food & tobacco: +83.5% Sport: -10% Electronics: 30% 2) Question mark (?) Electronics: +21.7% Apparel: +23% Health & beauty: -6.7% 3) Store name Health &...

#146) Optimize your website performance (loading speed)

Performance and conversion are inextricably connected. 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 tell you that faster is better than slower. A 2013 study of the effects of mobile web performance on user emotional engagement found th...

#147) Have an About Us page, share your story

Make it personal, add video, highlight your people. Use visual 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.

#148) Optimize your store for mobile (or create a separate mobile experience)

According to Shopify, mobile traffic now accounts for 50% of visits, and about 35% of purchases. During the 2018 holiday season, about a third of online purchases came from smartphone users. On Black Friday, with 6.2 billion in online revenue, 40% of sales came via a mobile device. During Cyber Monday (7.9 billion), 54% of visitors and 30% of purchases came from mobil...

#149) Test purchase notifications

According to TrustPulse, activity notifications (such as 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. Below are some of the shopify apps that offer these types of notifications: https://apps.shopify.com/shoppop https://apps.shopify.com/mps-s...