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

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.

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

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...

.

.

.

Take the time to actually test your store on various mobile devices.

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

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.

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

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.

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.

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 ...

Other relevant content includes blog posts, other pages, etc.

Other relevant content includes blog posts, other pages, etc.

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”)

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

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 ...

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

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

User-controlled carousels are usually good for this.

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

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

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.

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

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

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

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...

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

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

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.

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

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

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.

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.

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

Add horizontal and vertical shading, icons, and lines

Avoid having multiple specs per row

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.

Not just in the site-wide banner or header.

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...

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...

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

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.

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.

Compatible products can be for example accessories and attachments.

Auto-update the cart as soon as it’s changed.

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

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.

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.

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.

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

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...

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...

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.

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

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.

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...

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...

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...

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...

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...

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...

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....

Show a checkmark after each correct input

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.

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.

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.

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 ...

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 – ...

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.

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.

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

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...

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).

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 / ...

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.

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...

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...

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...

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...

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.

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....

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...

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.

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...

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

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 ...

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.

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...

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...

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 &...

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...

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.

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...

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...