logo
Shopify Builds>Primitives>Section Rendering API

Section Rendering API

Definition

The Section Rendering API lets a storefront request the rendered HTML of a single theme section instead of a whole page. Any URL accepts a sections parameter naming section ids, and Shopify returns their markup as JSON. The section renders server-side through the same Liquid, so the response reflects current cart, variant, filter and locale state without the theme duplicating that logic in JavaScript.

Documented at https://shopify.dev/docs/api/ajax/section-rendering.

How we've used it

It's the load-bearing primitive for anything that changes without a page load, and three patterns recur. Carts: every mutation returns a re-rendered drawer, total and cart icon, so line items, price rules, subscription labels and threshold messaging stay Liquid's job instead of being reimplemented client-side. Collections: a facet change or a load-more request fetches the grid section and the theme swaps the returned node in place, which keeps pagination counts and merchandiser-placed promo tiles correct. Product pages: a variant change refetches the buy box so price, availability and variant-scoped copy come back rendered rather than assembled from JSON. The recurring cost is re-initialization — a replaced node loses its listeners, sliders and third-party widgets — so every one of these builds carries an explicit re-bind step after the swap.

Builds using it

26 further gated builds use it; their pages follow.

Related entities

Cart AJAX API · Storefront filtering · Theme sections · Custom elements · Metafields

Builds

Alt-text driven variant media gallery with tiered matching and full-screen lightbox

The product gallery that consumes the alt-text match tiers: it builds the main slider, the thumbnail rail and a full-screen lightbox out of server-side verdicts, then re-filters the same nodes in the browser when the shopper changes variant.

LUS Brands

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

Collection grid card on a licensed theme: metafield merchandising, a badge precedence chain, a hover-swap swatch element and first-row loading hints

Palo Alto's grid item extended so the card's title, strapline, cutline and badge come from product metafields, badges resolve in one fixed order, color options become a swatch element that swaps the card image on hover, and column classes are computed from whatever section happens to be calling.

Three Ships

Collapsible desktop filter sidebar that reflows the product grid instead of squeezing it

Toggling the vertical filter rail switches the collection grid between four columns and three, keeps that choice for the browsing session, and re-applies it every time the facet pipeline replaces the grid wholesale.

LUS Brands

Main collection grid: merchandisable promo tiles, load-more and a filter blocklist

Dawn's collection grid extended in four directions: promo tiles a merchandiser places by grid position, a textarea that suppresses unwanted filter values, load-more over the Section Rendering API, and an infinite-scroll fallback.

Nudestix

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

Dawn media gallery hardened for hidden slides and deferred video

A surgical patch to Dawn's `media-gallery` custom element so that selecting, reordering and announcing media all skip slides the server has hidden for the current variant — and so a variant with no matching thumbnail degrades to a sensible slide instead of an exception.

LUS Brands

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

Rebuilt 2026 PDP section with merchandiser-composable blocks and per-product ATC color

A custom product section for LUS Brands that declares 26 block types beyond Dawn's set, resolves title and subtitle copy per variant, and paints the add-to-cart button from a product metafield.

LUS Brands

Configurable PDP block system on the Palo Alto theme (Recharge widget placement, size charts, siblings, quick view)

Merchandiser-orderable buy-box blocks on Three Ships' licensed theme, with the subscription app block captured and re-emitted inside the buy box, plus metafield-driven size charts, a product-family switcher and a sticky add-to-cart bar.

Three Ships

Variant-aware PDP hero banner driven by a 'heroic' metaobject

An editorial hero below the buy box that resolves its art, headline and copy from a per-variant metaobject, and refetches its own content through the Section Rendering API when the shopper switches variant.

LUS Brands

Side-by-side product comparison drawer and modal table

A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.

Nudestix

Metafield-driven product information tabs with mobile accordion and variant refresh

How To, Ingredients, FAQs and Tips render below the buy box from metafields — as tabs on desktop, as a native accordion on mobile, and re-resolved from the server every time a shopper picks a different variant.

LUS Brands

Tabbed multi-type search results page with faceted filtering

One query, three kinds of answer: a search section that counts products, articles and pages before it renders any of them, tabs between them, and keeps a set of SKUs out of the grid entirely.

Three Ships

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

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

Vertical filter rail and an in-place mobile filter accordion replacing Dawn's drill-down drawer

Dawn's facets snippet was rebuilt into a sidebar rail with color swatches and show-more truncation, an accordion mobile drawer where every group opens in place, and a single sort control that physically relocates between breakpoints.

LUS Brands