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

Hi! Yes i solved this today!!

(Hat tip to @John_G2 for the inspiration to loop through the variants for their policy and quantity in liquid INSIDE the JS)

You can check the example on my development shop:

https://aimhuge-dev-dec20.myshopify.com/products/product-preorder

Password is 123456 (check the catalog → product-preorder)

How to do it?!

1. Followed the tutorial linked on the first page of this thread to create a new template option for products that allow preorder

https://community.shopify.com/c/Shopify-Design/Product-pages-Allow-pre-orders-for-products/m-p/625914/highlight/true#M42

2. BUT skip this part of the tutorial

Alex-Miller_0-1613025289763.png
Alex-Miller_0-1613025289763.png839×504 29.4 KB

3) Replace the product strings bit of script in product.pre-order.liquid

with the following:

CC @Jennifer42