How can I make a sold out product variant clickable?

Store Design

Topic summary

A user wants to make sold-out product variants clickable to trigger a “Notify me when back in stock” feature, rather than having them disabled.

Technical Solution Provided:

  • Locate product-variant-options.liquid file (or main-product.liquid for non-Dawn 8.0 themes)
  • Add code to apply an enable-notify class to labels when variants are out of stock
  • Include a script that binds click actions to these labeled variants
  • A screenshot reference was shared showing the implementation

Current Status:

  • The original poster successfully implemented the solution and confirmed it works
  • Another user attempted the same fix but reported it’s not working for them yet
  • Follow-up question asked about which theme they’re using to troubleshoot further

The discussion involves CSS modifications and Liquid template editing in Shopify stores.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I input below the code in my main.product.liquid for make sold out variant to be disable.

{%- for variant in product.variants -%}
{% if value == variant.title %}
{% if variant.available == false %}disabled{% endif %}
{% endif %}
{%- endfor -%}

But I use “Notify me when back in stock”, So I want to make this sold out variant be clickable.

Is it possible to change? Here is my preview below :

https://okua9emvlihu3f7f-61683237082.shopifypreview.com

1 Like
2

@Ianlee221

oh sorry for any issue can you please share sold out product url

3

Hello @KetanKumar

Thank you for your reply!

Here is the link below :

https://itsdcode.jp/products/am1224fl004

4

Hi @Ianlee221 ,

Search for file product-variant-options.liquid and edit code like below

This will add a class named enable-notify class to label when the variant is out of stock. Now add the below SCRIPT at the end of the file.

This will bind the script to fire action. Attaching a screenshot for your reference.

hari1_prasad_0-1676444897617.png
hari1_prasad_0-1676444897617.png1366×768 50.3 KB

Hope it helps…

5

Hi @gr_trading Thank you for your response!

I’ve tried to find “product-variant-options.liquid” you mentioned but unfortunately I cannot find it in my edit code section…

6

Seems you are not using DAWN 8.0 if it is then your code will be in main-product.liquid

7

Oh Yes your are right! Now I can see the product-variant-options.liquid and it works well.

Thank you!

8

I impemented this code but still it doesnt work

9

Hi @Christelle12 ,

Which theme you are working on?