Improve the shopping experience on your eCommerce store with the best UX practices.

Get useful pointers on e-commerce user experience, tablet interfaces, mobile UX, responsive design, holiday banners, email design and more.

Recent Posts

  • The shopping cart button has to be designed properly as it is essential for the purchasing process. It has to give an overview of the ongoing buying process. Specify how many items are currently present in the cart and how much they cost. Link it to the cart page. Most eCommerce stores place the cart icon on the upper right hand side of the page. Ensure that the cart icon is not crowded out by other elements, make it easy to find. Design a visually appealing cart or use just a simple text link based on your audience.

    Easy access to shopping cart

  • Sitesearch is an important navigation function of an online store. So, make the search box clear and prominent on the site-wide header. If your product catalog is very large, then allow users to choose the category before they perform the search. Don’t place any other boxes in the header other than the search box as that would confuse the shoppers. Use a button that reads “search” instead of a small search icon especially on the home page.

    The Search Box

  • A clear, distinct and remarkable logo that appeals to the target audience is the basis of brand identity of an eCommerce store. Whether the logo is placed on the upper left corner as in most eCommerce stores or in the center, it should be displayed prominently. Add a catchy and memorable tagline below the logo that helps in brand building. Direct the shoppers to the homepage when they click on the logo.

    Help customers remember your brand

  • Fashion retailers display products using models styled with a range of other accessories showing shoppers that these products look great together. Allow shoppers to purchase all the items together with a ‘Buy The Look’ call to action so that they don’t need to navigate to different product pages to add each of those products to their cart. This is also a good approach to recommend products.

    eCommerce product page secondary CTA: Buy The Look

    eCommerce product page secondary CTA: Buy The Look

  • Encourage customers to leave a review for future shoppers by providing them with the option to write a review directly on the product details page. Make it simple and easy to use. Some shoppers may have a limited attention span. You can let them leave a quick star rating on a scale of 1-5 or something similar. You could also ask them to rate on different aspects of your product along with the overall rating.

    eCommerce product page secondary CTA: Write a review

    eCommerce product page secondary CTAs: Write a review

  • Shoppers often use social media to bookmark their favorite products or share what they have purchased. Social sharing can be considered as a secondary call to action on the product page as it can help increase the awareness of the product among a wider audience. Identify which buttons to include and where to place them based on the habits of your shoppers. Placing them close to the product images is one good option as the eye is drawn to photos. If possible provide incentives for sharing.

    eCommerce product page secondary CTAs: Social Sharing Buttons

  • Shoppers might not always buy a product immediately. The Wishlist allows them to save the product so that they can review and purchase it later. It is also a good way to encourage repeat visits. Provide a Add to Wishlist button on the product page. Keep it subtle as it is not the primary call to action.

    eCommerce product page secondary CTAs: Add to wishlist

  • A secondary call to action will provide an alternative conversion opportunity. You can ask your shoppers to add the product to a wishlist, share the product with friends and family, write a review about it or even encourage them to buy complimentary products along with it. From color, to size, to placement, ensure your secondary calls to action don’t compete with your primary CTA.

  • How do you save a sale when the product is temporarily out of stock? Hide the buy button, ask for the shoppers’ email id and notify them when it’s re-stocked. You can also inform shoppers of an expected re-stock date. For more on how to design a product page for out of stock product variants visit Product Page - Product Options.

    eCommerce product page CTA: Notify Me

  • Some shoppers know exactly what they want. Enable them to get to the cart directly with a Quick buy or a one step buy button on the product page. You can keep a ‘Quick Buy’ button along with the ‘Add to Cart’ button and order them based on your product, target market etc.

    eCommerce product page CTA: Quick Buy

    eCommerce product page CTA: Quick Buy

  • The primary call to Action on your product page should be the “Buy button”. Make it a large sized button in a contrasting color to the background that reads ‘Buy Now’ or ‘Add to Cart’ or ‘Add to Bag’ etc. In short, distinguish it from other elements of the product details page. Make sure it comes above all your secondary CTAs and that there is enough space around your add to cart button so that it is easy to spot and doesn’t feel cluttered.

    eCommerce product page CTA: The ‘Buy’ button

    You can also include visual cues in your add to cart button such as a shopping cart icon. And remember, always A/B test your primary CTA.

    eCommerce product page CTA: The ‘Buy’ button

  • If you have a product with multiple variants and any of them are out of stock, then ask for your shopper’s email address and let them know once you have the product again. You could also use this opportunity to make them subscribe for your newsletters.

    Dealing with out of stock product variants

    Dealing with out of stock product variants

  • If your product comes in a variety of sizes, then link to a size guide right above the size option. It is a good way to guide shoppers who are not sure of the size they need. Provide detailed instructions and measuring tips with the size guide and show sizes for many international countries. Open up the size guide in a new tab or in a new browser rather than in the same product page.

    Include a size Guide in the product page

    Include a size Guide in the product page

  • Some products on your store might require shoppers to choose more than one product option such as color, size, material, style etc. Ensure that the combinations that are not available are not selectable. For some of these options you can pre-fill default values with the most popular variant. But, for certain options such as size, don’t use defaults as your shoppers might end up purchasing the wrong size. Leave it blank and prompt the user to enter the correct size.

    Design for product variants

  • If your product comes in multiple color variants, use color swatches or a drop down list to display each. If you have a default color option, make sure your product images reflect the selected color. Disable variants that are out of stock.

    • Swatches are useful if you want to allow your shoppers to quickly determine if the product is available in a color they like

    Product variants in the product page

    • If you are worried about the lack of page consistency that might come up as a result of having color swatches of different sizes, then a drop down list is a good option to have.

    Product variants in the product page