Hello everyone,
I’m working on a Shopify theme and I would like to prevent the first variant (size) from being automatically selected when a customer opens the product page.
Right now the first size is selected by default, and many customers forget to change it and end up ordering the wrong size.
My goal is that no variant is selected when the product page loads, so the customer must choose their size before adding the product to the cart.
I tried modifying variant-picker.js, but the first variant still appears selected, so I believe the selection might be coming from the Liquid template.
Does anyone know the best way to remove the default selected variant without breaking the add-to-cart functionality?
Any guidance would be greatly appreciated. Thank you!
Hello there, thanks for posting this query on this forum. For more context, can you please share your site url so that I can take a look, inspect the code and try to guide you on how to prevent first variant being selected.
I just check you are using the horizon theme. And it’s way more technical task.
Have you try to implement the code that shared in this thread? How do i remove the auto select on variants
They also have the Variant Options app, so probably native Horizon solution would not work.
I’d try this – add a “Custom liquid” section/block and paste this code:
<script>
window.bcpoReady = () => {
console.log('--- Unselect');
setTimeout(function() {
document.querySelectorAll('#bcpo input:checked').forEach(e => e.checked=false);
}, 333);
}
</script>
When Product option app is ready, this code will unselect all selected options.
@volgashopcol It looks like you’re using a Shopify app for this. Normally, there should be an option in the app to set a default selection.
If the app doesn’t provide that option, you could instead define the sizes as variants in your theme, and then the suggested solution should work properly: How do i remove the auto select on variants
Alternatively, you might want to look at the Pasilobus Product Options app. It includes a setting for a default value, and you can also leave it empty if you want to require the customer to make a selection before adding the product to the cart.
Hi there 
It sounds like you want to prevent customers from accidentally ordering the wrong size by removing the default size selection when they first land on the product page.
If you’re open to using an app, you can achieve this with Easify Custom Product Options without modifying your theme code.
I’ve created a similar demo to help you better visualize how it works:
Simply create your Size option using a Button, Dropdown, or any other option type available in the app, then enable the Required option setting. When setting up the option values (S, M, L, etc.), just make sure you do not select any value in the “Default” column. As long as no option is marked as the default value, customers will see the size choices but none of them will be pre-selected when the page loads.
This means shoppers must actively choose a size before they can add the product to their cart, helping reduce ordering mistakes and improving the overall shopping experience.
In the screenshot below, you can see the Default column on the left side of the option values. Simply leave all of those checkboxes unchecked, and no size will be selected automatically.
This approach is much simpler than editing theme files such as variant-picker.js, and it gives you full control over the selection behavior without touching any code.
