trouble greying out/strikethrough sold out product page variants

Store Design
, , ,

Topic summary

A Shopify store owner is trying to grey out and add strikethrough styling to sold-out product variants on their product pages, but standard CSS solutions aren’t working.

Initial Problem:

  • User attempted common CSS code snippets in base.css without success
  • Shared their product page URL for troubleshooting

Solution Attempted:

  • A helper provided custom CSS code to be inserted in theme.liquid before the closing </head> tag
  • User initially placed code in wrong location (above opening <head> instead of before closing </head>)
  • After correction, code successfully greyed out the “SOLD OUT” badge text

Remaining Issue:

  • User clarified they want the actual variant option buttons (size/color selectors) to be greyed out and struck through, not just the sold-out badge
  • The current solution only styles the badge, not the individual variant selection buttons
  • Discussion remains unresolved for the specific variant button styling request
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi I am having a hard time greying out/adding strikethrough to sold out variants. I have tried to add the codes most people suggest into the base.css but non of them are working. Here is my site https://thelokigiftshop.com/products/hello-pumpkin-corded-sweatshirt-in-orange?variant=46463010013492

TIA!!!

2

Hi @thelokishop

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1730124544330.png
websensepro_0-1730124544330.png1268Ă—177 191 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

1 Like
3

thanks so much for your response! is this the right spot? it is not working on my site still

Screenshot 2024-10-28 at 10.36.33 AM.png
Screenshot 2024-10-28 at 10.36.33 AM.png2228Ă—1300 442 KB

1 Like
4

No worries and no, this is not the correct position. You are putting this above but you need to put it under and before its closing tag that is

1 Like
5

@thelokishop is it working now?

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

1 Like
6

lol sorry not a coding girl. i think this is right? but its not working

Screenshot 2024-10-28 at 10.43.13 AM.png
Screenshot 2024-10-28 at 10.43.13 AM.png2158Ă—1116 325 KB

7

I’ve checked your store and it is there working fine. Am I missing something?

websensepro_0-1730128103495.png
websensepro_0-1730128103495.png1365Ă—640 559 KB

8

so sorry. i didnt explain correctly. i was wanting the sold out variant options to be greyed out and strike through. hope this makes sense

Screenshot 2024-10-28 at 11.44.03 AM.png
Screenshot 2024-10-28 at 11.44.03 AM.png1010Ă—174 7.23 KB