Product pages - Allow pre-orders for products

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’ %}

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

How do I fix this?

Thanks in advance!

2 Likes

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?

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!

1 Like

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

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

{{ ‘Add to Cart’ | json | remove: ‘"’ }}

Replace it with

{{ ‘Pre-Order’ | json | remove: ‘"’ }}

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

3 Likes

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?

Did you create the temple “pre-order”?

Yes I did.

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:

{{ 'Pre-Order' | json | remove: '"' }}

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

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.

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?

can you help me do it in the debut theme? :slightly_smiling_face:

Hi,

I’ve implemented this and have the pre-order working as it’s supposed to, but we have just noticed that the product codes and collection names are not showing up on the product pages for pre-orderable items. Any ideas as to how to solve this? Do I possibly also need to create a 'product-details-pre-order-template.liquid as well? We have sites using the Mobilia theme and also some using the Envy theme, so I need to fix it on both themes as we’ve found that the issue is the same in both.

I just changed the translation: add to cart —> Pre-order

What’s the different? I need the pre-order to appear once i’ve not products on stock.

If I change my payment to manually capture payment, will this affect all other purchases outside of the pre-order style?

@YuriLee I asked this along with several other operational and procedural questions a while back and got zero response from the OP or anyone else. Hopefully you’ll have better luck…

Assuming this is set up correctly, will there be a new API event be automatically created or will it need to be created?

I’m hoping to set up a pre-order specific email series in Klaviyo. I know the confirmation email goes out of Shopify, but would need either an event or property I could query in Klaviyo.

is there specific themes to apply this feature?

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.