Shopify themes, liquid, logos, and UX
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`)
Solved! Go to the solution
This is an accepted solution.
@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."
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 }}`)
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.
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.
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?
This is an accepted solution.
@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."
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025