Looking to modify 'sold out' button if a metafield is set to true

Retired Boards Appdev Store Design
1

Hi,

I am doing a few modifications for a friend’s site and I am running into a problem when trying to modify the add to cart button. I am using the Studio theme.

Basically they would like the ability to make certain products show up as “coming soon” and not “sold out” if there is no inventory for a particular product variant.

I have created a Product metafield with a true / false toggle so if they would like to use the functionality on the product, they can just set the field to true.

I am modifying the main-product.liquid file inside the button tag

I am changing the following from :

{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}

TO

{%- if product.selected_or_first_available_variant.available -%}
  {{ 'products.product.add_to_cart' | t }}
{%- else -%}
  {%- if product.metafields.my_fields.product_coming_soon -%}
    Coming Soon
  {%- else -%}
    {{ 'products.product.sold_out' | t }}
  {%- endif -%}
{%- endif -%}

This works, however it only works if the sold out variant is the active variant when I go to that product. If I start flipping between variants, I lose the if / else statement, and it will just default to “sold out” if there is no inventory on the variant.

There is a lot of dated or theme specific info on here. I am looking for help with the above OR help pointing me to antother thread possibly. Also is there a better way of accomplishing this?

Thank you for your time.