This is an interesting issue that has come up a few times from support. Currently, we automatically select the first variant combo so that there is an image and price to display. I'll keep this in the backlog for further investigation when bandwidth and priorities allow

In Juli 2023 this is still an issue. I hope you get a way around this so it's not automatically selected any Variant and the user has to choose. Because here is my Case, I have 4-5 Color Variant which I show on the Main Picture, but if the user clicks on it the first Variant is selected and this Variant is maybe not what catches his/hers eye so the Users abandons because it is not what he/she looked for in the first place. It's just second but this seconds can determine a purchase or not.

Can you please change this behavior or let us somehow change it...

Best Regards

I'm going to bump this because it is almost 9 months later and there isn't an easy way I've found to handle this. For things like the initial image and price, it is fine to use the product.selected_or_first_available_variant. For everything else it should just be product.selected_variant, so that nil is passed as a value when nothing is selected. Disable the Add to Cart and Buy Now buttons when there isn't a selected_variant available, or display an alert that options must be selected if the buttons are clicked.

I tinkered with removing the default "checked" status for options and setting the form's default hidden "id" element to product.selected_variant.id as outlined in the community forums: https://community.shopify.com/c/shopify-design/how-disable-auto-select-variant-dawn-them-please-help-about-it/m-p/1932932

This worked okay except that the error message wasn't helpful because it talked about a missing required id value, rather than informing the customer they must select an option.

The other issue with the modification was that when clicking on a search result, it passes in a variant id as part of the querystring. This sets the product.selected_variant, but the option pill wasn't selected in the UI. So you could click Add to Cart or Buy Now and it would add the default option without prompting for a selection.

Definitely something that needs to happen in the next dawn version, our customer service is getting reports of incorrectly selected options because they lack the eyeballs to actually pick before adding.

The point of the following approaches is to mainly avoid directly modifying theme files by just using custom-liquid and custom-css settings in the theme editor; such as when you need to a/b test such behavior changes.

These approaches may be more feasible now for more merchants because of the new 2k limit for variants and increased options becoming available since it wouldn't burn up some of the precious 100 variants of the previous limitations.

For some , Until fixed in dawn, or at a platform level , an alternative to toy with that may work more for some is making a variant-option value that exists purely as a placeholder/selection-text.
Possibly shifting the problem to more of a text scenario with sold out or unavailable translations, or also in tandem with brute replacing .selected_or_first_available_variant with just .selected_variant in liquid files, and or frontend javascript.

For example with 'size' and 'color' options making the literal first option values 'Select a size' and 'Select a color' respectively or just 'Select an option' each ; tailor verbiage to need.
Make sure these placeholders are the first variants and set them inventory policy deny and give them no inventory.
Then just change the products add to cart text wording in the translations editor ,or customizing the text display logic in the relevant files (see below).
And depending on dawns' behavior or current customizations just using javascript to click those placeholder options when the options load (see sample below).

So it's like a 'choose an option' customization but without heavier/obsolete theme modifications or at least possibly simpler modifications to translation keys or their logic.

Example onload javascript that clicks the first options in option-groups in the dawn theme after the page loads:

/* selectors may need updating */
window.onload = (event) => {
  document.querySelectorAll('variant-radios fieldset legend+input').forEach( element => element.click() )
};

Example code locations for sold_out, variant_sold_out_or_unavailable , or an unavailable text scenarios.

• unavailable https://github.com/Shopify/dawn/blob/main/locales/en.default.json#L169
  • https://github.com/search?q=repo%3AShopify%2Fdawn+%22products.product.unavailable%22&type=code
• sold_out https://github.com/Shopify/dawn/blob/main/locales/en.default.json#L168
  • https://github.com/search?q=repo%3AShopify%2Fdawn+%22products.product.sold_out%22&type=code
• variant_sold_out_or_unavailable https://github.com/Shopify/dawn/blob/main/locales/en.default.json#L172
  https://github.com/search?q=repo%3AShopify%2Fdawn+%22products.product.sold_out%22&type=code
  • https://github.com/search?q=repo%3AShopify%2Fdawn+%22products.product.variant_sold_out_or_unavailable%22&type=code

Example product-with-soldout-variant placeholders clicked with javascript

Example product-with-unavailable-variant placeholders user has selected a color but NOT a size yet

Though I don't know of a use case for this one, a more contorted advanced alternative with the new limits will be to create an entire option-name literally named Options or some other wording. Filling this options group values with display text for prompting users to select other options. Then using variant change events or just using javascript to click the relevant starting options when the page loads; and or hiding the options and their labels with CSS.
Or more backend centric option-names like merchandising or placeholder-text , or selection-text but you definitely want to use CSS or liquid to hide/not-render options with those types of labels.
Example of a product with an entire option dedicated to prompting customers to select options:

Created a Pull Request that addresses this