Sold Out Items opacity and gray out Studio Theme

Technical Q&A
, ,

Topic summary

A user seeks CSS code to visually indicate sold-out product variants in Shopify’s Studio Theme through two methods: graying out unavailable variant options in dropdown/pill buttons, and reducing opacity of product images when all variants are sold out.

Initial Solution Provided:

  • BSS-Commerce initially suggested a third-party app (Product & Variants Options), but this didn’t address the specific visual styling request.

Working Code Solution:

  • BSS-Commerce then provided custom liquid code for main-product.liquid that successfully grays out/strikes through unavailable variants.
  • The solution involves two code snippets checking variant availability status and applying a “disabled” state.
  • Multiple users confirmed this code works for Dawn Theme as well, though the exact line placement varies (around line 300 rather than shown in the reference image).

Current Status:

  • Solution works for single-variant products but has limitations with multi-variant products.
  • BSS-Commerce acknowledged the multi-variant limitation and committed to developing a fix.
  • One user reports the code still doesn’t work despite correct placement, suggesting potential theme-specific compatibility issues remain unresolved.
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi!

Is there basic coding to display items that have variants as “grayed out” with sold out variants in the product drop downs/pill buttons so that customers know which items are available?

Also, I’m wanting to have item photos for products that are sold out to automatically be reduced in opacity (but still show as there’s an option to be notified for restocks)

site URL: https://shopkapsul.com/

password: laobad

2

Hi @skyehagz

Customizing the variant button with the liquid file is so difficult and prone to conflict, so in your case, I suggest you use a third-party app to solve this problem.

You can try to research our Product & Variants Options app. You can enable these switches to variant options in the app that can show on your website

view - 2022-11-22T161929.226.png
view - 2022-11-22T161929.226.png1917×1079 128 KB

Then, go to Options Sets → Create new options set → Options → Add a new option, and you can create Variant Options here:

view - 2022-11-22T162008.109.png
view - 2022-11-22T162008.109.png1919×1079 111 KB

view - 2022-11-22T162011.422.png
view - 2022-11-22T162011.422.png1919×1079 116 KB

I hope that you find this app useful!

3

Thank You! I’m not exactly sure this answers the original question though. I’ve included a photo as to what I was hoping to showcase. I don’t see where the app above enables sold out items to grey or cross out?

Untitled.jpg
Untitled.jpg606×220 7.55 KB

any additional help is much appreciated!

1 Like
4

Hi @skyehagz

Sorry I didn’t understand what you meant. Now I understand that you want to fade the variant like this:

view - 2022-11-23T103751.668.png
view - 2022-11-23T103751.668.png375×123 4.08 KB

If yes, in your case, you can follow the these steps:

Go to Online Store → Theme → Edit code → main-product.liquid and add code into these positions and save: https://i.imgur.com/OBBQfm3.png

  • Code 1:
{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}
  • Code 2:
{% unless variant_label_state %} disabled="disabled"{% endunless %}

Let me know if it works for you by giving us a like or marking it as a solution.

4 Likes
5

worked like a charm! thank you so much for this uncomplicated fix with stellar directions!!

1 Like
6

Hi @skyehagz

I am so glad that my suggestion can help you solve the issue

Best regards,
BSS Commerce Team

1 Like
7

Hi!!

Do you have the coding for Dawn Theme to gray out/straight through line for sold out or not available product variant?

Appreciate your help!

8

Hi @JoaLM_82

You also can use my accepted solution for Dawn Theme. I think it works properly.

If it doesn’t work, please provide us with more information about the issue and your store link. We will help you check it if possible.

1 Like
9

Hi,

i followed your instructions and added the code in the proper page but i still can’t get the out-of-stock item with the strikethrough effect,

looking at the code you provided it seems you check on .available if it’s true, is there an available setting i have to set on the variant?

https://vestidosboutique.myshopify.com/products/dummy-product

so in the page i provided, the “AZUL” variant and size S, M should be out of stock and it should have the strikethrough effect

Thanks

10

Hi @JoaLM_82

After having checked, we saw that it’s only working with single variants products on Dawn Theme.

I will try to fix it soon and let you know when I have done it.

Regards.

11

Thank you!!! This worked for my Dawn theme as well!

The code just needed to be inputted farther down then what your picture displays for me. I just searched the code until I found the exact same coding that was displayed in your pic. Mine was around line 300.

12

This worked for me in Dawn theme! You just have to search a little bit farther down for the correct place to input the coding. It was around line 300 - just compare to the posted picture above for the exact place you need to input.

1 Like
13

This was super helpful and worked perfectly, thank you so much!

1 Like
14

Hi @ChandaM ,

We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like? This can be a reference for other merchants if they have an issue like you and greatly motivate us.

Thanks in advance.

15

Hi , i have placed this code on exact location but still it’s nor working for me