Cart items block

The Cart items block is the list of line items in the cart, rendering each product the shopper has added with its image, title, variant, price, quantity stepper, and remove control. It’s a required block, and it’s the container that hosts the cart’s sub-blocks (the Product row, Subscription upgrade, and Custom code), providing the structure that per-line sub-blocks attach to.

​

The Product row

​

Text styling

• Product title — the product name on each line. Also supports a custom font family.
• Variant — the variant label (for example, Size: Medium).
• Subscription plan — the read-only plan label shown on subscription lines.

• Price — the line’s current price.
• Compare-at price — the struck-through original price.
• Savings — the savings label (for example, Save $5.00). Size and line height only — bold and color are set in the Rich Text Editor above.

• Bundle toggle — the disclosure header that expands a bundle’s component list.
• Bundle item title — the title of each component inside a bundle.
• Bundle item variant — the variant label for each bundle component.

​

Discount tags design

​

Sub-blocks and how they position

• Sub-blocks ordered before the Product row appear above the product content in each line.
• Sub-blocks ordered after the Product row appear below the product content in each line.

​

Behavior

• When the cart has no items, the drawer switches to the empty state and this block isn’t shown.
• One cart change runs at a time. While a quantity update or removal is in flight, the row’s controls are disabled to keep the cart consistent, then re-enabled once the change settles.
• Lowering a line’s quantity below 1 removes it. A quantity the store rejects (for example, beyond available stock) re-syncs to the last valid value.
• Bundles change as a unit. Adjusting the quantity on a bundle’s anchor line scales the whole bundle in one operation — if a child is included at 3 per anchor, taking the anchor from 1 to 2 takes that child to 6. Removing the anchor removes every member of the bundle at once.
• Some bundles can’t be re-quantified. If any of a bundle’s children is included at a fractional rate (1.5 per anchor, say), the quantity stepper on that bundle is locked: the +/− buttons and the quantity field are both disabled, and typed quantities aren’t accepted. The bundle can still be removed.
• Subscription lines show their plan. When a line has a selling plan and the Subscription upgrade sub-block is turned off or not added, the Product row shows a read-only plan label beneath the variant — for example, Delivers every month (save 30%). When that sub-block is enabled it presents the plan in its own picker, so the read-only label is suppressed rather than duplicated.

​

Placement and limits

• Region: body.
• Maximum: 1 per cart state.
• State: filled cart only.
• Locked and added by default. Cart items can’t be removed or hidden, only repositioned.

​

Custom template

​

Line content

​

Quantity and removal

function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}

​

Rendering a bundle

function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

​

Design