How to use Shopify Section Rendering API to load Dynamic Sections
Shopify Section Rendering API is a powerful tool that allows you to load dynamic sections on your store. This article will show you how to use it to create a custom section that can be loaded on any page of your store.
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.
How to Request sections
You can use the sections query parameter to render up to five sections, identified by their section IDs. The response is a JSON object that includes pairs for each section ID and its corresponding rendered HTML.
Example:
?sections=main-password-header,sections--1234__header
?sections[]=main-password-header§ions[]=sections--1234__headerSections 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.
The following example code requests two sections using a JavaScript:
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();Response:
{
"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>"
}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.
How to Request a single section
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.
If the requested section ID doesn’t exist on the theme, then the server responds with a 404 status.
How to Find Section IDs
You can access a section ID in two ways:
- Through the Liquid section object, using section.id
- Extract it from the ID attribute of the section 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:
<div id="shopify-section-[section-id]" class="shopify-section">
<?-- section content -->
</div>If a section is included in a JSON template or a section group, then it's assigned a dynamic section ID. Dynamic section IDs ensure no two sections of the same type have the same ID.
I hope this article has been helpful in showing you how to use the Section Rendering API to create custom sections on your store. Please share it with your friends. Thank you for reading and happy coding?!
