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.
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.
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:
What makes our code better:
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.
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
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.
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:
In your main-product.liquid file under the Section folder, find the code " {%- when 'buy_buttons' -%}", and paste the code below before the it.
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.
Open the global.js file.
Find the "toggleAddButton" code, replace the toggleAddButton code with the code below.
Go all the way to the bottom file, and add the code below at the very end.
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
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.
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.
Sign up free to view the code. Every snippet on the site is free, and stays free. You just need an account.
The code on this page is free, and it stays free. If it saved you an afternoon, you can send a tip. Entirely optional, and it keeps the next tutorial coming.
Did this tutorial work for you?