How can I handle multiple variants and preorders in my online store?

[LIYAShop]

https://0db1d3-5b.myshopify.com/products/third-product

I have a product(s) with multiple variants. In this example:

FR34 - has inventory quantity 5

FR36 - has inventory quantity 0 and has "Continue selling when out of stock" option turned ON

FR54 - has inventory quantity 0 and has "Continue selling when out of stock" option turned OFF

1. When product page loads and it has variants select, I want the first option to be blank, forcing the user to pick a Size and not have a first variant as default.

2. If FR34 is picked, button should say Add to cart (default and works fine)

3. if FR36 is picked, button should say Preorder (because quantity 0 and continue selling is on)

and a custom text message should appear under the Preorder button.

4. if FR54 is picked, button should say Sold out (default and works fine)

I have managed to find the Add to cart button in buy-buttons.liquid and have added an if statement to show Preorder as the button label if a variant has "Continue selling when out of stock" option turned ON.

<span>
 {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
 {{ 'products.product.sold_out' | t }}
  {%- else -%}
  {%  if product.selected_or_first_available_variant.inventory_policy == 'continue' %}
    Preorder 
  {%- else -%}
  {{ 'products.product.add_to_cart' | t  }}
  {%- endif -%}
  {%- endif -%}
  </span>

This shows a correct label, but only when the page loads and FR34 is a selected variant, which has inventory. If you pick another variant, this label disappears and doesn't show ever again, no matter which option you choose. I've also tried to combine the if statement with selected_or_first_available_variant <=0 but this seems to render no results at all.

Question 1: How can I make this label stick and show only when a variant is chosen which has 0 stock and continue is ON? This will also help me understand how to show the custom text under the button, because it will have the same rule.

Question 2: How can I add a blank variant to be the first on the list and make the variant field required for the user to pick from?

Question 3: If the variant name (value) contains the word "YES", show the "Text for Engraving" field.

I've tried looping over the variant values in main-product.liquid and have failed miserably.

This is not a fixed product and solution will need to work dynamically on other products which have variants, where some variants might have different names and the number of variants might be different as well.

[LIYAShop]

If anyone from the future is interested, the answer to Question 3:

If you have a product that requires a custom input from a customer, this code check the variant for the variant option 'yes' (in my case that's engraved option with extra cost added to the product). If 'yes' is not found or not selected, custom field will not show up. When customer enters the information into the field, it appears in the cart and then in the order. No app required.

I'm not a developer, so this code is definitely not poetry, but it works, so if anyone sees any issues with it, please comment below.

{% if product.selected_or_first_available_variant.title contains 'Yes' %}
    <div id="engraving">
        <p class="line-item-property__field">
            <label for="text-for-engraving" class="form__label">Text for Engraving</label>
            <input required class="text-for-engraving" id="text-for-engraving" type="text" name="properties[Text for Engraving]">
        </p>
    </div>

    <script>
        var engravingSection = document.getElementById('engraving');
        var variantSelect = document.getElementById('Option-template--19087342600457__main-0');

        function toggleEngravingSection() {
            if (variantSelect.value.trim() === 'Yes') {
                engravingSection.style.display = 'block';
            } else {
                engravingSection.style.display = 'none';
            }
        }

        toggleEngravingSection();

        variantSelect.addEventListener('change', toggleEngravingSection);
    </script>
{% elsif product.selected_or_first_available_variant.title contains 'No' %}
    <div id="engraving" style="display: none;">
        <p class="line-item-property__field">
            <label for="text-for-engraving" class="form__label">Text for Engraving</label>
            <input required class="text-for-engraving" id="text-for-engraving" type="text" name="properties[Text for Engraving]">
        </p>
    </div>

    <script>
        var engravingSection = document.getElementById('engraving');
        var variantSelect = document.getElementById('Option-template--19087342600457__main-0');

        function toggleEngravingSection() {
            if (variantSelect.value.trim() === 'Yes') {
                engravingSection.style.display = 'block';
            } else {
                engravingSection.style.display = 'none';
            }
        }

        toggleEngravingSection();

        variantSelect.addEventListener('change', toggleEngravingSection);
    </script>
{% endif %}

[LIYAShop]

If anyone from the future is interested, the answer to Question 1:

Main idea was taken from here (THANK YOU!): https://parasoul.co.uk/shopify/dawn-theme-display-inventory-quantity

1. Open file theme.liquid and before the closing </head> tag paste the following code:

<script> 
      var variantStock = {};
</script>

2. Open main-product.liquid and at the bottom of the page, before the opening {% schema %} tag, paste the following code:

<script>
  {% for variant in product.variants %}
    variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
  {% endfor %}
</script>

3. In theme.liquid, look for window.variantStrings and add  preorder: `{{ 'products.product.preorder' | t }}`,   to the list

4. Add a translation to en.default.json to reflect "preorder": "Preorder", (if needed)

5. Open the global.js file and search for the toggleAddButton, add another if to the list

    if (disable) {
      addButton.setAttribute('disabled', 'disabled');
      if (text) addButtonText.textContent = text;
    } else {
      addButton.removeAttribute('disabled');
      addButtonText.textContent = window.variantStrings.addToCart;
    }
     if (variantStock[this.currentVariant.id] == 0) {
     addButtonText.textContent = window.variantStrings.preorder;

Keep in mind that if product inventory is 0 and you don't have "Continue selling when out of stock" in variant properties, the Preorder button will be disabled. Normally, the label would say "Sold Out", but since we've added a condition in the last step - it changes the label to Preorder.

If anyone cares to explain how to modify if in the last step to also check for {% if product.selected_or_first_available_variant.inventory_policy == 'continue' } condition - that would be the best solution!