Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Product pages - Allow pre-orders for products

Product pages - Allow pre-orders for products

TyW
Shopify Staff (Retired)
463 71 1239

If you have products that are out of stock, you can sell them as pre-orders. This is done by creating an alternate product template, and editing your payment settings. You can also use this customization to continue selling products that are on back-order.

pre01.png


Note: This customization isn't compatible with dynamic checkout buttons. If your theme supports dynamic checkout, then prevent the buttons from showing by following the steps to hide dynamic checkout buttons on product pages.

 

Sectioned and non-sectioned themes

 

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

 

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

 

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

 

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 112 (112)

TyW
Shopify Staff (Retired)
463 71 1239

 

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.

    pre02.jpg

  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:

    pre03.jpg
  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:

    pre04.jpg
  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:

    pre05.png
  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:

    pre06.png

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

    pre07.png

  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.

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

KHooper
Visitor
2 0 6

Doesnt seem to work. When I create a new product.pre-order.template there is nothing in it. Just 5 lines of code saying the contents can be found in sections. So there is no way for me to alter the template before creating a new section to be used?

KHooper
Visitor
2 0 6

Think I commented on the wrong one. 

 

When I create a new product template, it has only 5 lines of code in it, just telling you the contents of that file can be found in the sections file. 

I have tried creating a new sections file, copying the code from the existing one, and changing the "addtocart' to 'pre-order' but it doesnt do anything. 

 

Any more suggestions?

AntonyNaude
Visitor
2 0 2

I got the same, no script to change... in fact I cannot find add_to_cart anywhere... hoping Ty will respond

FirstLightMedia
Visitor
1 0 0

Got it to work. The line I found was (line 178) I'm using debut theme

 

<span id="AddToCartText-{{ section.id }}">

 

hope this helps!

 

AntonyNaude
Visitor
2 0 2

I'm which script did you find.

lgitvapes
Visitor
1 0 0

I have the debut theme however, mine stops at line 171

farzadsbakhtiar
Tourist
6 0 2

The text and fine-print at the end of step 7 in Ty's instructions might help.

LeFrances
Visitor
2 0 0

same here. I do not see the add to cart line either, only 

 

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

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

hasheleyc
Excursionist
12 0 29

I have Minimal Theme and even used this method back when I was using Brooklyn Theme:

Create a template > Product  > name it pre-order

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

 To ‘product-pre-order’%}

 

Create a section call it product-pre-order

Erase anything that is entered here and replace it with the entire code from the product-template.liquid

Find the line that says

                <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">

              <span id="AddToCartText">{{ 'Add to Cart' | json | remove: '"' }}

</span>

Replace it with

                <button type="submit" name="add" id="Pre-Order" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">

              <span id="PreOrderText">{{ 'Pre-Order' | json | remove: '"' }}

</span>

 

Save everything

 

Go back to the product in your store as if you are editing it, near tags it should say product suffix, click on the dropdown menu and select product-pre-order. Preview to make sure it is working properly and save!

Let me know if you still need help

ttplf
Visitor
3 0 0

I've edited my templates. But when I go to products to look for the dropdown to change the product to product.preorder I don't see it. Would it have anything to do with using shopify lite?

hasheleyc
Excursionist
12 0 29

Did you create the temple “pre-order”?

ttplf
Visitor
3 0 0
Yes I did.
hasheleyc
Excursionist
12 0 29

Okay great, and make sure the new pre-order template says something like this:

{% comment %}

  The contents of the product.liquid template can be found in /sections/product-template.liquid

{% endcomment %}

 

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

{% section 'product-recommendations' %}

 

then go back to the product-pre-order.liquid SECTION you created and make sure you’ve tweaked the “button” code to say something like this:

<button type="submit" name="add" id="Pre-Order" class="btn {{ btn_class }}{% ifsection.settings.enable_payment_button %} btn--secondary{% endif %}">              
<span id="PreOrderText">{{ 'Pre-Order' |
json | remove: '"' }}

</span>

 </button>

you’re basically removing anything that says addtocart with Pre-Order

 

if you still can’t find the preorder template in your products edit option then I’m sorry it may have to do with the theme you are using

ttplf
Visitor
3 0 0
Thanks for the help, I'm using the debut theme. The pre-order button is
working, Now I need to get the buy now button from showing on the pre order
product.
brinago1
Excursionist
11 0 3

I used this code and it worked for the first switch if size.

For example:

size small, large, and XL are available then size Medium in sold out.

When I open the page the default size is small and the button says add to card

However when I change it to Large size (even though it is available) it changes to preorder.

 

How can i solve this?

brinago1
Excursionist
11 0 3

can you help me do it in the debut theme? 🙂

h0nestale
Tourist
4 0 5

This really worked combined with the steps from the the main article

Follow steps up to #10 from the main discussion - pre-order template and the section. 

 

Then in the pre-order section - editing the code as below. 

Create a section call it product-pre-order

Erase anything that is entered here and replace it with the entire code from the product-template.liquid

Find the line that says

                <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">

              <span id="AddToCartText">{{ 'Add to Cart' | json | remove: '"' }}

</span>

Replace it with

                <button type="submit" name="add" id="Pre-Order" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">

              <span id="PreOrderText">{{ 'Pre-Order' | json | remove: '"' }}

</span>

Save everything

 

I did not change anything in payment section since I created automatic discount for the pre-order and advertised on the product page.

 

In a sense you just need a product template with Add to Cart button replaced with Pre-Order.

 

 

Skateboardselle
Tourist
8 0 0

I cannot get mine working the way I need I was just email not credit cards 

hain
Visitor
1 0 0

Hi having the same issue of not finding the add to cart script. 
Are you able to get a solution on this?

axcessathletics
Visitor
1 0 0

The same thing happens to me when I follow the first two steps. It only shows 5 lines and nothing else to edit!?

ToxonTech
Visitor
2 0 6

Got the pre-order button working - but it still shows "Buy Now". Can we hide that button somehow?

 

(Also, hi Ty - it's Alex from the App World days)

ToxonTech
Visitor
2 0 6

Figured it out! 

 

Just had to turn off "Show dynamic checkout button" in theme > customize > product section

 

 

VandaP
Visitor
1 0 0

I have done all that's suppose to do, even turn off "Show dynamic checkout button" in theme as said by ToxonTech. But it's still showing both the 'pre-order' button and also below it shows the 'Buy it Now' button.

 

How to take that off? 

coziekids
Visitor
2 0 0

Anybody figure this out? I still can't get rid of the Buy it Now button under the Pre-Order button.

Amitjaiswal
Shopify Partner
29 0 7

Hey before starting the blog he mention about payments provider to do it on manually do that steps the buy it now button will disappear .Still Any query askme at amitj4111@gmail.com

Thanks
JerneDesign
Tourist
4 0 2

I was able to disable it by adding comments tags as per instructions here. 

https://community.shopify.com/c/Shopify-Discussion/Remove-the-Buy-It-Now-Button-from-a-Pre-Order-Tem...

Hope it helps

as091
Visitor
1 0 0

is there specific themes to apply this feature? 

Alex-Miller
Excursionist
18 2 4

Hi @ToxonTech,

  Don't know if this is still relevant but I solved this one by commenting out / deleting the lines that show the payment button, which is just a couple lines below the preorder button code:

Aka delete this code:

{% if section.settings.enable_payment_button %}
         {{ form | payment_button }}
 {% endif %} 

 

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
Jennifer42
Tourist
11 0 4

Tried this! still all of my items are on pre-order even thought some of them are available 

Alex-Miller
Excursionist
18 2 4

You have to switch templates

 

Yan_Zhang_0-1612148433714.png

 

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
Jennifer42
Tourist
11 0 4

Already did! Still not working! all of my items show now PRE-ORDER 

I just want the ones that are out of stock to show PRE-ORDER the other ADD TO CART 

Alex-Miller
Excursionist
18 2 4

hi @Jennifer42 

  I spent a little time coding trying to accomplish that this morning - basically it will be a serious coding job - not just one to two lines of code like the above. 

 

 Without coding, the easiest thing to do will be to use one template for items that are in stock and another template for items that are out of stock.  I will look into tools to automatically update the template when the stock level changes... and I will also look into accomplishing this with code. If i find the time to make it happen, i'll share my code here.

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
Jennifer42
Tourist
11 0 4

I would be so grateful If you have time to send me code modification please, that's the only thing missing for me !!! thank you so much @Alex-Miller 

 

San_Sio
Visitor
1 0 0

I am using Warehouse Theme. I cannot find these codes,

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

 Hope you can help me. Thanks.

ShopMaster99
Excursionist
31 0 25

This pre-order option looks like it could work really well for me. For those of you who have tried it, please let me know how the buttons work. If I change my product to the pre-order template but only set one variant to allow ordering when out of stock, do my other variants still show the 'buy now' and 'out of stock' buttons?

stellar97
Visitor
2 0 1

This was so helpful! Thank you for doing this! if anyone is looking for how they can delete the buy it now button here's a link to that! https://community.shopify.com/c/Shopify-Design/Removing-quot-Buy-it-Now-quot-button-on-some-of-my-pr...

Cloxy16
Tourist
4 0 2

Hello I followed this and it worked thank you! Can someone explain additionally how to add a ship date message to appear along with the pre order button so customers know when to expect shipping?

JerneDesign
Tourist
4 0 2

I managed to get around this by replacing the text between the comment tags below

{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}

with 


This product is temporarily out of stock, but you can PRE-ORDER it now and we will put it into production and deliver it to you as soon as possible. Payment is due at the time of purchase, and you will receive a shipping notification once the order is on its way to you.

 

in the product-pre-order-template.liquid code in the debut theme

 

Just replace the message with whatever you feel is appropriate.

ecompro
Tourist
57 0 2

Nice tutorial

A 1 second decrease in load speed can increase conversions by 1% – 7%. Get your store optimized by a Shopify expert
neeka_feh
Tourist
7 0 1

Where / when will this message pop up? Thanks for the comment btw! I successfully have added the pre-order button & removed the BIN button but now I want to make sure the customer knows the item is on pre-order. 

Valerossa
Visitor
2 0 0

My template doesn't seem to have 

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

instead it has

  <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
{% include 'product-form' %}

What can i do?

ruddygoodpizza
Visitor
1 0 1

I have the new Express Theme and I can't find this code

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

Help anyone ?

kkkkate
Visitor
1 0 0

 I am using minimal and this part isn't there..

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

In fact this is the only code I have..

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

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

 

(It's also not in the sections)

 

Anyone able to help please?

ClarkL
Visitor
3 0 0

did you ever get an answer to this? 

wearejewels
Visitor
1 0 0

I followed the step by step instruction but i could not find the following script that need to look for in product.pre-order.liquid file.

 

addtocart {{ 'Pre-order' | json }},

My template is Canopy please can you help. 

samueldthomas
Shopify Partner
8 0 3

For anyone looking to find the "missing code" I finally found the answer.

 

You can usually find the script in theme.liquid - but you cannot use the same code listed here as it will change ALL buttons to pre-order. 

Instead replace it with the line:

addToCart: {%- if template.suffix == 'pre-order' -%}{{ 'Pre-order' | json }}{%- else -%}{{ 'products.product.add_to_cart' | t | json }}{%- endif -%}

 

SaraSteapedSlow
Tourist
9 1 8

This is in response to comment:

 

Thank you this worked for me. One thing to note, when I copied and replaced this line of code verbatim it broke my nested menu. When I added the "," to the end of the line of code it worked perfectly. 

SydneyRugsOnlin
Visitor
3 0 0

Hi There 

Thank you for you help , notes for pre -order , 

I have a problem from the begin , 

I have created a pre-order-templet  but there is no  add_to_cart  line at all  after  <script>  line there is nothing instead of lines for other Apps.

I will appreciate very much if you could help me as I donot like to add another app for pre order .

Thanks