Tutorial: Allow pre-orders for products

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

Note: Pipeline product tabs have not been incorporated with this template for your pre-order template. Only the regular product description will be included.

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.

Open your code editor:

https://shopify.com/admin/themes/current

On the left folder view, choose Add a new section under the Sections folder:

Name your new section:

product-pre-order

Click the Create section button:

Replace all the default code from Sections product-pre-order-template from:

with all the code from this link:

Click to view code

Save the Sections page.

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-sale product page

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

6

Product page settings

Open your Theme Editor:

https://shopify.com/admin/themes/current/editor

Browse to the product in the theme editor and choose Product page settings - You'll now have these two new options:

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

(2) This allows you to customize the Add to Cart text/label. The default is Pre-Order. You can modify the button text to your liking here.

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:

Still need help? Contact Us Contact Us