Product pages - Allow pre-orders for products

Store Design

Topic summary

Core Tutorial:
This advanced tutorial explains how to enable pre-orders for out-of-stock products by creating an alternate product template and modifying payment settings. The process differs between sectioned themes (post-October 2016) and non-sectioned themes.

Key Steps:

  • Change payment settings to manually capture payment authorization (7-day window for Shopify Payments, longer for third-party gateways)
  • Create a new product template named ‘pre-order’
  • Modify the ‘Add to Cart’ button text to display ‘Pre-Order’
  • Assign the template to specific products
  • Optionally adjust inventory settings to allow purchases at zero stock

Common Issues & Solutions:

  • Missing code: Many users cannot locate the specified code snippets. Solution: Check theme.liquid file or use conditional logic that checks template suffix
  • Dynamic checkout buttons: Must be disabled to prevent conflicts with pre-order functionality
  • ‘Buy Now’ button persists: Disable dynamic checkout in theme customization settings
  • All products show pre-order: The basic tutorial doesn’t distinguish between in-stock and out-of-stock items; requires additional conditional logic to check variant availability
  • Template not appearing: Ensure the section file is properly created and saved

Advanced Solution:
User Alex-Miller shared code that automatically switches between ‘Add to Cart’ and ‘Pre-Order’ based on actual stock levels using variant availability checks within JavaScript.

Limitations:

  • Not compatible with dynamic checkout buttons
  • Requires manual template switching per product
  • May not work with Shopify Lite
  • Code varies significantly across themes
Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
29

My template doesn’t seem to have

<span data-add-to-cart-text>
  {% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
  {% else %}
  {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
</span>

instead it has

{% include 'product-form' %}

What can i do?