How do i remove the auto select on variants

How do i remove the auto select on variants

davidsimpson596
New Member
11 0 0

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.

 

davidsimpson596_0-1737366638264.png

 

 

Replies 5 (5)

rajweb
Shopify Partner
577 48 114

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!

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

websensepro
Shopify Partner
1854 215 261

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.

websensepro_0-1737370342638.png

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!

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
davidsimpson596
New Member
11 0 0

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

websensepro
Shopify Partner
1854 215 261

 Go to Online Store -> Theme -> Edit code.

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

websensepro_2-1737381822449.png

 


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

websensepro_0-1737381351710.png

websensepro_1-1737381508551.png

 

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; 
}

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
Hasan112
Shopify Partner
152 11 21

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

 

- If you need assistance with your store, feel free to contact us at zayan.1@yahoo.com or WhatsApp!
- Hire me, if you want to Design, Re-design, Develop a store or make changes to the pre-built store.
- If its helpful, please Mark as Accepted Solution, reply helpful? Click Like. Or Coffee Tip Thank you!