How do i remove the auto select on variants

[davidsimpson596]

HI

Please help. I am looking to remove the auto variant selection from my theme. When a customer selects a product i don’t want a variant to already be selected - as below, the size and backing are auto selected when they click on the product. I have images linked to the size variants that i dont want to be the main product image.

[rajweb]

Hey @davidsimpson596 ,

To prevent the auto variant selection on your product pages, you can modify your theme’s JavaScript. Here’s what you’ll need to do:

Here’s what you’ll need to do:

1. Locate the Product Template:

-Open the product-template.liquid file in your theme’s code editor.

2. Find the Auto-Select Variant Script:

Search for a script that automatically selects the first variant when the page loads. This could look something like:

javascript

var firstVariant = product.variants[0];
selectVariant(firstVariant);

3. Disable Auto-Selection:

• Remove or comment out the code that selects the first variant by default. This will stop the page from auto-selecting a variant when it loads:

// var firstVariant = product.variants[0];
// selectVariant(firstVariant);

4. Adjust or Disable Variant Image Change:

• If there are scripts that change the product image based on the selected variant, you may also need to modify or disable this functionality to ensure the main image stays visible. Look for code that links variant selection to image changes and adjust accordingly.

If you encounter any issues or need help implementing this code, feel free to reach out to me via email—I’d be happy to assist you further. Thanks!

[websensepro]

Hi @davidsimpson596

1. Go to Online Store → Theme → Edit code.
2. Open your product-variant-options.liquid and remove this

{% if value.selected %}
        checked
      {% endif %}

code from your file.

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[davidsimpson596]

HI, Thanks for this. But unfortunatley it didnt work, it completely removed the ability to select any variant.

[Hasan112]

It just remove the select CSS, do you have other method of it ?

[websensepro]

Go to Online Store → Theme → Edit code.

Open your product-variant-options.liquid and replace checked :value.selected with checked:false

2. Open your product-variant-options.liquid and replace checked with class=“variant-selected”

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-form__input--pill label.variant-selected {
  background-color: black !important;   
  color: white !important;              
  transition: background-color 0.3s, color 0.3s !important; 
}