What’s the anatomy of a typical food store 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 food store’s complexity, such as:
- image (dimensions and ratio)
- tags (new, shelf life, veg, country of origin, discounts, etc)
- favourite/wish list/bookmark functionality
- action button (add to trolley, add by weight, more than 1, etc)
- price (now/was)
- product name (length limit?)
- reviews (leave a review, previously bought)
- 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 an online food store 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
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.