Add to Cart Button Blinks on Variant Change

Every time I change an option (like color or size), the Add to Cart button blinks or flashes briefly. I want it to stay still without any visual change when switching variants.

website: https://seasonalcollections.co/products/let-your-light-shine-t-shirt

1 Like

In free themes by Shopify this works like this – when visitor changes selectors, the button is disabled first. Then theme code determines the new variant selected and fetches new data from the Shopify backend. Depending on this data, the button is either enabled back or left in disabled state.

Loading data takes time, this is why it’s visually noticeable even though you’re changing from one available variant to another.

This behaviour can be changed, but I don not think it’s a simple change and it will require code edits which will make further theme updates more difficult.

I’d recommend to leave it as is, however, I would also like to know what solutions others may offer.

Hi @Senku

Yeah this is default behavior when button have been disabled. If you don’t want it, we can override by add custom CSS for only Add to Cart button by:

button.product-form__submit:disabled{
  opacity: 1;
}

Sorry , this is for Dawn version 15.* only, wouldn’t help the original poster :disappointed_face:

Ok, here is the solution which do not require code edit.

Go to “Customize” of your theme, create a “Custom liquid” section in “Footer” section group and paste the following code:


This should work for Dawn 13 and 14: