Skip to main content

​
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.
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.

​
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=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

Clear Product Images

Ensure cart item images clear and recognizable. Customers use images to verify correct items in cart.

Variant Details Visible

Display variant options prominently (Size, Color, etc.). Prevents confusion when multiple variants in cart.

Quantity Selectors Accessible

Ensure +/- buttons large enough to tap on mobile. Minimum 44x44px touch target.

Remove Button Clear

“Remove” button should be obvious but not accidentally clickable. Confirmation modal optional for safety.
  • Cart Drawer - Cart drawer container (configures drawer size, layout)
  • Cart Page - Full cart page (similar cart item rendering)
  • 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: 
{% 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.