How to add make color swatches fade when option is unavailable

Technical Q&A

Topic summary

A user has implemented custom code to display color swatches on their Shopify store but encountered a styling issue: the color swatches don’t fade out when product options become unavailable, unlike other option buttons.

Implementation Details:

  • The swatches were created using a solution from an external tutorial site
  • The user has attempted multiple approaches to fix the fade behavior without success

Current Status:

  • The discussion remains open with one response requesting clarification on which specific page the swatches appear
  • No solution has been provided yet
  • The issue appears to be a CSS or JavaScript implementation problem related to disabled/unavailable variant states
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I’ve implemented some custom code to display color swatches, but now my color swatches are the only options that don’t fade when unavailable, unlike other buttons. I’ve tried several ways of implementing this, but I can’t figure out how.

I’m using the solution from this site for my swatches: https://mrdigitals.com/how-to-add-color-swatches-in-shopify-dawn-15-1-0/

And here’s a link to my actual site: (code is afs to view): https://shop.alliancefencesupply.com

2

Hey

Which page specifically are the swatches on? I can take a look :slightly_smiling_face: