Product card

Customize how product details appear inside your cart drawer.

What is the Product Card?

The Product Card feature lets you control the layout, content, and appearance of each item listed in the cart drawer. With customizable settings, merchants can decide how much product information to show, how savings appear, and how product thumbnails are styled, improving the overall shopping experience.

Why to use the Product Cart?

Transparent Pricing & Promotions

Display compare-at prices, active discounts, and how much shoppers save—building trust and reinforcing value.

Consistent Product Info

Ensure that key details like product variants and discounts are clearly visible to help users make informed decisiondecisions.

Flexible Visual Customization

Control product image size, shape, and delete icons to match your brand design and UX flow.

How to set up

Step 1: Set up the appearance of product info

You can tick the box to choose the product info that appears in each cart item.

• Show product variants: Display size, color, or other selected variants.

• Show compare-at price: Show original price alongside discounted price.

• Show discount: Display percentage or amount off.

• Show savings below prices: Add a savings message like “Save $5.00” under each item.

• Label customization: Customize how savings are shown (e.g., (Save {{savings}})).

• Icon Delete: Choose your preferred trash/delete icon style for the product.

Step 2: Customize the Display setting

Adjust how product images appear inside the cart drawer:

Image Width & Height: Set fixed dimensions (in px). Example: 102px × 102px

Image Border Radius: Control how rounded your images appear, from sharp corners (0px) to fully rounded circles (24px)

This gives you the flexibility to match the style of your storefront product cards or create a custom cart drawer aesthetic.