---
url: https://developer.youcan.shop/themes/sections/section-rendering.md
---
# 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.

```js
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.

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

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

```json
{
  "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](/themes/templates/json-templates), use its id from the template.
* For a section that you render with the [section tag](/themes/tags/section) 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](/themes/liquid/overview#errors).