We want consistency across Wiggle when displaying products to users. This helps users compare different products and improves usability of the site.

  • Product grid
  • Product list

Product grid

A product grid is made up of product cards. A product card is a piece of design that combines product image, product name, price and sometimes information like ratings, reviews and sales messages.

Our current product cards look like this:

Product card elements

  • The product image should be on a white background
  • The product name should be displayed next. The product name usually isn't in sentence case
  • Price, which may be in a range format, for example £20.00 - £30.00
  • And then display the ratings and number of reviews

Product list

A product list is a way to view products in rows. Guidance coming soon.