Customisable Product Card Component Template (Figma)
What's the anatomy of a typical e-commerce product card? An image, title, price... is that about it?
This product card template contains a collection of components that you need to consider depending on your store's complexity, such as:
image (dimensions and ratio)
image hover state (photo changes? animates? image scroll feature appears complete with arrows and/or pimples)
promotional tags (which ones? editable?)
favourite/wish list/bookmark functionality
action button (buy now? quick shop? add to bag? need one at all?)
price (discount? price range? price range discount? hidden price?)
colours (selectable? full list or few + view more link?)
sizes
brand name
product name (length limit?)
product description (length limit?)
reviews
icons set
Some more complex shops might require all of the above.
How to lay it all out?
Each of the above can have a dramatic effect on your customers' experience. Their expectations are set based on your competition and industry standards.
This example is most appropriate for luxury retail and large complex stores. But most things could be removed for smaller/boutique shops.
There are still a few things missing from this example, which will be added in subsequent releases, such as:
quick shop state
image scroll pimples
small screen variants (both vertical and horisontal views for tight spaces.
I am sure I forgot a few things as well, would love to know what else could go into making a product card? Comments below...
UPDATE
Latest version includes a Responsive screen utilising the latest Figma's auto flow features announced at Config23.