Section rendering

You can get one or more sections of any storefront page without the rest of the page. Use this to update part of a page after a change, for example a cart drawer after an item is added, or a product section after a variant change, without a full page load.

Each section is rendered in the context of the page URL, with the same product, collection, cart and request objects as the full page.

One section

Add section_id to the page URL. You get the section HTML, with its wrapper element.

const html = await fetch(`${window.location.pathname}?section_id=header`).then(r => r.text());

Several sections

Add sections with a comma-separated list of up to 5 ids. You get a JSON object with each id and its HTML.

const sections = await fetch('/cart?sections=cart-drawer,header').then(r => r.json());

document.querySelector('#youcan-section--header').outerHTML = sections.header;

{
  "cart-drawer": "<section id=\"youcan-section--cart-drawer\" class=\"youcan-section\">...</section>",
  "header": "<section id=\"youcan-section--header\" class=\"youcan-section\">...</section>"
}

Section ids

• For a section in the page's JSON template, use its id from the template.
• For a section that you render with the section tag in a layout, use its file name, for example header for sections/header.liquid.

If an id does not match a section, its value is null with sections, and you get a 404 with section_id. If a section has a Liquid error, the error is shown in place. See Errors.