Product pages - Allow pre-orders for products

[TyW]

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.

Note: If you communicate to your customers that you are charging them in advance for a product that will ship at a later date, then you are able to capture funds immediately for a pre-order product.

1. From your Shopify admin, go to Settings > Payment providers.

2. Scroll down to find the Payment authorization section.

3. Select Manually capture payment for orders.

   

4. Click Save.

Caution: Authorization periods expire after a certain period of time. After an authorization expires, you may no longer legally capture payment for that order. Shopify Payments has an authorization period of 7 days. To authorize payments for a longer period, you must use a third-party payment gateway.

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. From your Shopify admin, go to Online Store > Themes.

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

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

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

   

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

6. Find the code:

   {% section 'product-template' %}
   

   Replace it with:

   {% section 'product-pre-order-template' %}
   

   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 }},
   

7. Click Save.

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

   

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

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

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

    Look for this code:

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

    Replace it with:

    <span data-add-to-cart-text>
      {{ 'Pre-order' | json | remove: '"' }}
    </span>
    
    

    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.

    Note: If you can’t find the above lines of code, then they might be found in your product-pre-order-template.liquid file instead.

12. Click Save.

Assigning the template to a product

1. From your Shopify admin, go to Products > All 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:

   

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, go to Products > All products.

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

3. Click Edit next to the first variant:

   

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

   

5. Click Save.

Note: This setting is available for each variant, so you must change the setting for each one that you would like to be available for pre-order. You can edit all the variants of a product at the same time by using bulk editing.