Tutorial: Allow pre-orders for products

In this tutorial we will show you how to sell specific products as pre-orders in Pipeline. 

Example product page:

1

Configure Payment Configuration

From your Shopify admin, click Settings (bottom left), and then click Payments:

Scroll down to find the Payment authorization section, select Manually capture payment for orders:

2

Create a new Section page

To have a product's page say Pre-order instead of Add to cart, you'll need to make a new product section file and template file, then assign the template to products which can be pre-ordered.

This tutorial works best with the live published theme. The reason is products in the product admin only allow you to choose templates form the live theme. Therefore, if you create new templates in a draft theme, they won't be available to use or test. You can get around that by also creating templates in the live theme as a workaround. 

Open your Code Editor. 

Quick link if the theme is live/published:
Open Code Editor

(NEW STEP)

Check if you have a newer version of Pipeline with Shopify's Product Media support (new product media format types):

Verify if you have media.liquid in the Snippets folder:

In the Sections folder, choose Add a new section:

Call the new section:

product-pre-order

Example:

Choose the Create section button to continue.

Erase all the default code that's generated on the right side:

Replace with all the code from one of these code options:

OPTION A: - Pipeline 5.0 and higher with Shopify's new product media support (see above if unsure):

Click to view code

OPTION B: - Pipeline 4.7 or earlier versions with Shopify's new product media support (see above if unsure):

Click to view code

OPTION C: Older versions of Pipeline 4.0 - 4.51 without new product media support (see above if unsure):

Click to view code

OPTION D: Legacy versions of Pipeline -  3.x:

Click to view code

Save the file:

3

Create a Pre-order Product Template

Under Templates, click Add a new template. From the drop-down menu, select product and name the template pre-order:

Click on the Create template button to continue. The new product.pre-order.liquid template will automatically open in the code editor.

Change the default line of code from:
Change to:

Copy & Paste:

{% section "product-pre-order" %}

4

Assign the template to product.pre-order

After you've created your new pre-order product template, mapped it to the new section product liquid file, you'll be able to select the product.pre-order template on your individual product pages:

From your Shopify admin, click Products

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

In the Theme templates section, change product to product.pre-order in the dropdown:

Click Save to confirm your change to the product

5

View your pre-order product page

Check to verify your Pre-order button is displaying correctly with products you've modified: 

6

Product page settings

Open the Theme Editor:

Or:

Quick link if the theme is live/published:
Open Code Editor

Important: Browse to the product in the theme editor that you've assigned the product-pre-order template to. This is the only way to see the new Product pre-order section settings:

You'll see these new options for your section settings:

(1) You can turn on or off the Product Price from the page including the Add to Cart button. 

(2) The text field allows you to customize the pre-order button (Add to Cart button) text. 

Example without price and custom button text:

Tabs:

If you have Local tabs, you'll need to add the Description H6 tab option back in. Since this is a separate template, it won't inherit the settings from your regular Product page settings:

Needed for Local Tabs:

Once this block has been added, Local tabs will be activated. The <h6> tab titles will be pulled-in from the product description. 

Global tabs will also need to be recreated - That content will only appear on other products using the pre-order template. 

Inventory Levels

If you are tracking product inventory, then you might want to let customers continue to purchase pre-order products even if they are out of stock (have an inventory amount of 0).

From your Shopify admin, click Products, then choose Inventory

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

Under Variants, check Allow customers to purchase this product when it's out of stock for all variant types:

Click Save

Bulk Variant Changes
You can edit all the variants of a product at the same time by using bulk editing: