Pre-Order Text on Out-of-Stock Items

[ChrisM187]

Hello, I am trying to add a text above the Add to Cart button on my products which says something along the lines of "Product out of stock, Pre-Order now" or something similar (would be great if it is editable). Also along it should have a Question mark where i can add a small pop up message explaining what pre-order means.
This message should only pop-up, when the selected Size / Variant of a product's stock is 0. When the product stock is above 0, I would also like to have a message above the Add to Cart Button saying "Delivery 2-6 days" (for example). Would that be possible through a easy code? I tried searching everywhere for answers but nothing worked for me..
I am using the Dawn theme.
here is an example of how it could look like:

And the Question mark pop up text example: 

Thank you in advance!
Website URL: trinitysneakers.com

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @ChrisM187 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open the main-product.liquid file, which is located under the Sections folder

- Locate the Add to Cart button: Look for the code that generates the Add to Cart button in the file. It will look something like this:

<button type="submit" class="button product-form__cart-submit">Add to Cart</button>

[BSS-TekLabs · Accepted solution]

-Add the dynamic message above the Add to Cart button: Insert this Liquid code above the button to dynamically display the "Pre-Order" or "Delivery" message based on the variant's stock quantity.

<!-- Dynamic Message Section -->
<div class="product-availability-message">
  {% if current_variant.inventory_quantity <= 0 %}
    <!-- Pre-Order Message for Out of Stock Products -->
    <div class="pre-order-message">
      <span>Product out of stock, Pre-Order now</span>
      <!-- Tooltip for explanation -->
      <a href="#" class="preorder-info" data-toggle="tooltip" title="This product is currently out of stock but can be pre-ordered. We'll ship it as soon as it's back in stock.">
        <span class="tooltip-icon">?</span>
      </a>
    </div>
  {% else %}
    <!-- Delivery Message for In Stock Products -->
    <div class="delivery-message">
      <span>Delivery 2-6 days</span>
    </div>
  {% endif %}
</div>

<!-- Add to Cart Button -->
<button type="submit" class="button product-form__cart-submit">Add to Cart</button>

[rajimulislamjoy]

@ChrisM187  Hi! Yes, this is possible with a bit of custom Liquid code and JavaScript. You can conditionally display messages based on stock levels for your variants. I can help you implement this in the Dawn theme, including the editable 'Pre-Order' message with the question mark pop-up. 

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @ChrisM187 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open the main-product.liquid file, which is located under the Sections folder

- Locate the Add to Cart button: Look for the code that generates the Add to Cart button in the file. It will look something like this:

<button type="submit" class="button product-form__cart-submit">Add to Cart</button>

[BSS-TekLabs · Accepted solution]

-Add the dynamic message above the Add to Cart button: Insert this Liquid code above the button to dynamically display the "Pre-Order" or "Delivery" message based on the variant's stock quantity.

<!-- Dynamic Message Section -->
<div class="product-availability-message">
  {% if current_variant.inventory_quantity <= 0 %}
    <!-- Pre-Order Message for Out of Stock Products -->
    <div class="pre-order-message">
      <span>Product out of stock, Pre-Order now</span>
      <!-- Tooltip for explanation -->
      <a href="#" class="preorder-info" data-toggle="tooltip" title="This product is currently out of stock but can be pre-ordered. We'll ship it as soon as it's back in stock.">
        <span class="tooltip-icon">?</span>
      </a>
    </div>
  {% else %}
    <!-- Delivery Message for In Stock Products -->
    <div class="delivery-message">
      <span>Delivery 2-6 days</span>
    </div>
  {% endif %}
</div>

<!-- Add to Cart Button -->
<button type="submit" class="button product-form__cart-submit">Add to Cart</button>

[BSS-TekLabs · Accepted solution]

<!-- Optional: Add the tooltip CSS and JavaScript -->
<style>
  .tooltip-icon {
    border-radius: 50%;
    border: 1px solid #000;
    padding: 2px 5px;
    font-size: 0.8rem;
    cursor: pointer;
  }
  .pre-order-message, .delivery-message {
    margin-bottom: 10px; /* Space between message and button */
    font-weight: bold;
  }
</style>

<script>
  // Tooltip functionality
  document.addEventListener('DOMContentLoaded', function () {
    const tooltipElements = document.querySelectorAll('.preorder-info');

    tooltipElements.forEach(function (el) {
      el.addEventListener('mouseenter', function () {
        const title = this.getAttribute('title');
        const tooltip = document.createElement('div');
        tooltip.className = 'custom-tooltip';
        tooltip.innerText = title;
        document.body.appendChild(tooltip);

        tooltip.style.position = 'absolute';
        tooltip.style.left = `${this.getBoundingClientRect().left}px`;
        tooltip.style.top = `${this.getBoundingClientRect().top - tooltip.offsetHeight}px`;

        el.addEventListener('mouseleave', function () {
          tooltip.remove();
        });
      });
    });
  });
</script>

And add this code to top file

[ChrisM187]

For a weird reason i can not find the add to cart button..

[Sandy-Stoq]

@ChrisM187 👋🏼 You can also do this more easily with a preorder app from App Store. Most - including ours - have a generous free plan and with them, you can - 

1. Make it very clear that customers are preordering the product by changing the 'Add to cart' button.
2. Add a disclaimer underneath so customers know what to expect with their preorder.
3. Add a badge on the products to distinguish them from regular in-stock items.

And you can do all of this across products and variants of products. Here's what ours looks like, and most apps will let you add some version of this to the product page with no coding. 🙂 -