How can I create unique sections in Turbo theme?

[biznazz101]

Hello, I am working on a store using turbo theme and the only real way to add theme sections is by using code, it has been working overall, but on some pages that have multiple of the same section type (ex: 2+ featured collection sections on one page) they cannot be individually edited despite new sections being created and assigned in theme code. If you edit one it edits all of them on the page.

I have had similar issues with custom HTML sections displaying at the top of page regardless of section order in theme code, and automatically absorbing other sections so when you hover over say a “featured product” section it shows “Custom HTML” instead and cannot be adjusted individually.

I have tried different solutions and gone through theme documentation without any luck, if anyone can help that would be great!

I need to be able to create more than one of the same section to pages, each with unique settings/content, how can this be done in turbo?

[suyash1]

@biznazz101 - it can be done either by code customization like you are doing it right now, or please use some page builder app like pagefly

[PaulNewton]

Those are static section references so all settings are shared when the same section is reused multiple times in a page. Which is useful for repeated configurable content such as a testimonial callouts, cta’s ,etc.

For modern sanity convert to a JSON template, otherwise each static section needs to be a UNIQUE section file/name

https://shopify.dev/docs/themes/architecture/sections

For much more advanced vintage workarounds you’ll have to research dynamic sections workarounds. Where basically it’s building MORE internal and setting logic into the section to get the individual behavior per output; such as setting for which pages it would work in.

Or use the section rendering api and do the actual dynamic part on the front end with javascript.