Product pages - Allow pre-orders for products

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

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.

• Sectioned themes
• Non-sectioned themes

[henriettaprice]

Hi there, thank you so much for this tutorial, it worked perfectly! 

Im just wondering how to get the quantity picker showing when you have pre order template enabled. As its currently only the 'preorder' button available 

thanks so much! 

Henrietta 

[amber101]

Please help! After following all steps and disabling dynamic checkout, I cannot find the code/script: 

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

anywhere !!  I'm stuck at step 11 😞 I have the style narrative if that helps!

[Algalsc]

I'm also using Narrative and can't find the add-to-cart code to replace. My website is www.perfectdd.com, can you help enable pre-order please?

[karenACC]

I am excited about having a way for my customers to pre-order an item when it is out of stock. Will this automatically change to pre-order when an item is out of stock? Or do I have to manually mark each item to pre-order? Can I keep the variety out of stock that I want to change to pre-order in with the other same items? or do they have to be somewhere completely else on my website?

[Alex-Miller]

After you create the new page template you just change the templates on products that may go out of stock that you wish to support preorder, and mark the product “continue selling when out of stock”

When out of stock that will be indicated on the page as preorder. 

I suggest you try it with a test product before implement site wide. 

You can ping me directly if you need any help 🙂

[ErikLeighland]

@Alex-Miller Any chance you could help!?  I have multiple items on pre order, new shirts. Every time a customer has to check out with each item. Is there a way to have the customer add items to their cart and check out with multiple pre orders? 

GOOD RIDE SURF CO

[Alex-Miller]

Sure it's possible. I checked your site - there seems to be a bug. 

Please feel free to email me 🙂

[wickerpedia]

These changes work great to change the Product Page. But many users will also be using the Featured Product widget on their Home page and thus also need to make the same change in the file:

featured-product.liquid

[ashleighmaree]

This worked great!
Do you know if there is a way that inventory stock will show as Add to Cart, whilst the "allow to purchase whilst out of stock" will show as the Pre-Order button?

[TyW]

Non-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 something 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 an item that will ship at a later date, then you can 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:
   
   
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:
   
   
5. Click Create template. Your new product.pre-order.liquid template will open in the code editor.
6. Find and replace the Add to cart button text.
7. 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>

   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 }},

   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 theme.liquid file instead.
   
   
8. 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:
   
   
   
   
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:
   
   
   
   
4. Check Allow customers to purchase this product when it's out of stock:
   
   
   
   
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.

[maxscloset]

Hi,

This worked for me, except that now it made the order text boxes wider, thus making the product image smaller. How can I get the layout back to how it was (red shirt), with the Pre-Order changes? See images below

[Dallas-modern12]

I cannot find the Add to cart section in the code to edit for the pre-order?

---

[PaulWS]

I have followed the instructions and am using Debut theme.  Pre-order button is working, but for the variant that I have in stock, it still says pre-order.  How do I adjust this so it actually shows as an add to cart variant?  Thanks for the info so far. 

[CIVICSports]

I've followed all intrucstion and using the Debut theme. It works well on the product page, showing Pre-Order Button. But once testing to place the order, i got the error message : "Your cart has been updated and the items you added can’t be shipped to your address. Remove the items to complete your order."

The shipping rules have been set same as all other products... so I'm on sure where the problem is ?

[molliemais]

I am also having this issue, did you ever resolve it?

[Jennifer42]

hi did you get any response to this ? 

[Jennifer42]

are you still searching as well? 

All of my items are now on prep-order even the one that are in stock 

[danielb]

hi i searched through the file and i dont have this 

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

in there 

[Lilsquirrel]

This worked for me but my variants currently in stock now show as 'Pre-order'. 

How do I fix this?

Thanks in advance!

[mtraff]

Has anyone use Pre Order Now or other plugins?  My concern is the access level that those plugins require to your account.  I am curious why Shopify just doesn't allow this as their base functionality in there platform.

I have the Venture theme and the code is not the same as the instructions, and based on comments it appears that variants will not work?

Has anyone done this with the venture theme?

[rnickerson]

This is my question too. I've been asked to review this process to see if we can offer pre-order for out of stock products in our shop. Looking over the steps it seems that the end result of following this tutorial would have your product page always show the preorder button regardless of stock quantities.

This code discriminates based on availability:

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

This code just always shows the same Preorder text:

<span data-add-to-cart-text>
  {{ 'Pre-order' | json | remove: '"' }}
</span>

Additionally, why does this snippet hard-code the Pre-order text rather than using the settings data? And why is it piped through the json filter and removing quotes. I'm probably just missing something here so I feel like there needs to be a bit more explanation around this thinking.

I get that this would only happen for products where you change the template from `product` to `product.pre-order`, but is that the expected workflow here, that you have to manually change the template whenever you notice that you're out of stock?

Wouldn't it be better to replace the text with similar logic?

<span data-add-to-cart-text>
  {% unless current_variant.available %}
{{ 'Pre-order' | json | remove: '"' }}
  {% else %}
{{ 'products.product.add_to_cart' | t }}
  {% endunless %}
</span>

Also the tutorial doesn't mention anything about what the practical implications are, if any, of switching from automatically to manually capturing payments. Does this affect the way orders are placed? Charged? The workflow around order completion?

Again, I'm sure I'm missing something here, so if anyone can answer any of these questions I'd appreciate it. Thanks!

[phoebeelin]

Hi, I followed all the instructions on this and I replaced the code with the one you said because mine all said pre-order disregarding the availability. However, once I changed it, I test it and set an item to no stock and it still says add to cart? How do I fix this? I have the debut theme btw.

[MichaelGam]

I can't seem to find the Themes Templates sidebar section. I followed the instructions in 1 and 2, but see no reference to Theme Templates on the product page.

 Where is this? 

Thanks. 

[SaraSteapedSlow]

Is it possible to create a confirmation email specifically for when a pre-ordered item is purchased? 

[Ma6]

I followed all the steps ,however the products image became smaller and some coding text appeared at the bottom of product description 

so I deactivated the product on preorder 

[theshortspine]

I followed the instructions for the pre-order template and now have one. But the product images don't show up as a grid. What do I need to change? I'm on Brooklyn theme (sectioned). Thanks!

[roseblack]

I got this to work using some of the tips in the comments; however, I have 1 weird issue remaining:

When you load the product page, it says "add to cart," but when you switch the variant, it swaps over to "pre-order" and stays that way for all of the variants. How can I get it to read "pre-order" when you land on the page rather than having the awkward swap?

Thank you!

[Alex-Miller]

Sorry for the slow response here. Yes this is possible.  You'll want to set the button text as well for the product. Please feel free to email or DM me.

[hbeau]

Hi there,

Thanks so much for sharing this! I've gone through and edited all the code as you said to do- but when I go to the product to change the "Theme Template" it still only have the option of 'default product' and don't give me the option for 'product-pre-order'. I have everything saved exactly as the instructions stated and I've tried twice now! Hoping you can help me with this! 

[OliUK]

Hi everyone,

Just adding to this thread as Dawn will be the new default template in Shopify soon.

A lot of the same applies, but app blocks/sections-everywhere is a big change.

I put together this guide over the last couple of weeks on integrating with and without an app.

Cheers,

Oli

——————————

Founder @ www.preproduct.io

The smarter way to launch products. 

[spudnik95]

Hi,

I'm using narrative theme and have followed the sectioned theme instructions. I have changed all of my products to the pre order template (after recoding with your guide), I disabled the dynamic checkout buttons, changed the capture setting to manual, turned the quantity to 0, and allowed the product to be sold after selling out and the preorder button still doesn't appear. Do you have any other suggestions? 

Thank you!

-Hana

[cherieorganic]

Does this work with subscription too? I'm using ReCharge shopify app for reocurring subscription.

[BR16]

I made it to step 11 and there was nothing similar to:

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

How do I proceed if there is nothing that says add to cart?

[destineesmith]

Why is "cf" showing underneath my product's images when I do this coding? Anybody know how to get rid of it? It annoys me and looks unprofessional.

[SarahJ1]

If I change the payment capture to "manual" - will that change the method for all my orders? I only want to do a pre-order for one item and don't want to have to manually input payments for all my other sales.