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.
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
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 Side by Side Clickable Image
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.
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, and find the "toggleAddButton" code, replace the toggleAddButton code with the code below.
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!
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!