Passing a value to a section when using the Section Rendering API?

Store Design

Topic summary

A developer is attempting to pass dynamic data (specifically a product handle) to a Shopify section when using the Section Rendering API via JavaScript fetch requests.

Core Issue:

  • The user wants to fetch a section with a URL parameter like ?sections=my-section&handle={{product.handle}} and access that handle value within the rendered section
  • While Liquid variables can be inserted into the fetch URL itself, the challenge is accessing those passed parameters inside the section being rendered

Key Limitation Identified:
According to Shopify’s documentation, the Section Rendering API only allows fetching sections created through theme settings with their existing/default configuration. You cannot pass custom data to dynamically create or render new section instances with different values.

Resolution Status:
The discussion clarifies this is a platform limitation rather than a solvable implementation issue. The API is designed to retrieve sections as they exist in templates with their static settings, not to accept runtime parameters for dynamic rendering.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Is something like this possible? I can get sections, but what I’d like to do is pass some data to it, like a product handle, that I can then access in the section.

Eg:

fetch(`${window.Shopify.routes.root}?sections=my-section&handle=my-product`)
2

Hi @MVS-ONE

Since Liquid is rendered before HTML, CSS, and JavaScript, you can insert Liquid variables in your code. It will look similar to this:

fetch(`${window.Shopify.routes.root}?sections=my-section&handle={{ product.handle }}`)
3

Thanks for the reply! The question was more about how I then access the string inside the section that is rendered.

This:

&handle={{ product.handle }}

works, but I can’t seem to access it within the section that is then rendered.

4

Hi @MVS-ONE ,

Sorry, I don’t really understand your mean. I’m assuming you’re trying to get the HTML of a specific section from a Shopify page.

For example, you want to get specific section on the home page:

const sectionId = 'template--17929141485819__featured_collection'; // REPLACE BY YOUR SECTION ID
fetch(`/?sections=${sectionId}`).then(res => res.text()).then(data => console.log('This is HTML data:', data));

Another example, if you want to get section on product page:

const sectionId = 'template--17929141649659__main' // REPLACE BY YOUR SECTION ID
const productHandle = {{ product.handle | json }}
fetch(`products/${productHandle}/?sections=${sectionId}`).then(res => res.text()).then(data => console.log('This is HTML data:', data));

So the correct path would be:

`your-page-url/sections=${sectionId}`

You can do the same with cart page, collection page,…

Hope this helps.

5

I’m trying to pass data to a section that is loaded with the API, as described in the original question:

Eg; If my index.liquid contains

fetch(`${window.Shopify.routes.root}?sections=my-section&handle={{ product.handle }}`)

How can I access the value of &handle= in my-section.liquid?

6

@MVS-ONE You only need to pass the “sections” value.

Please note that you can only fetch sections created by theme settings.
You cannot pass data to the section to create and render a new one.

This is documentation: https://shopify.dev/docs/api/ajax/section-rendering.

Noted by Shopify:

“You can’t specify section setting values through the Section Rendering API. If a requested section exists in a template, or is statically rendered, then the existing section settings apply. Otherwise, any default values are used.”