Mastering Section Rendering APIs in Shopify Online Store 2.0

Section Rendering APIs is a powerful AJAX API from Shopify that can be used on the storefront to request HTML for any section of your choosing. The biggest advantage of this API is that it allows you to update page content without having to reload the page.

For example, you can use it to:

• Update the cart drawer
• Update collection filters (pagination, infinite loading...)
• Request multiple sections

Request multiple sections

To request the markup of multiple sections, we will fetch a request with the URL of the current storefront and add the parameter ?sections={sectionIds}.

Here, sectionIds are the filenames of the sections in your theme, separated by commas.

For example:

fetch('/?sections=header,footer')

The result will look like this:

{
  "header": "<div id=\"shopify-section-header\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
  "footer": "<div id=\"shopify-section-footer\" class=\"shopify-section\">\n<!-- section content -->\n</div>"
}

You can combine this with the AJAX Cart APIs by adding the sections parameter to the request body:

items: [
  {
   id: 36110175633573,
   quantity: 2
  }
],
sections: "cart-items,cart-header,cart-footer"

The endpoints of the AJAX Cart APIs that can be combined with the query sections are:

• /cart/add
• /cart/change
• /cart/clear
• /cart/update

Request 1 section

To request only one section, we can use the API for requesting multiple sections and pass one sectionId, and the result will be a JSON object.

An alternative way is to use the parameter ?section_id={sectionId} to request only one section, and the result will be the markup text of that section.

Here, sectionId is the filename of the section.

Tips

Static vs dynamic section

To request a static section (a section that has no settings schema, content will always be fixed unless we change the source code of that section), the sectionId that needs to be passed is the filename of that section.

However, with dynamic sections (sections that have settings schema), if we use the filename as the sectionId, we will only request the markup corresponding to the default settings of that section, not the markup corresponding to the current settings.

To request the markup of these dynamic sections, we need to use dynamic sectionId. In Liquid, it is {{ section.id }}.

For example:

<div data-section-id="{{ section.id }}" data-section-type="section-type">
  <!-- section content -->
</div>

The dynamic generated ID will look like this: template--14908088647850__16322847419ca50f50

To request dynamic section markup:

// Async context
let section = document.querySelector('[data-section-type="section-type"]')
let id = section.dataset.id
// Eg: template--14908088647850__16322847419ca50f50
 
let markup = await (await fetch(`?section_id=${id}}`)).text()
console.log(markup)
// Example markup: '<div id=\"template--14908088647850__16322847419ca50f50\">\n<!-- section content -->\n</div>''

Including product context

With the URL above, we can only query the markup of sections on the homepage corresponding to the respective settings. But what if we want to query the section of a product page or collection page (markup will not include information about that product or collection)?

The most common example is querying 1 product card data from the product recommendations / recently viewed product section or querying collection filter data for AJAX loadmore or pagination.

To add product/collection context, simply add to the query URL: /products/product-handle or /collections/collection-handle

Example:

// Async context
 
let collectionMarkup = await await fetch(
  `/collections/fashion/xs?section_id=template--15128665981118__main`
).text()
console.log(collectionMarkup)
// Example markup: '<div id=\"shopify-section-template--15128665981118__main\">\n<!-- section content -->\n</div>''
 
let productMarkup = await await fetch(
  `/products/adidas-classic-backpack?section_id=product-json`
).text()
console.log(productMarkup)
// Example markup: '<div id=\"shopify-section-template--15128665981118__main\">\n<!-- section content -->\n</div>''

Conclusion

Some of you may know an old way to AJAX query markup using alternate template.

However, this method has a disadvantage of having to create multiple templates corresponding to the markup you want to render, and in the Theme Customization of Online Store 2.0, these templates will all appear (while the customer doesn't care - the theme will look quite messy).

With the Section rendering API, customers will not need to care about those sections, the sections will be rendered with product/collection context or corresponding settings (just need to pass the correct sectionId).

The above is the entire way to use Section Rendering APIs and tips that I have learned, hope it will be useful to you.

Happy sharing