Shopify Section Rendering API: Update Sections Without a Reload

The Shopify Section Rendering API lets you refresh one section of a page without a full reload. It powers cart drawers, quick filters and live product options on many themes. This guide shows how the endpoint works and how to use it safely.

How the Shopify Section Rendering API Works

The Shopify Section Rendering API works through a sections query parameter you add to any storefront URL, and Shopify returns the rendered HTML for just those sections instead of the full page. You can request one section or several at once, separated by commas.

/?sections=cart-drawer,announcement-bar

The response is a JSON object where each key is a section ID and each value is that section’s rendered HTML string. This means you still get real Liquid output, not a separate API format to maintain.

Fetch one or more sections

Call the Shopify Section Rendering API endpoint with fetch, then parse the JSON response. Each property holds a full HTML string for that section.

async function refreshCart() {
  const res = await fetch(`${window.location.pathname}?sections=cart-drawer`);
  const data = await res.json();
  return data['cart-drawer'];
}

Request only the sections you actually need to update. Every extra section adds server render time, so a large request list slows down what should feel instant.

Swap the HTML into the page

Parse the returned HTML, then replace just the inner content of the target element. Replacing only the content, not the whole page, keeps unrelated event listeners and page state intact.

function renderSection(html, targetSelector) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const fresh = doc.querySelector(targetSelector);
  const current = document.querySelector(targetSelector);
  if (fresh && current) {
    current.replaceWith(fresh);
  }
}

Common use cases

• Updating a cart drawer after adding a product, without leaving the page.
• Refreshing filtered collection results after a customer changes a facet.
• Swapping product media and price after a variant change on a quick view modal.

Each case follows the same shape: fetch the section, then replace it in place. The difference is only which section ID you request and when you trigger the fetch.

Pitfalls to avoid

A script tag inside the new HTML does not run automatically when inserted this way. If a section depends on JavaScript that runs on page load, re-run that setup code manually after the swap, or move it to an event you dispatch yourself.

Also, a section only responds to this endpoint if it is rendered directly in the current template, or included through an app block or a section group. A section nested only inside a snippet without its own section wrapper cannot be targeted this way.

Finally, avoid requesting sections on every keystroke in a live search box. Debounce the calls, since each request is a full server render, and a lean template helps here too, per Shopify Liquid performance.

For the complete parameter list and response format, see the Shopify Section Rendering API documentation.

Related reading: if partial updates are pushing you toward a rebuild, read Shopify Hydrogen vs Liquid.

FAQ about the Shopify Section Rendering API

Does this work with JSON templates? Yes, as long as the section is part of the current template or a section group.

Can I request a section that is not on the current page? No. The section must render as part of the current template to be returned.

Is this the same as the Storefront API? No. It reuses your theme’s own Liquid rendering, so styling stays consistent automatically.

Related: Shopify’s Liquid July 2026 preview adds a tag for this pattern. See Shopify Liquid Block and Partial Tags.