Shopify themes, liquid, logos, and UX
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.
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:
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!
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!
HI, Thanks for this. But unfortunatley it didnt work, it completely removed the ability to select any variant.
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;
}
It just remove the select CSS, do you have other method of it ?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025