logo
Shopify Builds>Surfaces>Cart

Cart

The cart is a storefront's editable order state: the cart page template, the drawer most themes render instead, and the line items, quantities and properties behind both. Shopify exposes it through the Cart AJAX API, so every change a shopper makes returns fresh cart JSON, and the theme is responsible for reconciling that response with what is already on the screen.

How We've Used It

The recurring problem is that the cart is written to from several places at once — a product form, a grid quick-add, an editorial block, a vendor widget — and every one of them has to leave the same state behind. Our cart work centers on one update path: mutate through the AJAX API, then re-render the drawer, the line items and the cart bubble from sections rather than patching the DOM by hand. Incentives sit on top of that: spend thresholds, gift lines and sample tiers are computed from cart totals on every render, so the messaging can never drift from the cart it describes. Bundles travel as line-item properties, because a property survives the handoff to checkout and a theme-side variable does not.

Builds Using It

24 further gated builds use it; their pages follow.

Related Entities

Builds

A collection template turned into a palette builder that carts one priced SKU

A pick-your-own palette promotion runs on a normal collection page wrapped in a `<bundle-element>` custom element, which holds a fixed tray of empty slots and posts one priced bundle product with the shopper's picks attached as line-item properties.

Nudestix

A second product template whose add-to-bag switches between one cart line and several

`main-product-bundle.liquid` is a fork of the theme's product section in which one Liquid conditional wraps the buy form in either a standard `<product-form>` or a `<bundle-product-form>`, depending on which bundle metafield the product carries.

Nudestix

Cart 'Add Ons' cross-sell driven by the Product Recommendations API

The cart drawer's "Add Ons" row asks Shopify's recommendations endpoint for products that complement the first paid line in the cart, falls back to related products, filters out what the shopper already has, and survives the drawer being thrown away and re-rendered on every cart change.

Nudestix

Cart page rebuilt around loyalty points, protected gifts and a dark order summary

Dawn's single-table cart section rewritten as a two-column page: per-line loyalty points computed in Liquid, gift lines a shopper can't edit away, bundle lines that link back to the builder that made them, and a summary panel that survives every re-render.

Nudestix

Threshold-driven free shipping, deluxe sampling and a first-order gift notice

Merchandiser-set spend thresholds evaluated in Liquid on every render of the cart section: free-shipping and deluxe-sampling messaging with a remaining-amount placeholder, a first-order gift notice that can tell a guest from a customer, and a free add-on whose control posts to the Cart AJAX API and asks the server for the section again.

Nudestix

GA4 ecommerce dataLayer instrumentation across a Rebuy cart

A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.

Three Ships

Size-pill variant picker and quick add-to-cart inside product grids

One click handler, registered once on `document` in the capture phase, turns any grid card with a size-pill row into a variant selector and an add to cart — including cards that did not exist when the page loaded.

Three Ships

Price snippet with a bundle 'value' metafield line and opt-out labelled price links

Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.

Nudestix

Quiz results: a 34-rule, priority-ordered recommendation engine running client-side from metaobject data

The half of the Curl Quiz that turns answers into products. Liquid renders every possible recommendation once into hidden templates; a matcher in the browser runs 34 priority-ordered rules and clones the survivors into three result groups.

LUS Brands

Shoppable-video to cart bridge: Hue add-to-cart event wired into Rebuy's drawer

A document-level listener that turns a shoppable-video app's add-to-cart intent into a real `cart/add.js` call with the cart sections rendered in the same response, then dispatches the theme's own cart events so the drawer, the count badge and every other subscriber update at once.

Three Ships

DOM and shadow-DOM remediation layer for Yotpo, Rebuy and Recharge widgets

Corrections applied to markup the theme didn't write: `MutationObserver` routines that re-level a review widget's headings, demote headings inside a cart drawer, re-anchor a subscription add-to-cart control, and append a stylesheet inside a subscription widget's shadow root — every one re-entrant, so the fix converges instead of looping.

Three Ships

Inline size picker on cart and PDP upsell cards

Size pills added inside the premium theme's own upsell card, so a multi-variant upsell in the cart drawer, on the cart page or in a product-page "pair with" module can be sized and added where it stands instead of sending the shopper somewhere else.

Three Ships

Variant-aware price snippet with percentage + value savings badge

Dawn's price snippet extended so a caller can hand it any variant object ahead of the snippet's own lookup, and so a savings badge — a percentage computed in Liquid plus a merchandiser-written value sentence — renders whenever the compare-at price is higher than the price.

LUS Brands