How to accept pre-orders in your Online Store

Important: If you plan to accept pre-orders, take time and make yourself familiar with the rules concerning them in your country. You must describe your policy on pre-orders (payments, estimated shipping & order fulfillment time, returns, etc.) on your stores’ legal pages to keep your customers informed.

If you produce your items on a regular basis — e.g., they are baked goods or flower bouquets — and have a brick-and-mortar store, the easiest way to collect pre-orders is to use the self-pickup options. They are in-store pickup, curbside pickup or drive-through pickup, or any other similar option that you have in your Online Store.

 

As the settings allow you to specify your order fulfillment time, you can postpone the pickup by any time it usually takes you to prepare the order. Along with that, you can add your business hours. This way, your customers will know at checkout what is the closest available slot they could pick up their order.

 

To charge your customers, you can use both online and offline payment methods. The first option will allow customers to pay when placing a pre-order in your online store, while the second allows them to pay later, for example, using a credit card in your brick-and-mortar store. 

 

Products can be out of stock for different reasons, for example, you have run out of them or because they are not yet available in your store.

 

In case you want to collect pre-orders for products that are currently out of stock, you can add special buttons to your product pages. Your customers will be able to click the button to get in touch with you and inquiry about the potential order.

 

In both cases, pre-order requests will help you measure the demand for your product. For example, if you need to plan your stock for a new item or you are unsure about how many units of your regular item you need to reorder.

 

If you are using the online inventory tracking in your Online Store, your products are automatically marked as Out of Stock and receive the Sold out label once the quantity of a certain product is equal to zero. They become unavailable for purchase, and the Add to Bag button disappears for them.

This is how a product page looks when the item is out of stock:

Tip: If you don’t see the items with zero quantity in the storefront, make sure that the Hide out of stock products setting is disabled in the Settings > Cart&Checkout section.

If you want to collect pre-orders, you can change the Sold out and Out of Stock texts that are displayed in your store into Pre-order or some other similar text by customizing your store labels.

Additionally, you can add a product ribbon that will be displayed on the product list above the default Sold out label. This ribbon may also contain information on the estimated date the product becomes available.

All you’ll have to do afterward is add special pre-order buttons to the pages of your out-of-stock products.

Tip: If the product is new to your store and has not arrived yet, you can start collecting pre-orders for it. Just create this product in Catalog > Products and enter 0 into the Quantity in Stock field in the Stock Control section. When the product arrives, you can change 0 into the actual number that you have in stock.

Adding custom Pre-order buttons

You can add a custom button to the description field on your product pages. After a customer clicks this button, they will be able to email you a pre-order request for the product, along with any questions they may have about the item.

To create a custom pre-order button:

1. From your Online Store dashboard, go to Catalog > Products.
2. Choose your product from the list or create a new one.
3. Open the General tab.
4. Find the Description field.
5. Switch to HTML mode by clicking the <> sign:

6. Copy the following code:

<p> <a href="mailto:info@mymail.com"> 
<img border="0" alt="Place a pre-order" 
src="https://dabuttonfactory.com/button.png?t=Place+a+Pre-order&f=Calibri-Bold&ts=24&tc=fff&hp=20&vp=15&c=11&bgt=unicolored&bgc=444" "=""> </a> 
</p>

 

You can apply different button styles, colors, and text by using the Dabutton factory or any other button generator.

7. Paste the code that you copied into the Description field and change the info@mymail.com part in mailto:info@mymail.com into the email address where you want your customers to send their pre-order requests.

8. Save the changes.

This is how your product page with a newly created Place a Pre-order button may look like:

When your customers click the Place a Pre-order button, they will be prompted to mail a pre-order request to the address you specified in the button code.

Please note that you may need to upgrade your Online Store plan in order to use product ribbons and edit labels.

If you are using the Free plan, you can still collect pre-orders using the custom Place a Pre-order button:

1. You will first need to remove the Add to Bag button from the product details page for your product with the help of a CSS code:

 
.ec-size .ec-store.ec-store__product-page--12345 .details-product-purchase__controls {display: none;}
.ec-size .ec-store.ec-store__product-page--12345 .product-details-module.details-product-purchase {margin-bottom: 0px;}

You need to replace "12345" in the code with the ID of your product and add the resulting CSS code to your Online Store CSS theme, according to our tutorial.

2. After you remove the Add to Bag button, you can add the custom Place a Pre-order button to the product description field as described in the steps above.

This way, your customers will be able to mail you their pre-order requests and other questions.

To add the Place a Pre-order button for other products, just repeat the process for them.

You can also use another CSS code to mark that your product is available for pre-order:

 .ec-store__product-page--12345 .product-details__product-price::after {content: 'Pre-order'; font-size: 18px; color: #D3001A;}

This text will appear next to the price field:

After you have added the custom buttons and notifications, your customers can get in touch with you so you can discuss all the details (including the time frame for delivery) with your customer via email or phone.

You can also collect all the necessary details including shipping addresses from customers and then create orders manually to have a comprehensive order history in your Online Store admin.

When the product is in stock, you can send your customers a message to prompt them to place an order in your Online Store.  

Accepting pre-orders via modified Add to Bag buttons

As an option, you can rename the Add to Bag buttons in your store into Place a Pre-order buttons and add a note to your product(s) that this is a pre-order.

This way, customers will add products that are available for pre-order to cart – like they do with regular products – and check out.

There are three key steps to set up this option:

Step 1. Inform your customers that this is a pre-order.

You need to make it clear to your customers that certain products can only be pre-ordered and that the shipping will be postponed. There are several ways of doing it:

• You can do it with a note on the product details page or using any other option like product ribbons or subtitles. Before customers add your product to the cart and check out, they will know that it is a pre-order that will be shipped later. We also recommend specifying the estimated delivery time right on the product page to set proper expectations with your customers.
• If only a part of your products is available for pre-order, you can add all of them into a separate category (e.g., “Pre-orders”). Also, you can add “pre-order” to the name of every product (e.g., “Avocado, pre-orders only”). This way, your customers will definitely see this text on the checkout page if they occasionally missed the category name.
• If you want to make sure your customers acknowledge that the product is only available for pre-order, you can create a special product option for that:

1. From your Online Store admin, go to Catalog > Products.
2. Open the product you want to edit.
3. Open the Options tab.
4. Click Add New Option.
5. Enter “Pre-order” (or any similar text) as the option name.
6. Choose Drop-down list or Radio Buttons as the input type.
7. Tick Do not preselect default value.
8. Click Add New Value and enter “I acknowledge this is pre-order and the shipping will be postponed”.
9. Save the changes.

This is how your product page may look like:

With this modification, it will be impossible to add the product to the cart without acknowledging that it is a pre-order.

Step 2. Rename the Add to Bag buttons

If you are using your Online Store only to collect pre-orders and do not sell regular items, you can change the “Add to Bag” and “Buy now” texts for all the buttons in your store with the help of our customizing store labels. For example, you can rename these buttons into Place a Pre-order.

After your customer presses this button, the product will be added to their cart as usual.

You can additionally change the Go to Checkout and Checkout texts (as well as any other text that you feel needs changing, for example, rename Place Order buttons to remind that this is a pre-order.

Changes made via Store Label Editor are applied to all the products in your store. In case only a part of your products are available for pre-order, you can rename Add to Bag and Buy now buttons for these particular products using CSS codes:

/*rename the Add to Bag button for this product on the product page*/
.ec-store__product-page--12345 .form-control--primary .form-control__button-text { font-size: 0;}
.ec-store__product-page--12345 .form-control--primary .form-control__button-text:after { content: "Place a Pre-order"; font-size: 19px;}

/*rename the Buy Now button for this product in the grid*/
.ec-size .ec-store .grid-product--id-12345 .form-control--animated.form-control--done .form-control__button-text {font-size: 0px;}
.ec-size .ec-store .grid-product--id-12345 .form-control--animated.form-control--done .form-control__button-text:after {font-size: 16px; content: "Place a Pre-order";}

Just replace "12345" in the codes with the ID of your product and add the edited CSS code to your CSS theme according to our tutorial.

This is how your product page may look after you have renamed the Add to Bag button:

Step 3. Setting your payment methods

The payment method you use for your pre-orders will depend on the products you sell. You may offer some products for pre-order with 100% online prepayment. Some products can be paid in cash upon delivery.

Tip: If you offer an offline payment method, you can rename your payment method into "Pre-order" or even into "Payment method will be discussed via email". This way, customers will know which payment option to choose at checkout.

Another way to effectively use product options and price modifiers is to create an opportunity to place a deposit.

Customers may not feel like paying the full price for a pre-order, but in some cases, it’s reasonable to ask for an advance.

You can have various payment options available for your product: 100% payment and a 50% or 25% deposit at the same time. Once the product is available for dispatch, you can send your customers who have paid a deposit an invoice or a payment link from your payment processor to pay the rest of the price.

To create a deposit opportunity:

1. From your Online Store admin, go to Catalog > Products.
2. Open the product you want to edit.
3. Open the Options tab.
4. Click Add New Option.
5. Enter “Payment Type” or "Deposit" (or any similar text) as the option name.
6. Choose Radio Buttons or Size as the input type.
7. Tick Do not preselect default value.
8. Click Add New Value and add a few choices to this option, such as "Full Amount", "25% deposit" and "50% deposit".
9. Add corresponding (e.g., -75% and -50%) price modifiers to your deposit:

10. Save the changes.

This is how your product page may look as a result:

Once your customers add your product to the cart and check out, they will receive an email notification confirming the order.

You will receive an email notification as well, and you will also be able to access the order from your Online Store admin: Sales > Orders.

After that, you can get in touch with your customer using the contact information they provided at checkout and discuss the order and/or payment upon delivery.

When you are ready to ship the order, inform your customer about it.

What happens next?