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.

Requesting sections

You can request a section in the context of any page by using the section_id parameter. When you append the section_id to any page on the storefront, it's rendered in the context of that page. Any query parameters (such as q= or page=) that are respected when rendering the full page are also respected when the section is rendered.

Query parameters

section_id (required): ID of the section to be rendered.

Example request

JavaScript example:

request = new XMLHttpRequest()
request.open('GET', ‘/?section_id=social’, true)
request.send()
request.responseText

Response:

<div id="shopify-section-social" class="shopify-section social-1">
  [content of the section]
</div>

Error response

If the requested section ID doesn’t exist on the theme, then the server responds with a 404 status.

Finding specific section IDs

The way to find a specific section ID depends on whether you're looking for a static section or a dynamic section.

Static sections

The ID for a static section is the name of the section file. If you need to render sections/social.liquid, then you can request /?section_id=social.

Dynamic sections

The ID for dynamic sections is available as section.id in Liquid. You can also extract the section ID from the id attribute of the div tag that wraps a section when it's rendered on the home page (for example, <div id=”shopify-section-[id]”>).

Ready to start selling with Shopify?

Try it free