Product cards (list)

The category grid should display an optimal number of products per row (typically 3–4) so users can easily scan products without overwhelming the layout.

Trending, top-rated, or best-selling products should be displayed at the top of the category page by default.

Product cards should reveal additional product images when users hover over the product image.

Product images should follow a consistent visual style including background, lighting, and composition to improve scannability.

Product cards should maintain consistent dimensions and spacing to create a clean and easy-to-scan product grid.

The category page should clearly indicate product variants such as available sizes, colors, or options.

Product cards should display key information such as product title, price, discount, and important product details.

A clear call-to-action should encourage users to view the product page, often triggered when hovering over the product card.

Products with limited availability should display scarcity messages such as “Only 1 left” to encourage faster purchasing decisions.

Products that are out of stock should display a message such as “You just missed it” to communicate scarcity and transparency.

Product cards should include badges such as “Best seller”, “New”, “Fast delivery”, or “Top choice” to highlight product advantages.

If a product is out of stock, users should be able to submit their email address to be notified when the product becomes available again.