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

Store Design
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.”