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.
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
page=) that are respected when rendering the full page are also respected when the section is rendered.
section_id (required): ID of the section to be rendered.
request = new XMLHttpRequest() request.open('GET', ‘/?section_id=social’, true) request.send() request.responseText
<div id="shopify-section-social" class="shopify-section social-1"> [content of the section] </div>
If the requested section ID doesn’t exist on the theme, then the server responds with a
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.
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
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,