logo
Shopify Builds>Primitives>Cart AJAX API

Cart AJAX API

Definition

The Cart AJAX API is a set of storefront routes, /cart/add.js, /cart/change.js, /cart/update.js and /cart.js, that read and mutate the current cart and answer with JSON. Every Shopify storefront exposes them with no app and no access token. It is the mechanism behind any add-to-cart that doesn't reload the page.

Documented at shopify.dev, the Cart AJAX API.

How We've Used It

It's the transport under most of what we build around a cart. A grid card, a sticky bar, a bundle builder and a drawer all post to the same route, so we standardize the call rather than the button: paths read from Shopify's routes object, one add path every component shares, and section ids on the request so the drawer and the cart bubble come back rendered. Bundles ride it too, one line per component, picks attached as properties. The hard part is never the POST. It's everything else on the page that has to hear about it: loyalty widgets, installment messaging, analytics, a third-party drawer keeping its own copy of the cart.

Builds Using It

31 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

'Bundle and save' PDP block driven by a product-list metafield

One product-list metafield, one card per product, and on every card a working add-to-cart form of its own — a merchandiser-curated set sold on the product page where the shopper already is, with a carousel that only appears when there is more than one thing to scroll.

LUS Brands

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

Tabbed collection product slider and the shared merchandising card

One section renders every configured collection at once and switches between them with a class, so moving from Serums to Cleansers waits on nothing — and one card snippet backs the shelf, the blog and the rewards page.

Three Ships

Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag

A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.

LUS Brands

Featured-collection product card with metafield hero/hover media and a tag-driven badge stack

The card that renders inside the homepage's main merchandising rail: hero and hover art chosen in the Shopify admin, a responsive image ladder built by hand, and a badge stack resolved from tags, price and block settings at render time.

LUS Brands

Featured tutorial with an adjacent shoppable product rail

One section, two halves: a poster-first video that fetches its YouTube or Vimeo player only on click, and beside it the first three products of whichever collection a merchandiser picks — each one a real card with a quick view and an add to bag that never leaves the page.

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

Landing-page hero sections with a no-JS add-to-cart on page templates

A hero kit for standalone campaign pages: per-breakpoint artwork and text placement in repeatable blocks, and a CTA that can be a real Liquid product form on a template where Shopify hands the theme no product at all.

Three Ships

Mega-menu header with separate mobile menu and image blocks

A second link-list setting gives the mobile drawer its own information architecture, and section blocks put imagery into panels that Shopify's link lists have no way to carry it in.

Three Ships

Mobile sticky add-to-cart bar mirrored from the real product form

A bottom bar portaled to `<body>` that mirrors quantity, button label, disabled and loading state from the product page's own form, forwards taps into it, and follows iOS Safari's visual viewport as the browser chrome collapses.

LUS Brands

"Save With Sets": shade-selectable kit contents on the component product's page

A metafield-linked list of kits renders as an accordion on the product pages of the products inside them, and each kit opens a modal where every component gets its own shade picker before a single add-to-bag.

Nudestix

Product card with award badges, per-variant content payload and per-card structured data

One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.

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

Subscription bundle grid with tiered unlock progress

Two custom elements on the subscription landing page: a card whose two-step button reveals a frequency choice and then posts the variant with that `selling_plan` to the cart, and a wrapper that fetches the live cart after every add and drives a merchandiser-defined tier bar from what it finds there.

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

Shade-level collection grid hydrated from an external faceting service

A Shopify collection template that lists shades instead of products: the section renders an empty grid shell, then builds every card, facet and count in the browser from a bespoke faceting service outside the theme.

Nudestix

Eight WebMCP tools that make a product page answerable — and buyable — by a browser agent

A feature-detected block in the theme layout registers eight `navigator.modelContext` tools on one trial-kit product page — seven an agent can read from, one that adds a Liquid-fixed variant to the cart.

Three Ships