Product pages - Allow pre-orders for products

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

Did you ever get an answer? This is the issue with mine

1 Like

Hi! Yes i solved this today!!

(Hat tip to @John_G2 for the inspiration to loop through the variants for their policy and quantity in liquid INSIDE the JS)

You can check the example on my development shop:

https://aimhuge-dev-dec20.myshopify.com/products/product-preorder

Password is 123456 (check the catalog → product-preorder)

How to do it?!

1. Followed the tutorial linked on the first page of this thread to create a new template option for products that allow preorder

https://community.shopify.com/c/Shopify-Design/Product-pages-Allow-pre-orders-for-products/m-p/625914/highlight/true#M42

2. BUT skip this part of the tutorial

3) Replace the product strings bit of script in product.pre-order.liquid


with the following:


CC @Jennifer42

Script updated to handle products with only one variant (aka no variant selector)


Thank you for the tip! I managed to do the pre-order and get it to work. However I would like to add a message in the section to inform the customer about delayed shipping.

May I know how I should do that?

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

Sections > product template liquid > line 152 >

type your message about delayed shipping here

This is the only way I could think of doing it.

2 Likes

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 :disappointed_face: I have the style narrative if that helps!

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?

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?

1 Like

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 :slightly_smiling_face:

did you ever get an answer to this?

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

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

Please feel free to email me :slightly_smiling_face:

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.

Hi @Alex-Miller ,

Thank you for providing the tutorial for adding pre-order function for variants! I’m using debut theme (Shop Link) and was able to follow the steps until step 3 as I have a much longer code than yours with the “theme.productStrings” part of product.pre-order.liquid and I’m not sure which part should be replaced. I attached the full script of my product.pre-order.liquid below. Grateful for your advice the steps forward, please. Thanks in advance!

Yours:

Mine:

{% 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' %}

{% assign current_variant = product.selected_or_first_available_variant %}

Leatheraholicx

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.

hello @leatheraholicx

The product strings appear to be the same. I think you can just replace that part of the script. If you need support, please feel free to DM or email me.

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!