Compatibility: Compatible with any Shopify 2.0 FREE themes Updated to Dawn version 15.
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.
What are Shopify Pre-Order Button and Note?
A button on a product page that allows customers to reserve an upcoming product before it's officially available.The ability to offer pre-orders in your Shopify store through a combination of the pre-order button, note, and potentially additional features from code edits.
Why Used a Pre-Order Button in Shopify?
- Generate Excitement: Pre-orders create a buzz around upcoming products, potentially leading to increased sales once they are officially launched.
- Gather Customer Interest: Pre-orders provide valuable insights into product demand, allowing you to adjust inventory levels accordingly.
- Boost Cash Flow: Pre-orders can generate some revenue upfront, helping with production costs or product development.
Important Considerations
- Inventory Management: Ensure "Track quantity" and "Continue selling when out of stock" are enabled for the pre-order product.
- Clear Communication: Inform customers about the estimated availability date and any pre-order specific terms.
- Mobile-friendliness: The pre-order button and notification should function seamlessly on all devices.
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.
Steps on how to Add Shopify Pre-Order Button and Note
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
Step #2. Main-product.liquid
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.
Step #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.
For theme version 13 and below:
For theme version above 13:
Step #4. Buy_buttons
In your main-product.liquid file under the Section folder, find the code " {%- when 'buy_buttons' -%}", and paste the code below before the it.
Step #5. Schema Section
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.
Step #6. Go to Asset folder
Open the global.js file.
For theme version 13 and below:
Find the "toggleAddButton" code, replace the toggleAddButton code with the code below.
For theme version above 13:
Go all the way to the bottom file, and add the code below at the very end.
Step #7. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #8. Customize theme
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.
Conclusion
Adding pre-order functionality to your Shopify store can be a strategic tool. By effectively implementing pre-order buttons and clear communication, you can generate excitement for upcoming products, gather valuable customer insights, and potentially boost sales. Choose the method that best suits your comfort level and explore the customization options available to create a user-friendly pre-order experience for your customers.
Copied!
8 comments
Hi @Ismail,
Thank you for reaching out. Yes, it works on the Dawn Theme version 15.2.0. Let us know if you’re having any trouble.
Hello, I wanted to ask if this code works on Dawn Theme version 15.2.0!
If so, please let me know!
Thanks,
Ismail
Hi @Naomi
Thank you for reaching out to us via inbox. Let us know if you encounter any further problems. Thanks!
Hello, I bought your preorder tutorial, it’s working well. I would like to know if it’s possible to hide the "buy now " button when the preorder button is showing. Thank you for your help.
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”