The Product Items element is the core component of your cart drawer. It displays the actual products that customers add to their cart, including details such as product name, price, and quantity. The element comes pre-configured, making it easy to insert and immediately use in your cart layout.
Overview
The Product Items element shows customers what they've added to their cart and allows them to manage quantities.
What the Element Displays
Component | Description |
Product image | Thumbnail of the product |
Product name | Title of the item |
Variant info | Selected options (size, color, etc.) |
Price | Individual item price |
Quantity selector | Adjust item quantity |
Remove button | Delete item from cart |
Inserting the Product Items Element
Step 1: Open the Insert Panel
Navigate to the Insert panel in Instant.
Step 2: Locate the Product Items Element
Inside the Insert panel, go to Elements → Cart
Hover over the Cart category to expand available options
Select Product Items
Step 3: Add to the Cart Layout
Drag and drop the Product Items element into your Cart Drawer Layout
It will automatically populate as part of the cart
Previewing Cart Items
By default, three sample products are shown in the right sidebar to help you visualize the layout.
Adjusting Sample Products
You can adjust the number of sample products in the right sidebar to simulate how your cart will look with different quantities.
Sample Count | Best For |
1 product | Minimal cart preview |
3 products | Standard preview (default) |
5+ products | Testing scroll behavior |
Customization Options
Property | Customization |
Layout | Horizontal or vertical arrangement |
Image size | Thumbnail dimensions |
Typography | Font styles for name and price |
Quantity controls | Button styles and placement |
Remove button | Icon or text, color, position |
Spacing | Gap between items |
Quick Reference
Task | Action |
Insert Product Items | Insert panel → Elements → Cart → Product Items |
Position in layout | Drag below header, above footer |
Adjust preview count | Right sidebar → Sample products |
Customize styling | Select element → Style options |
Recommended Placement
Position | Element |
1 (Top) | Header |
2 | Reward bar |
3 | Product Items |
4 | Upsells |
5 (Bottom) | Footer |