How can I display sold-out product options as greyed out?

Store Design
1

Hello,

Would like to add my product options to be greyed out/ blurred out/ or line through option when sold out. does anyone have a solution to this?

2

Hello there

To grey out, blur, or strike-through a product option when it’s sold out in Shopify, you can modify the theme code. Here’s how you can do it:

  1. Go to the “Themes” section of your Shopify admin.
  2. Select the theme you’re using and click on the “Editor” option.
.product-form__item--sold-out {
  opacity: 0.5; /* adjust this value to the desired level of opacity */
  text-decoration: line-through; /* change this value to "blur" or "line-through" as desired */
}
  1. In the “Snippets” folder, locate and open the “product-form.liquid” file.
  2. Look for the code that displays the product options and add the following code around each option:
{% if option.available == false %}
  
{% endif %}
  ... your option code here ...
{% if option.available == false %}
  

{% endif %}

This code will add a class to each option that’s sold out, which will apply the desired opacity and text-decoration styles.

3

Thank you for this!

When I click “Theme” should I click the 3 dots then edit code?