Section Rendering API

You can use the Section Rendering API to request the HTML markup of a single theme section through an AJAX request. This lets you update page content by fetching only partial elements of a page instead of reloading it entirely. 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 section_id URL parameter, along with the section ID, to render a section in the context of any page. The following is an example JavaScript snippet to request a section, and the generated response:

Example

request = new XMLHttpRequest();
request.open('GET', '/?section_id=[section-id]', true);
request.send();
request.responseText;

Response

<div id="shopify-section-[section-id]" class="shopify-section">
  <!-- section content -->
</div>

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:

Section wrapper format

<div id="shopify-section-[section-id]" class="shopify-section">
  <!-- section content -->
</div>