> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart Drawer Product (Component)

> Automatic component rendering individual cart items in cart drawer

## What It Does

The **Cart Drawer Product** component automatically renders each individual product line item inside the cart drawer. Displays product image, title, variant, quantity selector, price, and remove button for each item added to cart.

<Note>
  This is an **automatic component** with no customizable settings. Renders automatically for each cart item when cart drawer opens. Cannot be configured in Theme Customizer.
</Note>

## How It Works

### Automatic Rendering

**Component renders when:**

* Customer opens cart drawer (clicks cart icon in header)
* Cart contains one or more items
* Component loops through `cart.items` array, rendering one cart item per loop iteration

**Component structure:**

* Cart drawer loops through items
* For each item, renders cart-drawer-product component
* Displays product details (image, title, variant, quantity, price)
* Provides interaction (quantity update, remove item)

### Display Content

**Each cart item shows:**

* **Product image** - Thumbnail of product variant
* **Product title** - Clickable link to product page
* **Variant** - Selected options (e.g., "Size: M, Color: Blue")
* **Quantity selector** - +/- buttons or input to adjust quantity
* **Line price** - Price × quantity (e.g., $50.00 × 2 = $100.00)
* **Remove button** - "X" or "Remove" to delete item from cart

### User Interactions

**Quantity adjustment:**

* Customer clicks "+" to increase quantity
* Clicks "-" to decrease quantity (minimum 1)
* Or types quantity directly in input field
* Cart updates via Ajax (no page reload)
* Cart total recalculates automatically

**Remove item:**

* Customer clicks "Remove" or "X" button
* Item deleted from cart
* Cart drawer updates (item fades out)
* Cart total recalculates

**Click product:**

* Clicking product image or title → Redirects to product page
* Allows customer to review product details without closing cart

## Cart Item Data

### Product Properties

**Each cart item includes:**

* `item.title` - Product title
* `item.variant.title` - Variant name (e.g., "Medium / Blue")
* `item.image` - Product variant image
* `item.quantity` - Quantity in cart
* `item.line_price` - Total for this line (price × quantity)
* `item.original_line_price` - Pre-discount price (if discount applied)
* `item.url` - Link to product page
* `item.properties` - Custom properties (engraving, gift message, etc.)

### Variant Details

**Displayed if applicable:**

* Size
* Color
* Material
* Other options (configured in product variants)
* Custom property data (e.g., engraving text)

## Best practices

<CardGroup cols={2}>
  <Card title="Clear Product Images" icon="image">
    Ensure cart item images clear and recognizable. Customers use images to verify correct items in cart.
  </Card>

  <Card title="Variant Details Visible" icon="list">
    Display variant options prominently (Size, Color, etc.). Prevents confusion when multiple variants in cart.
  </Card>

  <Card title="Quantity Selectors Accessible" icon="plus-minus">
    Ensure +/- buttons large enough to tap on mobile. Minimum 44x44px touch target.
  </Card>

  <Card title="Remove Button Clear" icon="xmark">
    "Remove" button should be obvious but not accidentally clickable. Confirmation modal optional for safety.
  </Card>
</CardGroup>

## Related Components

* **[Cart Drawer](/themes/mojave/cart-drawer)** - Cart drawer container (configures drawer size, layout)
* **[Cart Page](/themes/mojave/pages-templates/cart)** - Full cart page (similar cart item rendering)
* **[Product Page](/themes/mojave/products/product-page)** - Where products added to cart

## Technical Notes

### Ajax Cart Updates

**Quantity changes:**

* Sends POST request to `/cart/change.js`
* Updates cart object on server
* Returns updated cart data (JSON)
* Cart drawer re-renders with new quantities/totals

**Item removal:**

* Sends POST to `/cart/change.js` with `quantity: 0`
* Removes item from cart
* Cart drawer re-renders without deleted item

### Cart Item Loop

**Liquid code structure:**

```liquid theme={null}
{% for item in cart.items %}
  {% render 'cart-drawer-product', item: item %}
{% endfor %}
```

**Component receives:**

* `item` object (product data)
* Renders HTML for that specific cart item
* Repeated for each item in cart

### Custom Properties

**If product has custom fields:**

* Properties display below variant (e.g., "Engraving: John")
* Configured on product page (custom input fields)
* Stored in `item.properties`
* Rendered in cart item component

## Key Takeaways

* **Automatic component** - No settings, renders for each cart item automatically
* **Loops through cart items** - One component instance per cart item
* **Shows product details** - Image, title, variant, quantity, price
* **Interactive** - Quantity adjustment and remove item functionality
* **Ajax updates** - Cart updates without page reload (smooth UX)
* **No Theme Customizer control** - Cannot customize without code editing
* **Mobile-optimized** - Touch-friendly buttons essential for mobile cart drawer

Cart drawer product component configured automatically by theme. For customization (styling, layout, custom fields), edit theme code.