Freely select the position of a products default variant in button list / dropdown

[swduerre]

Describe the enhancement you'd like
When calling a product page, the first variant is always preselected. I would like to freely choose where this variant is placed in order to have an ordered list of variants presented to my customer.

e.g
I have a product that has different sizes and I don't want to have the smallest size selected by default, I have no choice but to display the available variants in an unordered way.

[PaulNewton]

In what way is this not solvable by merchants changing the variant display order in the shopify product admin?
https://help.shopify.com/en/manual/products/variants/edit-variants#change-the-display-order-of-options

Even if variant reordering isn't approachable in some cases this seems an overly specific type of customization with a narrow audience best left to a custom alternative template for specific merchant business requirements and not a base template in the reference theme meant for a downstream general audience. That also creates this setting for EVERY product and not just one offs that probably be better suited by a dynamic source per product metafield definitions.

There's also whether such a solution should be trying to use an index, or presorting the variants instead of using an index, and to avoid. And alternatively if the actual source order should be left alone completely instead electing to use CSS to reposition such needs to the top of it's element list à la stick headers. Along with trying to avoid code duplication in the current pull request.

Further, per the pull request , beware that variant.selected, default variants , and first available variant are very different concepts. variant.select is dictated by the ?variant= url parameter so in choosing to ignore that state of the users browser that can be creating bugs or future inflexibility.

https://shopify.dev/api/liquid/objects/product#product-selected_variant
https://shopify.dev/api/liquid/objects/product#product-first_available_variant
https://shopify.dev/api/liquid/objects/variant#variant-selected
https://shopify.dev/api/liquid/objects/product_option#product_option-selected_value

https://shopify.dev/api/liquid/objects/product#product-has_only_default_variant

[swduerre]

In what way is this not solvable by merchants changing the variant display order in the shopify product admin?
https://help.shopify.com/en/manual/products/variants/edit-variants#change-the-display-order-of-options

Hey Paul, thanks for reaching out. It is not about the display order of a bunch of variants, its about the position of the default variant.

If your product has different sizes like S,M,L,XL you usually want them to be displayed in the ascending order S->M->L->XL and configure this in your product like you linked it. By doing so size S (if available) is always the pre selected variant if a customer opens the product page.

This works well if you sell Shirts, but in our case, we want our best selling puzzle size (300pcs) to be the preselected variant if you open the product page. This is only possible if you made it the first variant in your product but by doing so you are going to destroy the ascending order of variants on your product page .. it would be 300 -> 35 -> 120 -> 200 -> 500 -> 1000 -> 1500. Which looks quite annoying to me. So I decided to make the position editable.

Feel free to post any smarter solution to solve my problem. I don't have one.