Section rendering API

Ask any storefront URL for sections instead of the whole page. The sections render exactly as they would on that page, with its product, collection, filters and language.

One section, as HTML

const html = await (await fetch(`/collections/abayas?filter.p.vendor=Layla&section_id=template--grid`)).text();

Up to five, as JSON

const res = await fetch(`/products/linen-abaya?sections=template--main,cart-drawer`);
const { "template--main": main, "cart-drawer": drawer } = await res.json();

A section that doesn’t exist comes back as null.

Section IDs

ID	Renders
template--<key>	The section <key> of the page’s JSON template (template--main).
sections--<group>__<key>	A section of a section group (sections--header-group__header).
<file>	sections/<file>.liquid with its default settings (cart-drawer).

The ID of every rendered section is in its wrapper (id="shopify-section-template--main"), so you can read it from the page.

Typical uses

• Filters and sorting: fetch the collection URL with the new filters and section_id=template--grid, swap the grid, and history.replaceState the URL.
• Cart drawer: after the cart API, re-render the drawer and the header.
• Variant changes: fetch ?variant=<id>&section_id=template--main to update price, stock and images together.
• Recommendations: /recommendations/products?product_id=<id>&limit=4&section_id=related-products renders a section with recommendations.