The "size" variation attribute is preselected in Storefront (SFRA) causing bad orders as customers forget to adjust to the right size

Question

This storefront sells clothes among other things and the size is a key selection that we want the customers to make explicitly.

Because SFRA pre-selects the size customers overlook the choice and will inadvertently checkout the wrong size, as this is the preselected choice made by SFRA.

This causes increased load on our customer service and returns handling and a bad customer experience (it is hard to argue whether the customer selected the wrong size or the storefront had preselected the wrong one and they were not aware).

How can I change this behavior so that the size is not preselected?

Current behavior: Size is preselected:

Desired behavior: Customer must select the size themselves:

SFRA version: 5.3.0

Answer 1

The functionality you desire is included in the variationAttribute template in SFRA v5.3.0. You can also confirm the functionality on the SFRA demo site - see this product on the demo site for a comparable example.

I've inferred that you still have the "Select <attr>" option in the dropdown, which is added by the variationAttribute template, and the Add to Cart button in your second screenshot is appropriately disabled (unless you manually adjusted these for your screenshot). This suggests you likely you have some custom clientside script that is performing the automatic selection of the first variation. This automation reduces clicks in cases where the first is likely what the customer wants, so some UX guidelines recommend the experience you have, at the expense of the problems your support team are now dealing with. Perhaps as a compromise, this functionality should only trigger if there is only one available selection for a given attribute.

Without a link to an example, it's difficult to diagnose where this code might be. I would start by searching my custom clientside scripts for a selector matching the variationAttribute's select element. I might also use devtools to inspect the change listeners on each of the attributes, which should trigger slicing and availability checks. These checks disable unavailable options in other attributes, and would be the appropriate place for the automatic selection customization to occur.