When in the Shopify Theme Editor, otherwise known as being in “Design Mode”, Shopify injects additional attributes to templated HTML elements, where they contain liquid output. This is applied for the purpose of binding elements to their associated theme-based output and support dynamic rendering of values and a real-time output effect of the Theme Editor.
However, when the template is parsed and appended with these additional attributes, the parser is not recognizing whether an element sits inside of a {% raw %} ... {% endraw %} pair, in which case the output of the injected liquid template syntax may:
- Be visible to consumers
- Break client-side templating with LiquidJS, Handlebars, Mustache, etc
- Throw JavaScript errors which prevent the merchants ability to manage their site within the theme editor
This seems to be after some recent changes (within the last week) based on my own observations, but have no evidence to support this. Currently this only affects the output while using the Theme Editor, but should be evaluated and solved in this context with foresight into future, consumer-facing dynamic output of liquid not templated by the merchant or developer. With Markets and Contexts being top of mind, and what changes may be coming to modify output dynamically, this is particularly concerning.
What do you think, fam?
