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

[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]

• 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:

[BSS-TekLabs]

-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.

  {% if current_variant.inventory_quantity <= 0 %}
    
    

      Product out of stock, Pre-Order now
      
      
        ?
      
    

  {% else %}
    
    
      Delivery 2-6 days
    

  {% endif %}

[BSS-TekLabs]

And add this code to top file

[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. -

[ChrisM187]

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

[Yauheni_K1_PreOrder]

Hey,

You can achieve this with a Liquid customization in your Dawn theme. In Online Store → Themes → Edit code, find your product template (usually main-product.liquid or product-form.liquid). Add conditional logic checking variant.inventory_quantity: when ≤ 0, show “Product out of stock, Pre-Order now” with a tooltip (HTML/CSS for the question mark icon); when > 0, show “Delivery 2-6 days.” Position this above the Add to Cart button. Shopify’s theme customization guide has more details.

Trade-offs: requires basic Liquid knowledge and manual updates if you change messaging later.

Alternatively, an app like K1 PreOrder (I’m the founder) automates this with inventory-based rules that trigger pre-order messaging when stock runs low, custom messages with tooltips, and no coding needed. Here’s the K1 PreOrder listing if relevant.

Happy to help with the theme customization if needed.

Best regards,
Yauheni