I wanted to share a solution I discovered that might help others. I’m using the Ride theme from Shopify (a free theme), and I found that its logic is quite similar to what’s shown in the video, so I was able to implement the fix easily.
In my case however, I wanted the selected variant to appear first when:
-
A variant is selected by default using the ?variant= URL parameter, or
-
You refresh the page after selecting a variant.
Instead of commenting out the initial section like in the video, I wrapped it in this condition:
{%- if product.selected_variant -%}
Additionally, I added this JavaScript snippet at the bottom of the file to unselect the first available variant if no variant is pre-selected when the page loads:
{%- unless product.selected_variant -%}
{%- endunless -%}
For this JavaScript to work, I added a class to the under {%- elsif picker_type == ‘button’ -%} in product-variant-options.liquid:
option-{{ option.name | handleize }}
This allows the script to specifically target and unselect the color option. It also helps to have the color option listed first in your product options (you can arrange this in the product admin).
Hope this helps someone else out there!