I’m currently working on a Shopify theme and have encountered an issue where section.index is not recognized within the Theme Customizer. This is causing problems when dynamically referencing sections in my Liquid code.
It works perfectly on the live store but returns nothing (or behaves unpredictably) in the Theme Customizer. This makes it difficult to debug or preview the output while designing.
Questions:
Is this behavior expected in the Theme Customizer, or is it a bug that needs to be reported to Shopify?
Are there any known workarounds to make section.index usable in the Theme Customizer except reverse logic?
Any insights or shared experiences would be greatly appreciated. Thanks in advance!
Thanks for raising this! To answer your first question, this is an expected behaviour in the theme customizer and is mentioned in the docs here: Liquid objects
Only use this for non-display use cases like web performance. Because of various limitations, the index property returns nil in the following contexts:
When rendered as a static section
While rendering in the online store editor
When using the Section Rendering API
As for the workaround I’m not sure unfortunately but hoping someone can chime on that
Thanks for clarifying and pointing me to the documentation! It makes sense now why section.index doesn’t behave as expected in those contexts. It’s good to know this is intentional, though it does make certain dynamic setups trickier to manage.
For a workaround, I’ll explore some alternative approaches, like using id or custom properties passed to the section schema. If anyone has successfully implemented a solution, I’d love to hear your suggestions!