How to prevent the first variant from being selected by default?

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!

1 Like

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.

https://volgashop.co/ thank you

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.