Compatibility: Compatible with any Shopify 2.0 FREE themes
If you have different Shopify theme and would love to add the preorder button function, please contact me for price quote.
Add a pre-order button to your Shopify 2.0 FREE themes . This only change the button text if the product variant quantity is equal to zero. Note: I said variant, which means if a certain product variant has a quantity of more than zero, you will not see the change. You can also add a pre-order note to make sure your customer is aware what they are buying.
Before Editing the Code:
In your Admin page, go to Products, then select the product that you want to set pre-order. Make sure you have the "Track quantity", and "Continue selling when out of stock" checked in the product you want to have a pre-order.

What you are buying:
- Change the button to whatever text you want
- Add a pre-order note with dynamic placement
- Use a metafield for pre-order note to be dynamic
- ONLY works at the product page
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Code Editor by clicking Online store > Themes > Actions > Edit code.
2. Open the main-product.liquid under Section folder. Then, paste the code below.
3. Find this code here "{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}" and the {% endform %. Replace the code with the code below.
If you cannot find the code in Step #3, you might have the latest version of Shopify 2.0. You need to go to Snippet folder, and open the buy-button.liquid instead.
4. Before the " {%- when 'buy_buttons' -%}" in the main-product.liquid, paste the code below.
5. At the schema section, under the "type": "buy_buttons", you will see the "type": "checkbox", after the closing bracket place the code below. See video for more information
6. Go to Asset folder, open the global.js file, and find the "toggleAddButton" code, replace the toggleAddButton code with the code below.
That is it (",)
2 comments
Hi @AD,
You probably had error on pasting. Please contact me using “Chat with us”
Hiya, it says “Invalid JSON in tag ‘schema’” after pasting the schema bit, please help!