Ecommerce design pattern guide

Retailers - use our "Ecommerce design bible" to review and improve your site experience and conversion

  • Authors: James Gurd, consultant at Digital Juggler
  • Format: Comprehensive 176 page guide with checklists and desktop, mobile examples for different page types and elements
  • Updated: July 2016
  • Related guide: Online retail merchandising guide

How will this online retail website design best practice guide help us?

We created this guide to give our members a definitive reference of best practice for the design of key website page templates essential in retail ecommerce websites. Since best practices for these page types are common on other types of sites, it is a useful reference for the design of all sites. For each page type, for example, the home page or product page, we have defined two wireframes with an explanation and examples of the core design elements that digital teams need to incorporate for desktop or mobile responsive sites.

The purpose of this guide is to give you a toolkit to use to review tests to optimize existing templates, or alternatively, as a blueprint that can be adapted when you are planning a site redesign.

The primary audience for this guide is members or ecommerce teams, particularly in retail, with those involved in design from managers through to optimizers. The secondary audiences are agency-side digital teams and independent ecommerce consultants who are working with retail ecommerce clients.

What best practice recommendations do the Ecommerce Site Design Bible include?

The first edition of this guide focused on best practices for creating desktop web experiences for retail with the intention to add more detail on mobile-optimised experiences. In the second edition, our main focus has been to update guidance and examples on mobile-optimised responsive and adaptive experiences. We have expanded the coverage on best practices for mobile retail design through these features:

  • Mobile-specific best practice sections for smartphone and tablets
  • Mobile wireframes for all key page templates listed below
  • Screen captures comparing examples of mobile against desktop designs

What does the guide cover?

The guide shows best practice for these key steps in the customer journey

This guide is structured around a review and recommendations for 10 key page types that form the customer experience for retail site customer journeys::

  • 1. Homepage.
  • 2. Category page.
  • 3. Search results page.
  • 4. Brand page.
  • 5. Product list page (PLP).
  • 6. Product details page (PDP).
  • 7. Basket page.
  • 8. Checkout – sign-in.
  • 9. Checkout – delivery and billing.
  • 10. Checkout – payment and order confirmation.

The recommendations for each section follows the same structure and includes:

  • Best practice tips including multichannel and international recommendations
  • Mistakes to avoid
  • Measurement and optimisation tips
  • Key requirements checklist
  • Mobile-specific best practices
  • Wireframe templates for desktop and smartphone
  • Annotated retail examples for desktop and smartphone
  • Common features

Available to
Business members
Learn more

What our members say

We are at the early stages of our digital marketing journey, Smart Insights templates and tutorials help us check and learn as we go.

Stuart Sykes, Digital Marketing Manager


I am just working myself through the new eCommerce Design Bible and I wanted to say a big thank you to the author and the Smartinsights’ team, as it is an ivaluable resource of best practice examples and useful tips, which I will be using a lot in my everyday work.

I love the way it is structured – very executable, with practical checklists, sample templates and casestudies. I highly recommend it to all ecommerce practitioners!”

Agata Kozanecka, eCommerce Strategist at Infinity Group, Poland

Smart Insights is one of the best digital ‘tools’ on the internet today. It has been a great asset as a channel of advice and insight, helping me to deliver an all-encompassing digital strategy.

Jennifer Law, E-Communications Manager, National Pharmacy Association

Get access to this now by purchasing a Business Expert membership

Plus access ALL 130+ resources in our Digital Marketing Library to Plan, Manage and Optimize your organization's marketing, including resources and benefits only available to Business members:

  • In-depth Ebooks
  • Online training
  • How to videos
  • Marketing templates