Allow pre-orders for products

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

If you have products that are out of stock, you can sell them as pre-orders. This is done by creating an alternate product template, and editing your payment settings. You can also use this customization to continue selling products that are on back-order.

Allow pre-orders

Sectioned and non-sectioned themes

Authorizing payment for pre-orders

When selling products as pre-orders, you should not capture payment immediately unless the customer is aware that they are purchasing a product that is not currently available. Instead, you can authorize a payment without capturing the funds immediately. Authorizing a payment at the time of checkout allows you to capture the funds at a later date, when the product is available and you are ready to fulfill the order.

  1. Scroll down to find the Payment authorization section.

  2. Select Manually capture payment for orders:

    Payment authorization
  3. Click Save.

Creating a pre-order product page template

To change the Add to cart button text for your pre-order products, you must create a new product template.

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Templates directory, click Add a new template.

  3. From the drop-down menu, select product, and name the template pre-order:

    Create new template
  4. Click Create template. Your new product.pre-order.liquid template will open in the code editor.

  5. Find the code:

    {% section 'product-template' %}
    

    Replace it with:

    {% section 'product-pre-order-template' %}
    
  6. Click Save.

  7. In the Sections directory, click Add a new section. Name your new section product-pre-order-template:

    Create new section
  8. Click Create section. Your new product-pre-order-template.liquid file will open in the code editor. Delete all of the default code, so that the file is blank.

  9. In the Sections directory, click product-template.liquid. Copy all of the content from this file, and paste it into your new product-pre-order-template.liquid file.

  10. In your new product-pre-order-template.liquid file, find and replace the Add to cart button text.

    Look for this code:

    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    

    Replace it with:

    <span id="AddToCartText">{{ 'Pre-order' | json | remove: '"' }}</span>
    

    In the same file, look for a <script> tag that contains this line of code:

    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    

    Replace it with:

    addToCart: {{ 'Pre-order' | json }},
    

    Every theme is different, and the code used for the Add to cart button text may vary. If you replace instances of products.product.add_to_cart with Pre-order (leaving all other punctuation intact), then your Add to cart button text should change to read Pre-order instead.

  11. Click Save.

Assigning the template to a product

  1. From your Shopify admin, click Products.

  2. Click the name of the product you want to make available for pre-order.

  3. In the Theme templates sidebar section, change product to product.pre-order:

    Assign template
  4. Click Save.

Inventory levels

If you are tracking inventory for a product, then you might want to allow customers to purchase pre-order products even if they have an inventory amount of 0.

To edit the inventory settings for a product:

  1. From your Shopify admin, click Products.

  2. Click the name of the product you want to make available for pre-order.

  3. Click Edit next to the first variant:

    Edit variant
  4. Check Allow customers to purchase this product when it's out of stock:

    Inventory policy
  5. Click Save.

Authorizing payment for pre-orders

When selling products as pre-orders, you should not capture payment immediately unless the customer is aware that they are purchasing something that is not currently available. Instead, you can authorize a payment without capturing the funds immediately. Authorizing a payment at the time of checkout allows you to capture the funds at a later date, when the product is available and you are ready to fulfill the order.

  1. Scroll down to find the Payment authorization section.

  2. Select Manually capture payment for orders:

    Payment authorization
  3. Click Save.

Creating a pre-order product page template

To change the Add to cart button text for your pre-order products, you must create a new product template.

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Templates directory, click Add a new template.

  3. From the drop-down menu, select product, and name the template pre-order:

    Create a new template
  4. Click Create template. Your new product.pre-order.liquid template will open in the code editor.

  5. Find and replace the Add to cart button text.

    Look for this code:

    <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    

    Replace it with:

    <span id="AddToCartText">{{ 'Pre-order' | json | remove: '"' }}</span>
    

    In the same file, look for a <script> tag that contains this line of code:

    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    

    Replace it with:

    addToCart: {{ 'Pre-order' | json }},
    

    Every theme is different, and the code used for the Add to cart button text may vary. If you replace instances of products.product.add_to_cart with Pre-order (leaving all other punctuation intact), then your Add to cart button text should change to read Pre-order instead.

  6. Click Save.

Assigning the template to a product

  1. From your Shopify admin, click Products.

  2. Click the name of the product you want to make available for pre-order.

  3. In the Theme templates sidebar section, change product to product.pre-order:

    Assign template
  4. Click Save.

Inventory levels

If you are tracking inventory for a product, then you might want to allow customers to purchase pre-order products even if they have an inventory amount of 0.

To edit the inventory settings for a product:

  1. From your Shopify admin, click Products.

  2. Click the name of the product you want to make available for pre-order.

  3. Click Edit next to the first variant:

    Edit variant
  4. Check Allow customers to purchase this product when it's out of stock:

    Inventory policy
  5. Click Save.

Want to discuss this page?

Visit the Shopify Community