Compatibility: Compatible with any Shopify 2.0 FREE themes Updated to Dawn version 13.
If you have different Shopify theme and would love to add the preorder button function, please contact us for price quote.
Maximize your e-commerce potential with the power of pre-orders on Shopify. This post delves into adding a pre-order button to Shopify 2.0 free themes, a must-have for keeping up with customer demand and optimizing your inventory management.
In the fast-paced world of e-commerce, staying ahead of demand is key. For Shopify store owners, adding a pre-order button can be a game-changer, especially when managing inventory for popular items. This blog post will guide you through adding a pre-order button to your Shopify 2.0 free themes, ensuring your customers can always get what they want, even before it's back in stock.
Understanding the Pre-Order Function: Pre-ordering allows customers to purchase products that are not currently in stock. This function is particularly useful for items in high demand or for launching new products. However, it's important to note that this feature changes the button text to "Pre-Order" only if the product variant's quantity is zero. If a variant has a quantity greater than zero, the button will not display the pre-order option.
Adding a Pre-Order Note: To ensure your customers are fully informed, you can add a pre-order note. This note will clarify to customers that they are purchasing a product that is not currently available but will be shipped later.
Why Add a Pre-Order Button in Shopify?
- Manage Inventory Efficiently: Allows you to gauge demand for out-of-stock items.
- Boost Sales: Capture sales even when items are not immediately available.
- Enhance Customer Experience: Keep your customers engaged and informed about product availability.
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 in your product page
- Use a metafield for pre-order note to be dynamic
- ONLY works on 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. If you have the latest version of Shopify 2.0. You need to go to Snippet folder, and open the buy-button.liquid instead.
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.
4. In your main-product.liquid file under the Section folder, find the code " {%- when 'buy_buttons' -%}", and paste the code below before the it.
5. Still at the main-product.liquid, 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!
4 comments
Hi @VERONIKA,
It will be a different file under the Snippet folder. If you are having issues. Please don’t hesitate to reach us using “Chat with Us”
Hi, just have bought this. I have a problem with the " {%- when ‘buy_buttons’ -%}" it is not in my main-product.liquid.
Do you think you can help me?
Thank you.
Veronika
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!