E-commerce guidelines

Cards

E-commerce cards are one of the most common components used on the platform. They provide a clear overview of listing the most important product or category information.

Category card

Category cards are designed to showcase a range of products within a specific category. They are consisting of an image, headline and optional description information.

Template category card
Template category card

Product card

First, ensure a clear product image by using high-quality photos. Consistency in image size and style helps create a cohesive look.

For the product title and description, include a short and descriptive text. Pricing information should be displayed prominently, with discounts or sale prices clearly highlighted, and the original price struck through. A visible "Add to cart" button with contrasting colors is essential to draw attention, and keeping the CTA text simple. There should also be a stock indicator.

Template e-commerce product card
Template e-commerce product card