---
title: 'Mastering Section Rendering APIs in Shopify Online Store 2.0'
date: '2021-09-23'
tags: ['shopify', 'section', 'section-rendering-apis', 'key-notes']
summary: "Learn how to leverage Section Rendering APIs to improve your Shopify store's performance and create dynamic, context-specific sections. Discover tips for querying dynamic section markup, including product and collection context"
images:
  [
    '/static/images/banners/aerial-nature-photography-of-green-palms-on-seashore-during-daytime__reallynattu__atSUvc1hMwk.jpeg',
  ]
authors: ['default']
---

**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:

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

The result will look like this:

```json showLineNumbers
{
  "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:

```js showLineNumbers
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

#### <Twemoji emoji="keycap-1" /> 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:

```html:section-type.liquid showLineNumbers
<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:

```js showLineNumbers
// 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>''
```

#### <Twemoji emoji="keycap-2" /> 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:

```js showLineNumbers
// 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](https://www.shopify.com/partners/blog/shopify-alternate-templates).

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).

![alternate-template-os-2](/static/images/alternate-template-os-2.png)

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 <Twemoji emoji="clinking-beer-mugs" />
