Pre-Order Text on Out-of-Stock Items

Store Design
, ,

Topic summary

A user seeks to display conditional text above the Add to Cart button based on product stock levels:

Requirements:

  • When stock = 0: Show “Product out of stock, Pre-Order now” with a question mark icon that triggers a pop-up explaining pre-orders
  • When stock > 0: Display “Delivery 2-6 days” message
  • Using the Dawn theme

Solutions Offered:

  1. Custom Code Approach (BSS-TekLabs):

    • Edit main-product.liquid in theme code editor
    • Insert Liquid code checking current_variant.inventory_quantity
    • Add CSS styling for the message display
    • Requires locating the Add to Cart button code in Sections folder

  2. App-Based Solution (Sandy-STOQ):

    • Use a pre-order app from Shopify App Store
    • No coding required
    • Features include: customizable button text, disclaimers, product badges
    • Most apps offer free plans
    • Can apply settings across multiple products/variants

Current Status:
The original poster reports difficulty locating the Add to Cart button code in their theme files, suggesting implementation challenges with the custom code approach.

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

@ChrisM187 :waving_hand:t3: 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. :slightly_smiling_face: -

Screenshot 2024-09-21 at 12.09.12 PM.png
Screenshot 2024-09-21 at 12.09.12 PM.png1518×966 205 KB