Liquid Generating Different HTML for Variants Depending on Whether It Has An Id or Class Attribute

[BigRavenYoga]

We’re running into a weird issue in a Minimal theme when it comes to generating product variants…

The first (original, unmodified Minimal) example generates one kind of HTML, and the second a completely different kind of HTML. The first example completely ignores everything that we’ve put in the loop and generates its own values (plus a label), while the second appears to use what we’ve put in the loop and does not generate a label.

By all appearances, if the element contains an id or class attribute, Shopify’s Liquid ignores everything in the loop and just does what it wants; the loop can even be removed completely and it will still generate all of the necessary option elements. Can anyone confirm or deny this or shed any light onto what’s going on? Example 1 (from the original Minimal theme) The above generates the following HTML. Note the unrequested “selector-wrapper” div, the unrequested label element, and two (2) select elements, the first of which is visible and the second of which is forced hidden but matches the code in our templated loop. Everything inside the “selector-wrapper” div is unasked-for and automatically generated, while what we actually want displayed is styled with “display:none”: Example 2 (identical, but with id and class attributes removed from element)

This generates different HTML — no “selector-wrapper” div, and our templated select element does NOT have “display: none” forced on it:

Adding any attribute to the element in our template triggers the autogenerate of the “selector-wrapper” div. Does anyone know what’s going on? (Upon further reflection…I wonder if the JS used by Minimalist to manage the main image switch when a different variant is selected isn’t modifying the DOM to add the extra select wrapper and hiding the generated one? The main image switch stops working if I remove the select ID/class attributes…)