A Shopify store owner encounters an issue where the âAdd to Cartâ button becomes unclickable (grayed out) after switching product variants. The button only works for the first/default variant and requires a page refresh to function again.
Root Cause Identified:
A community helper identifies additional JavaScript code interfering with variant selection functionality. The problematic code appears in the product form template.
Partial Resolution:
The original poster manages to make variants selectable, but discovers a new problem: selecting pink or grey variants still adds the default blue variant to the cart instead of the chosen color.
Workaround Suggested:
Another user reports success by deleting existing variants, adding a price to the product first, then re-creating the variants. They suspect the issue stems from not setting a base price before adding variants.
Current Status:
The thread remains open with multiple users experiencing the same issue. The core variant-switching problem appears related to theme JavaScript conflicts, but the complete solution for proper variant-to-cart mapping is still unresolved.
Hello, I have got a Problem with my Add to cart button. If i switch the colors of the Product, the add to cart button gets grey and i cannot click it anymore. Just After refreshing the site i can click on add to cart but only for the firsst variant. If i press another variant, i cant click it again.
@LitExtension maybe you can help please
here my store link: https://mynovaone.com/Self-Cleaning-Brush-for-Cats-and-Dogs
Hello @TonyMontana58
I checked there is additional Javascript working on click of variant options and we need to remove that one from theme.
where can i remove it?
@TonyMontana58 if you are familiar with Liquid + javascript then you can remove it from themeâs default js
yea i am not a coder , it would be great if you could tell me the path to find the code
then i can remove it
@TonyMontana58 it needs to scan themeâs code where it written by your previous dev or any app so it needs to get access for checking it.
do you mean you need to scan, or what do you mean with âitâ
I mean I need acce_ss to check your themeâs co_de
so i guess you need the colaborator acces code.
here it is 8387
Just requested Please approve and I will check it for you soon
ok i did
so i found the code
{%- form âproductâ, product, id: product_form_id, class: âformâ, novalidate: ânovalidateâ, data-type: âadd-to-cart-formâ -%}
<input
type=âhiddenâ
name=âidâ
value=â{{ product.selected_or_first_available_variant.id }}â
disabled
do i delete all of that or which one?
@niraj_patel when can i expect you doing this?, Because i am a bit in a hurry. I have a deadline.
ok i fixed the issue, now i can select any variant and add them to cart. But now i have another problem inwhich when i add the colors pink and grey to my cart, i still get the first varaint which is blue. So i can only add the default color to the cart
Hello Niraj:
I recently installed a new theme on my Shopify store called rank higher theme quantum 4.0 V and I am having a problem with the add to cart button. When I select the default variant in the dropdown, the add to cart button is highlighted and works, but when I change the variant, the add to cart button is muted and is not clickable. I noticed that other people have had a similar problem in the past. It would be appreciated if you could take a look at the code in my main liquid theme to see if there is a java script problem. My access code for my Shopify store is: 0648. The URL of my shopify store is hotdiggidydog.ca. Thank you.
Hey can u check my store i am having same issue at zapola.in
Having the same issue. A work around I found was I went into the product that was having the issue, deleted the variants. Put a price in the price box and THEN added the variants. Donât ask me why it worked but seems to be the solution for me right now without having to mess with the code. I think for some reason it didnât like that I wasnât putting a price in before adding the variants.
