Short description of issue
The visual preview mode generate invalid ID
Reproduction steps
When using the visual editor mode to preview a section, Shopify generates unique ID. We realized the preview was completely incorrect. After inspecting the iframe, I realized that Shopify is generating dynamically section ID apparently in base 64, which ends by ==, which is an invalid ID.
As a consequence, all the CSS properties or custom CSS applied using the section ID won’t match due to the invalid ID.
Shopify should therefore ensure that only valid characters are used for the ID generation.
Additional info
N/A
What type of topic is this
Bug report
Upload screenshot(s) of issue
Hey @bakura10, we’ve had this reported previously here: In Liquid sections, section.id may contain equals symbols breaking CSS selectors (in editor section preview)
I looked in to this and it hasn’t been resolved yet. I recommend following that thread for updates on when it is resolved.
Thanks @KyleG-Shopify ,
Could this be somehow prioritized? It’s been a long time since it has been reported, this sounds like a really simple fix to do (especially since ID generated outside the visual preview are working nice, so you already have the logic in place to generate compliant ID). This bug is breaking all our previews, leading to really bad user experience here :(.
1 Like
