How to modify "add to cart" button into "pre-order" button?

[aniseedtech]

Hi all!

 As titled. I am using this tutorial to change to button into pre-order button, but can't find the <script> tag nor can I find the addToCart:{{ 'products.product.add_to_cart'  | t | json}}, to replace. I am stuck half way at step 10. 

I don't think the code is inside the product-template.liquid, but where would the button text code be? I used addToCart as my search phrase and can't find anything on all my templates or sections templates. Perhaps the template I have is using other names to define addToCart?

Minimal is my theme for my store. Thanks in advance!

[Lizzy · Accepted solution]

Hello.

I’m Lizzy. A Guru on Shopify’s support team.

You're absolutely right. I took a look through Minimal's code and found that the piece of code you're looking for is actually in the theme.liquid file.

You can see in this screenshot that the script tag and addToCart: {{ 'products.product.add_to_cart' | t | json }} is located starting at line 34.

I hope this helps you get your pre-order options set up! Are you planning the release of a new product, or giving customers the option to purchase items that are sold out? Do you have a marketing push planned to let your audience know? Feel free to reply here if you have any questions about what I've said!

Thank you,

Lizzy | Shopify Guru

[aniseedtech]

Thanks Lizzy! It works and the buttons has changed text and become pre-order buttons!

However, since I have edited the theme.liquid file instead of a product-pre-order-template.liquid, I will need to switch the whole thing back to get my normal add to cart buttons back. From my admin->products->product name->Theme templates I can choose the buttons freely between product or product.pre-order, but the buttons won't change back to add to cart since I edited the theme.liquid file. I don't really mind because it doesn't take much to revert everything, but I do hope shopify has a pre-order button to built into the system.

And yes, we are releasing a new product.

[Lizzy]

You're welcome! I'm glad you were able to make the change.

In terms of a setting up a button that wouldn't adjust your entire site, it would be possible to use an app like Pre‑order Now or Pre‑Order Manager. These have different settings that allow you to use the pre-order option for certain products.

Another solution would be to reach out to a Shopify Expert to discuss the option of them coding something like this into your theme directly for you. They may be able to set it up so that it wouldn't affect all of the Add To Cart buttons in your store.

I can see how this would be a useful feature for merchants however, so I have passed your feedback along to our developers. This way they are aware a built in pre-order option is something store owners are looking for! It's exciting to hear you're launching a new product! Have you had a chance to check out the marketing section in the admin that you could use to promote? You can find out a bit more about it here. 

Thank you.

Lizzy | Shopify Guru

[Baephire]

Lizzy, I know this was over a year ago, but if you could also suggest a "Made to Order" button, that would incredible! 

[HeyShopr]

You could try the following:

In step 10 of the tutorial (https://help.shopify.com/en/themes/customization/products/add-to-cart/allow-pre-orders#sectioned-th...), keep the following code unchanged (ie. don't replace it):

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

Then in the theme.liquid file, replace the following line of code (the one mentioned in Lizzy's reply):

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

with

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

Make sure you don't accidentally delete the comma at the end of the line when making your changes.  Hope this helps!

Please note I haven't tested this code, so cannot make any assurances that it will work.  

[ZivHodiva]

HeyRay, your solution works perfectly for Brooklyn, thank you so much 🙂

I would like to add that my Brooklyn theme as several tweaks so the below might be relevant only for me, but just in case:

When placing HeyRay's code the  Add to Cart button does display 'Pre-Order', but... only after selecting a variant. On page load it still read Add to cart.

to solve it I made the below change in the new Product-pre-order-template.liquid that I created according to the before mentioned tutorial, the below code starts at line 339, I added line 340 and simply typed the words Pre-Order, then added a {% comment %}{% endcomment %} so that the code will ignore the line below.

{% if current_variant.available %}
Pre-Order
{% comment %}above line replaced below line for page load add to cart text pre-order, Ziv March 14th
{{ 'products.product.add_to_cart' | t }}{% endcomment %}

[bsmart_]

Hi all

I'm looking to run like a 'smoke test' for my website and want to modify the 'add the cart' button to instead be a contact form to grab email addresses instead of going to check out. 

Can someone let me know if they've done this before or knows how to?

Thanks!

[logiprime]

Am using Narrative Theme. I'm having the same issue once the page load "Add to Cart" button is visible until I select a variant which then change from "Add to Cart" to "Pre-Order". I'm unsure as to where i should add your suggested code. I would appreciate some assistance please

[rico5]

You are a Rock Star.  I'd like to know further how I can assign the "pre-order" button change only to specific variants on a product page?  Thank you!

[JB6]

Do I understand correctly that this solution would change ALL "add to cart" buttons to "pre-order?" If so, I'm not in agreement that this is an accepted solution. I think it would be less than the norm for a store to need to set all products to pre-order at the same time. 

I would love the ability to apply "pre-order" to particular variants as well. I run out of particular sizes more often and have the need to allow for pre-orders by size. 

[ZivHodiva]

JB6, if you look in a product page in your shopify admin, you will see this box:

In your admin you probably won't have the product.pre-order option.

To add that option use this guide:

https://help.shopify.com/en/themes/customization/products/add-to-cart/allow-pre-orders#sectioned-the...

Once done, you can select which products use product.pre-order template, only those products will have the Pre-Order button (all other products will continue to show your regular Purchase/Add to cart button.

The tutorial is not perfectly suited for all store templates, for example it needed a bit of tweaking to work with my store Brooklyn theme.

You can read earlier comments on this thread by HeyRay and myself providing some info on needed changes.

[made4Uo]

Hi, 

You can add a pre-order button without an app or external library. It works with multiple variants too. Check the video for more information.