Add Pre-Order Button and Note [Multiple variants product] - Shopify

Add Pre-Order Button and Note [Multiple variants product] - Shopify

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

One Time Purchase!

$29.99
$29.99
Only
Please refresh page after a purchase

Please note that the code may not be compatible with any currently installed apps.

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.

shopify product

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 (",)

Copied!
Back to blog

2 comments

Hi @AD,

You probably had error on pasting. Please contact me using “Chat with us”

Made4Uo

Hiya, it says “Invalid JSON in tag ‘schema’” after pasting the schema bit, please help!

AD

Leave a comment