Allow pre-orders for products

allow-pre-orders.md

layout	title	sidebar_title	description	incompatible-themes	supported	nav
default	Allow pre-orders for products	Allow pre-orders	If you have a product on back order, you can display it as pre-order only on your online Shopify store.	Minimal Solo	false	group products

{% block "note-caution" %} This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function. {% endblock %}

This customization lets you sell specific products as pre-orders. You can also use this method to continue selling products that are on back-order.

{{ '/customization/product-with-pre-order-button.png' | image }}

Authorizing payment for pre-orders

According to law, when selling items as pre-orders, you are not supposed to capture payment immediately unless the customer fully understands that they are purchasing a product or service that will be delivered at a later date. But you can authorize the payment without capturing the funds immediately. This allows you to capture payment at a later date when you are fulfilling the order.

{% block "note-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. {% endblock %}

To set your payment gateway to only authorize a payment without capturing it:

{% include admin_sidebar/settings-payments.html %}

2. Scroll down to find the Payment authorization section.

3. Select Manually capture payment for orders:

   {{ '/support/payment-authorization.png' | image }}

4. Click Save.

{% block "note" %} You can still capture funds immediately for a pre-order product, as long as you communicate to your customers that you are charging them in advance for an item that will ship at a later date. {% endblock %}

Create a pre-order product page template

To have a product's page say Pre-order instead of Add to cart, you must make a new product template and assign it to your products that can be pre-ordered.

To create a new product template:

{% include admin_sidebar/online-themes-edit-html-css.html %}

3. Under Templates, click Add a new template.

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

   {{ '/manual/customize/pre-order-create-new-template.png' | image }}

5. Click Create template.

   The new product.pre-order.liquid template will automatically open in the code editor.

6. Replace the code {% section 'product-template' %} with {% section 'product-pre-order-template' %}

7. Under Sections, click Add a new Section. Call your new section product-pre-order-template and press save.

8. Open the sections/product-template.liquid file and copy all of its contents into your new product-pre-order-template.liquid file.

9. In the code editor, find and replace the button label "Add to cart" with the text "Pre-order".

   The code that you need to replace is different in every theme. See the replacement code section for advice on finding the code to replace, and a list of replacement codes for official Shopify themes.

10. Click Save to confirm your changes to the new product section.

Assign the template to a product

{% include admin_sidebar/products.html %}

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

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

   {{ '/support/pre-order-change-template.png' | image }}

4. Click Save to confirm your change to the product.

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

There is a setting for this for each product you've created in Shopify. To edit this setting:

{% include admin_sidebar/products.html %}

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

4. Click Edit next to the first variant:

   {{ '/support/pre-order-edit-variant.png' | image }}

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

   {{ '/support/pre-order-inventory-policy.png' | image }}

6. Click Save.

{% block "note" %} This setting is controlled variant by variant, so you must change the setting for each variant of a pre-order product. You can edit all the variants of a product at the same time by using bulk editing. {% endblock %}

Replacement code

The code that you need to replace in product.pre-order.liquid is different depending on your store theme. The following method should work with similar custom or third-party themes, but every theme is different.

Essentially, you need to replace the label of the "Add to cart" button with the text "Pre-order", whether the label appears directly in the button code or it is dynamically loaded with a translation filter.

{% raw %}

Debut and other Sectioned Themes

Find:

Replace with:

{{ 'products.product.add_to_cart' | t }}

Replace with:

{{ 'Pre-order' | json }}

The layout/theme.liquid may also need to be changed

Find:

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

Replace with:

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

Boundless, Brooklyn, Simple, and Venture

Find:

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

Replace with:

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

Classic and Launchpad-Star

Find:

add_to_cart : "{{ 'products.product.add_to_cart' | t }}",

Replace with:

add_to_cart : "Pre-order",

Jumpstart

Find:

$addToCartText.html({{ 'products.product.add_to_cart' | t | json }});

Replace with:

$addToCartText.html({{ 'Pre-order' | json }});

Lookbook

Find:

<button type="submit" name="add" value="{{ 'products.product.add_to_cart' | t | escape }}" class="btn__shoppingbag">{{ 'products.product.add_to_cart' | t }}</button>

Replace with:

<button type="submit" name="add" value="{{ 'products.product.add_to_cart' | t | escape }}" class="btn__shoppingbag">Pre-order</button>

New Standard

Find:

$addText.html({{ 'products.product.add_to_cart' | t | json }});

Replace with:

$addText.html({{ 'Pre-order' | json }});

Pop and Supply

Find:

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

Replace with:

Pre-order