You can use the Section Rendering API to request the HTML markup for theme sections using an AJAX request. This can allow you to update page content without reloading the entire page by fetching and dynamically replacing only certain elements.
For example, you can use the Section Rendering API to paginate search results without performing a full page reload between pages.
> Tip:
> If you want to use the Section Rendering API to update a page based on changes to the cart, then you should consider [bundled section rendering](/docs/api/ajax/reference/cart#bundled-section-rendering).
## Request sections
You can use the `sections` query parameter to render up to five sections, identified by their [section IDs](#find-section-ids). The response is a JSON object that includes pairs for each section ID and its corresponding rendered HTML.
The `sections` parameter can be a comma-separated list of IDs or an array:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="text">
?sections=main-password-header,sections--1234__header
?sections[]=main-password-header§ions[]=sections--1234__header
</script>
</div>
</p>
Sections can be rendered in the context of any page by appending the `sections` parameter to any page URL. For example, you can request `/?sections=sections--1234__header` for the root page, or you can request `/collections/featured?sections=sections--1234__header` for a featured collection page.
> Note:
> You can't specify section setting values through the Section Rendering API. If a requested section exists in a template, or is statically rendered, then the existing section settings apply. Otherwise, any default values are used.
The following example code requests two sections using a JavaScript `XMLHttpRequest`:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="js">
function handleResponse() {
JSON.parse(this.responseText);
}
const request = new XMLHttpRequest();
request.addEventListener('load', handleResponse);
request.open('GET', '/?sections=main-password-header,sections--1234__header', true);
request.send();
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="Response text"></script>
<script type="text/plain" data-language="json">
{
"header":"<div id=\"shopify-section-main-password-header\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
"footer":"<div id=\"shopify-section-sections--1234__header\" class=\"shopify-section shopify-section-group-header-group\">\n<!-- section content -->\n</div>"
}
</script>
</div>
</p>
> Tip:
> Any query parameters that are respected when rendering the full page, such as `q` or `page`, are also respected when sections are rendered.
### Sections error response
Sections that fail to render, including those that fail because they do not exist for the published theme, are returned as `null` in the JSON response. A response might have an HTTP 200 status, but still include one or more sections that failed to render. Because of this, you should account for the possibility of `null` sections.
## Request a single section
You can use the `sections` parameter and its JSON response in most cases, including rendering a single section. As an alternative, you can use the `section_id` query parameter to request a single section.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="text">
?section_id=main-password-header
</script>
</div>
</p>
Sections rendered in response to the `section_id` query parameter are returned directly as HTML and, like `sections`, this parameter can be used to render a section in the context of any page.
> Note:
> You can't specify section setting values through the Section Rendering API. If a requested section exists in a template, or is statically rendered, then the existing section settings apply. Otherwise, any default values are used.
### Single section error response
If the requested section ID doesn’t exist on the theme, then the server responds with a `404` status.
## Find section IDs
You can access a section ID in two ways:
- Through the Liquid [`section` object](/docs/api/liquid/objects/section), using `section.id`
- [Extract it](#extract-a-section-id-from-the-wrapper) from the ID attribute of the section wrapper
> Tip:
> If you want to reference a statically rendered section, then the section ID is the file name. For example, if you had a `social.liquid` section, then the ID would be `social`.
### Extract a section ID from the wrapper
You can extract a section ID from the ID attribute of the section wrapper. For example, the following is the general format for a section wrapper:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Section wrapper format"></script>
<script type="text/plain" data-language="html">
<div id="shopify-section-[section-id]" class="shopify-section">
<!-- section content -->
</div>
</script>
</div>
</p>
If a section is included in a [JSON template](/docs/storefronts/themes/architecture/templates/json-templates) or a [section group](/docs/storefronts/themes/architecture/section-groups), then it's assigned a dynamic section ID. Dynamic section IDs ensure no two sections of the same type have the same ID.
For example, a section inside of a section group might have an ID of `sections--1234__header`, and a section inside of a JSON template might have an ID of `template--5678__image_banner`.
## Locale-aware URLs
Stores can have [dynamic URLs](/docs/storefronts/themes/markets/multiple-currencies-languages#locale-aware-urls) generated for them when they sell internationally or in multiple languages. When using the Section Rendering API, it’s important to use dynamic, locale-aware URLs so that you can give visitors a consistent experience for the language and country that they’ve chosen.
The global value `window.Shopify.routes.root` is available to use as a base when building locale-aware URLs in JavaScript:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Loading a section in the context of the root"></script>
<script type="text/plain" data-language="javascript">
fetch(window.Shopify.routes.root + "?sections={section-id}")
.then(res => res.json())
</script>
</div>
</p>
Alternatively, a section can be loaded in the context of the current page by using [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) as a base:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Loading a section in the context of the current page"></script>
<script type="text/plain" data-language="javascript">
fetch(window.location.pathname + "?sections={section-id}")
.then(res => res.json())
</script>
</div>
</p>