Shopping Cart Widget
Last updated: September 11, 2015 at 22:57 pm

If applicable, define the precise behaviors and styling of your shopping cart.


Visual example of the element:


What problem does this element or pattern solve?
Although your checkout path or page will be constructed by combining many of the elements described in previous sections, many sites include a shopping cart widget which presents limited information on selected items and appears on multiple pages. The complexity of coding this type of widget, combined with its restricted space and abbreviated content, requires very clear definitions.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Will you have a shopping cart widget? Or will clicking any shopping cart icon take you to a stand alone cart page? Using a widget allows your customer to add items and continue shopping without leaving your results pages.
  • Will your shopping cart widget be condensed and expand to show full details on click? Will it be persistently displayed (normally in the right navigation)?
  • What features will be included or omitted from the widget compared to information shown on your main shopping cart page? What functionality will be included or omitted? For example, can the user change quantities, or delete items directly in the widget?
  • How will the shopping cart widget behave on responsive sites? Will the widget be used only for desktop sites, but not tablet or mobile? Be sure to define the business rules, interaction changes, and visual styling for all options.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
basket, checkout, current order, bag
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply