Section Rendering API

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.

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.

The sections parameter can be a comma-separated list of IDs or an array:

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=header for the root page, or you can request /collections/featured?sections=header for a featured collection page.

The following example code requests two sections using a JavaScript XMLHttpRequest:

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.

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.

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:

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: