# Pre-orders

Pipeline can display a "Pre-order" button on any of your products without having to create a custom product template. We use a metafield that you can define easily and then start using the feature. Simply toggle on/off any product that needs to display the "Pre-order" button. 

On the main product page, the Add to Cart button is replaced with a Pre-order button:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FZ69TI1PcwBJqnuAOjCw3%2Fpreorder%20pdp%20example.png?alt=media&#x26;token=06d01a08-d939-4d92-95a9-c8b1cd98880a" alt=""><figcaption></figcaption></figure>

## How to

There are a few basic steps to set up and start using the pre-order feature. Here is a quick summary of the steps:

{% hint style="success" %}
**Basic steps**

1. Using the Shopify Admin under Settings, **define a product metafield**. The Content type is **True or false**.&#x20;
2. In the Product Setup, **toggle the setting to true** for any product you wish to display the "Preorder" button.&#x20;
3. Under Shopify Admin -> Payments, ensure your store can Manually capture payment
   {% endhint %}

### Step 1&#x20;

In the Shopify Admin -> Settings -> Custom data, choose Products:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FEOKvUUYRH4DHStcwDQUX%2FCustom%20data%20in%20Settings.png?alt=media&#x26;token=44ff4304-4d29-4764-a8ec-59794fceefda" alt=""><figcaption></figcaption></figure>

* Use the "**Add definition**" button to create a new product definition
* For the Name, use "preorder" or "Preorder" (no hyphen/dash)
* Change the Namespace and key from `custom.preorder` to **`theme.preorder`** (important):

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2F2BCZQMkWz2NwqJPEXOE1%2Fchange%20to%20theme.preorder.png?alt=media&#x26;token=fb3966cb-a109-4220-9eeb-9e60cff3793b" alt=""><figcaption></figcaption></figure>

* Verify that you've changed to **`theme.preorder`**
* Add an optional description
* Click on **Select type**, type in "true", and then choose "**True or false**":

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FvAIPD0FvUaO909j9tIE6%2Fuse%20true%20false.png?alt=media&#x26;token=1be61af3-a9fb-4715-b54a-498e2067088a" alt=""><figcaption></figcaption></figure>

* Verify that your settings look like the following:

<div data-full-width="true"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FlIFrjZuSYSbaCAkqTWpZ%2Fverify%20preorder%20metafield.png?alt=media&#x26;token=984e550b-3ce1-4a84-b1d5-39a62443448a" alt=""><figcaption></figcaption></figure></div>

* Use the **Save** button to complete.&#x20;

### Step 2

Now your can toggle on/off the setting on any of your products (the fun part).

* Under the **Shopify Admin -> Products**, choose a product. &#x20;
* Scroll to the bottom of the product setup, and to the Metafields section, here you'll find the new Preorder field.
* Toggle **On** to make that product display a "Pre-order" button on the product detail page.&#x20;

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FakK1luJ7iaePl58tRHQz%2Fpreorder%20setup%20on%20a%20product%20part%202.png?alt=media&#x26;token=2f63e4d3-4eaf-4228-8382-ff7791f8014d" alt=""><figcaption></figcaption></figure>

### Step 3

Shopify recommends that you manually capture payments if selling products that are not ready to ship. Contact Shopify Support for any assistance with your Payments setup. Here is a support article from Shopify:

{% embed url="<https://help.shopify.com/en/manual/orders/get-paid>" %}

## Bonus setup

You can add a custom product badge called "Pre-Order" to display on your collection pages or any section that used the Product Card:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FpL1I7Fv5Z1s5gL3VgZIZ%2Fpre-order%20badge.png?alt=media&#x26;token=195b56a5-d8bd-47b1-b876-6a79debaa793" alt=""><figcaption></figcaption></figure>

Follow our instructions on how to create a custom badge in Pipeline to easily add this feature:

{% content-ref url="../../collections/collection-pages/custom-badges" %}
[custom-badges](https://pipeline.groupthought.com/collections/collection-pages/custom-badges)
{% endcontent-ref %}