How many sections can I request in one Section Rendering API call?

Shopify allows up to 25 sections per request. In practice, most cart update flows need 2-4 sections: cart drawer, cart icon bubble, and optionally recommendation sections or inventory status. Requesting more than needed wastes server resources — only include sections that actually need updating.

Why does the Section Rendering API use section file names, not section IDs?

Section file names (the .liquid filename without extension) are the identifier for the Section Rendering API because they are stable — they do not change when merchants rearrange sections on a page. Section IDs (section.id) are instance identifiers — they uniquely identify a specific placement of a section on a page. For the API, you want to specify which section type to render, not which instance, so file names are used.

Can I use the Section Rendering API on the cart page or only on the storefront?

The Section Rendering API works on any Shopify storefront URL: product pages (/products/handle?sections=...), collection pages (/collections/handle?sections=...), the cart page (/cart?sections=...), the home page (/?sections=...), and custom page templates (/pages/handle?sections=...). It is not available on checkout pages, account pages, or the Shopify admin.

javascriptMarch 22, 2026

Shopify Section Rendering API — Update 5 Sections With One AJAX Request

The traditional approach to updating Shopify UI after a cart action involves fetching JSON data, building HTML in JavaScript, and injecting it into the DOM. This approach requires maintaining two separate templates: one Liquid template for initial server render and one JavaScript template for dynamic updates. The Section Rendering API eliminates this duplication — you request Shopify to re-render specific sections with updated data, and receive ready-to-inject HTML. One request can update a cart drawer, a cart icon bubble, and a recommendation section simultaneously.

How the Section Rendering API works

Any Shopify URL can render specific sections by appending a sections query parameter: /cart?sections=cart-drawer,cart-icon-bubble. Shopify renders each listed section (identified by their filename in the sections/ directory without the .liquid extension) with the current cart/page context and returns a JSON object where each key is a section ID and each value is the rendered HTML string. You inject this HTML directly into the existing section wrapper using innerHTML or outerHTML.

Rendering sections after cart modifications

After a cart/add.js or cart/change.js call, fetch updated sections: fetch('/cart?sections=cart-drawer,cart-icon-bubble,predictive-search-results').then(r => r.json()).then(sections => { document.querySelector('#shopify-section-cart-drawer').innerHTML = sections['cart-drawer']; document.querySelector('#cart-bubble-count').outerHTML = sections['cart-icon-bubble']; }). The section IDs in the URL must match the filenames in your sections/ directory. Shopify renders them with the latest cart state.

Bundled Section Rendering for multiple section types

You can request up to 25 sections in a single URL. For variant changes on a product page, re-render all variant-dependent content: fetch(`${window.location.pathname}?variant=${variantId}&sections=main-product,product-recommendations,predictive-inventory`). This is significantly more efficient than multiple AJAX requests and ensures all variant-dependent sections update atomically from the same server state.

Avoiding double event binding after section re-renders

When you inject new HTML from Section Rendering API, any Web Components inside it are re-instantiated by the browser. This correctly re-runs connectedCallback and re-binds all event listeners. However, if you are using traditional addEventListener calls on sections (not Web Components), you must be careful to remove listeners before replacing innerHTML, or attach listeners via event delegation on a stable parent element.

The fix: before and after

// CODE_COMPARISON

// BAD_CODE — before

1// BAD: fetch cart JSON, build HTML manually in JavaScript

2// Requires maintaining two separate templates

3fetch('/cart.js')

4 .then(r => r.json())

5 .then(cart => {

6 const html = cart.items.map(item => `

7 <div class="cart-item">

8 <img src="${item.image}">

9 <span>${item.title}</span>

10 <span>${item.price}</span>

11 </div>

12 `).join('');

13 // This HTML is different from the Liquid version — two templates to maintain

14 document.querySelector('.cart-items').innerHTML = html;

15 });

// SYPHIO_FIXED — after

1// GOOD: Section Rendering API — server renders Liquid, zero HTML in JS

2async function updateCartSections() {

3 const sectionsParam = 'cart-drawer,cart-icon-bubble';

4 const response = await fetch(`/cart?sections=${sectionsParam}`);

5 const sections = await response.json();

7 // Inject server-rendered HTML — no template duplication

8 const cartDrawer = document.querySelector('#shopify-section-cart-drawer');

9 if (cartDrawer) cartDrawer.innerHTML = sections['cart-drawer'];

11 const cartBubble = document.querySelector('#cart-bubble');

12 if (cartBubble) cartBubble.outerHTML = sections['cart-icon-bubble'];

13}

15// Use after any cart modification

16fetch('/cart/add.js', { method: 'POST', ... })

17 .then(() => updateCartSections());

Frequently asked questions

How many sections can I request in one Section Rendering API call?: Shopify allows up to 25 sections per request. In practice, most cart update flows need 2-4 sections: cart drawer, cart icon bubble, and optionally recommendation sections or inventory status. Requesting more than needed wastes server resources — only include sections that actually need updating.
Why does the Section Rendering API use section file names, not section IDs?: Section file names (the .liquid filename without extension) are the identifier for the Section Rendering API because they are stable — they do not change when merchants rearrange sections on a page. Section IDs (section.id) are instance identifiers — they uniquely identify a specific placement of a section on a page. For the API, you want to specify which section type to render, not which instance, so file names are used.
Can I use the Section Rendering API on the cart page or only on the storefront?: The Section Rendering API works on any Shopify storefront URL: product pages (/products/handle?sections=...), collection pages (/collections/handle?sections=...), the cart page (/cart?sections=...), the home page (/?sections=...), and custom page templates (/pages/handle?sections=...). It is not available on checkout pages, account pages, or the Shopify admin.

// SCAN_YOUR_CODE

Does your theme have this bug?

Paste your code. Syphio automatically detects and fixes this error and hundreds of others — in seconds.

Check my JavaScript →

Shopify Theme Memory Leaks — disconnectedCallback Is Not Optional→Never Use innerHTML += in Shopify — It Serializes the Entire DOM on Every Call→Liquid Variables Don't Work Inside {% javascript %} Tags — Here's Why and the Fix→