Menu Close
    Searching for an experienced Shopify Development Company ?

    PreOrder Controller for Shopify

    No one wants to lose customers when the product goes out of stock. Keeping this in mind, we come up with the Pre-order Controller App for Shopify.

    Using the Pre-order Controller App, you can add products for pre-order on your store and earn profits on them even before releasing the items. Basically, the preorder products are the products that are about to launch or that are currently not in stock.

    Thus, the customers can pre-order products by paying the partial or full pre-order amount.

    The customers can pre-order a product even when the item goes out of stock. Once the products will be available in stock, the customer will get notified for the same and he/she can purchase the item.

    PLEASE NOTE:- Customers need to have an account on the admin’s store to preorder the products.

    Additional Features

    • Admin can add products for pre-order.
    • You can configure all the settings related to pre-order.
    • Products that are about to launch can be added as a “Pre-Order Product”.
    • Customers can order products even if the products get out of stock.
    • And customers will get the notification via mail once the product comes in stock again.
    • Admin can set the payment type for the customers. i.e. whether the customer will pay the full or partial amount at the time of pre-order any product.
    • Also, the admin can configure the labels within the app.
    • Restrict vendors to create preorder on products. Know More

    How to install the App

    To install the app, visit the Shopify App store & get the Pre-order Controller App.

    Home Page

    HAVE AN INFORMATIVE HOME PAGE

    You will get the complete idea about the “Most sold pre-order products”, “Recently Sold pre-order products”, stats for current pre-order sales just by looking at the home page.

    Moreover, you can also get the overall sales that you earn via pre-order from the home page of the Pre-order controller app.

    preorder home page

    Configurations

    Backend Configuration

    The backend configuration of the Pre-order controller app is having three sections: Pre-order Configuration, Label Configuration, and Mail Configuration.

    Let us understand it one by one.

    PRE-ORDER CONFIGURATION
    It includes three sections.General Configuration, Pre-order Configuration, Frontend Configuration.

    General Configuration: You can configure your business email and shop logo from this section.

    General Configuration

    Pre-order Configuration: All the pre-order details will be configured from this section.

    preorder configuration
    preorder configuration1

    Frontend Configuration: You can configure your product page details from this section.

    preorder configuration-Front

    That is how you can configure the pre-order details.

    Label configuration

    LABEL CONFIGURATION
    You can configure the labels of your store from this section. i.e. Labels for your Product page and Order Management Page.

    For Product Page: You can configure all the product page labels on your own the way you want to make it visible on your storefront.

    Product page

    For Order Management Page: Admin can also configure all the labels visible on the pre-order management page by his/her own.

    order management page

    Not only this, just scroll down and you can configure almost all the labels of the app from your end.

    mail configuration

    MAIL CONFIGURATION

    You can now configure the mail send to your customers when they pre-order any product or when products come in stock.

    mail to customers

    In this way, you can configure mail templates on your own.

    mail

    Also, you can anytime enable or disable the mail template on your end. Once you disable it, customers will not receive any mail for any action within the app.

    In this way, you can configure the backend for the Pre-order controller app.

    Pre-Order Product Checkout

    Offer multiple pre-order product checkout for the customers!

    You can now select whether you want to allow customers a single product or multiple products for preOrder.

    Visit Configuration>>Pre-Order Configuration>>Pre-Order Product Checkout>>Select an option>>Save.

    preorder product checkout

    SINGLE PRODUCT CHECKOUT

    In case you select this option, the customer will be able to pre-order only one product at a time. The customer can simply select the product & proceed to checkout to pre-order the item.

    MULTI-PRODUCT CHECKOUT

    Let customers pre-order more than one product at a time!

    In case you choose the multi-product checkout, the customers will be able to add more than one product to cart & proceed to pre-order all of them at a time.

    To use the multiple pre-order product checkout, make sure to add code stated HERE.

    In this case, the customer can add more than one product to the cart & pre-order all of them in a go.

    customer cart

    NOTE:- As there are two items in the customer’s cart, two different orders will be created in the app separately for both the pre-ordered products.

    You can check the orders here in the Pre-order controller app:

    Orders

    Please Note:- Once you add pre-order to products for single or multi-product checkout, the “Continue Selling Out of Products” option will get enabled for that product on Shopify end. So, once the pre-order duration gets over for that product, make sure to disable that option manually by editing the product on Shopify end.

    All products

    Configure Front End

    How to Configure FrontEnd for this App?

    In order to configure the frontend for Pre-order controller app, first, you need to enable the options from the backend configuration section to display the countdown timer on the product page and collection page.

    Then after you need to paste the codes in their respective template files as suggested in the below screenshot.

    First, click on the “Configure Frontend” button and inject the code either automatically or manually.

    Refer to the below screenshot.

    configure frontend

    CREATE MENU

    Additionally, you can create the menu from the Shopify backend section which will show the list of all the pre-order products on the frontend.

    PreOrder Widget on Product Page

    -To display “PreOrder Widget” on Product Description Page, copy the below-given code and paste it to the given template file:

    {% render 'wk-po-widget'%}
    code inject

    Account Page

    -To display the “PreOrder” button on the customer’s “My Account” section, copy the below-given code and paste it to the given template file.

    <div><a href ='https://wk-pre-order.myshopify.com/pages/preorder-management' ><button class='btn'>Preorder</button></a></div>
    account page

    Count Down Timer on Product Page

    In order to display the countdown timer on the collection page, copy the below-given code and paste it to the given template file.

    {% render 'wk-po-collection-widget'%}
    product page

    Multi-Product Checkout: Configure Front End

    In case you choose the Pre-order Products Checkout option as “Multi-product checkout” make sure to inject the below-given code to the suggested liquid files.

    Manual Code Injection

    Copy the below-given code and paste it into Templates/cart.liquid at the end of the file.

    {% render 'wk-po-multiple-widget'%}

    You need to copy the below given code and paste it into Templates/cart.liquid or Sections/cart-template.liquid just next to cart loop({% for item in cart.items %}) to count total preorder products.

    {% if item.product.tags contains 'preorder' %}<span class='wk_po_count' style='display:none;'></span>{% endif %}

    Copy the below-given code and paste it into Templates/cart.liquid or Sections/cart-template.liquid inside price to change preorder product price.

    {% if item.product.tags contains 'preorder'%} id='wk_price_{{item.key}}'{% endif %}

    You need to copy the below-given code and paste it into Templates/cart.liquid or Sections/cart-template.liquid inside total price to change preorder product total price.

    {% if item.product.tags contains 'preorder'%} id='wk_total_price_{{item.key}}'{% endif %}

    Copy the below-given code and paste it into Templates/cart.liquid or Sections/cart-template.liquid inside subtotal price to change the subtotal price:

    id='wk_subtotal_price'

    Code Pasting for Online Store 2.0

    To display “PreOrder Widget” on the Product Description Page, copy the below-given code and paste it to product.json >> sections/main-product.liquid file:-

    {% render 'wk-po-widget'%}
    
    Screenshot-2021-08-27T181243.511-1

    To display the “PreOrder” button on the customer’s “My Account” section:-

    • Copy the below-given code.
    • Make the changes as per your store URL.
    • Add the code to customer/account.liquid file.

    POINT TO BE NOTED:- THE CODE IS DYNAMIC. SO, MAKE THE CHANGES ACCORDINGLY.

    <div><a href ='https://example.myshopify.com/pages/preorder-management' ><button class='btn'>Preorder</button></a></div>

    In order to display the countdown timer on the collection page, copy the below-given code and paste it to collection.json >> sections/main-collection-product-grid.liquid >> snippets/product-card.liquid file:-

    {% render 'wk-po-collection-widget', product: product_card_product%}
    Screenshot-2021-08-27T181812.575-1

    Codes For Multi Checkout

    For multi-checkout feature, add the codes to cart.json >> section/main-cart-items-liquid file :-

    {% render 'wk-po-multiple-widget'%}
    Screenshot-2021-08-27T182310.903
    {% if item.product.tags contains 'preorder' %}<span class='wk_po_count' style='display:none;'></span>{% endif %}
    Screenshot-2021-08-27T182622.802
    {% if item.product.tags contains 'preorder'%} id='wk_price_{{item.key}}'{% endif %}
    Screenshot-2021-08-27T182718.088
    {% if item.product.tags contains 'preorder'%} id='wk_total_price_{{item.key}}'{% endif %}

    Add the code to section/main-cart-footer.liquid :-

    id='wk_subtotal_price'
    Screenshot-2021-08-27T182823.635

    IMPORTANT NOTE:- The app is dependent on page reload so, please make sure to add the below codes.

    Screenshot-by-Lightshot-4-1

    In this way, you can configure your app frontend.

    How to Add Pre-order Products?

    If you want your customers to order your out of stock products or products that are about to launch on your store then, first you need to add products for pre-order from the backend.

    You can go through the direction suggested below to create a pre-order product:

    add product

    Shopify Pre-order>>Visit “Pre-order Product” section>>On the Pre-order listing page, click on “Add Product” button>>Select any product>>Enter the preorder details>>Save it or click on “Publish Now” button.

    You can view the list of all pre-order products created by the admin in this section.

    Now once you click on the create button you will be straightaway redirected to a page where you can fill all the pre-order details on your end.

    choose product

    Here you need to select any store product first and choose its variants which you want your customers to pre-order. Now select the start and end date & time of selected pre-order products.

    inventory

    Now you can scroll down and enter the inventory details in this section. Additionally, you can set the pre-order amount that you want to charge from your customers. Now, you need to set the condition to receive payment from the customers on every pre-order.

    publish now

    Payment Type

    You can select any of the payment types as “Full”, “Partial” or “Both” which is directly visible to the customers at the time of pre-order.

    partial payment

    If you set the payment type as “Partial”, you can choose either fixed or percentage amount.

    If your pre-order product is not ready to publish then you can save that product to pending state just by clicking the save button. Once the product reaches its publish date and time, it will get published automatically.

    preorder products

    Now you can view the list of products from this section which you have added for pre-order.

    view products

    Also, you can view or edit the pre-order details of the product which are in active and pending state. And add the product for pre-order which is in “End” state.

    disable
    edit

    Once you click on “Edit Preorder” you can disable the pre-order status as well as end pre-order on this product.

    Please Note:- You cannot edit the start date for the product whose pre-order status is “Running” i.e. the product in the active state.

    Orders

    Shopify Pre-order

    This section of the app lists all the pre-order products ordered by the customers along with the payment status as well as the order status.

    View Details

    By clicking on the “View” button, you will get the complete details about that product ordered by the customer.

    Please Note:-If the customer selects the payment type as “Partial”, two orders will be placed on your Shopify store as you will get the total pre-order amount in two different phases.

    Shopify Pre-order

    REMINDER MAIL OPTION: PARTIAL PAYMENT CASE

    If the payment is partially paid, You will get the “Reminder Mail” Option to send the reminder mail to the customers to pay the remaining balance amount.

    Shopify Pre-order

    Thus, the customers will get the option in the mail to pay the remaining amount.

    In this way, you will get a complete idea about all your pre-ordered products from this section.

    Customer End

    To avail the benefits of this app, Your customers need to have an account on your Store. Thus, the admin needs to set the option as “Accounts are Required” from backend so that customers can create their account.

    Follow the Procedure for the same:

    Shopify Store Admin Panel>>Click on Settings>>Click on Checkout>>Visit Customer Accounts section>>Set to “Accounts are Required“>>Click on Save button.

    Shopify Pre-order

    Now, Once the admin creates a menu for Pre-order Listing from Shopify backend, the customer can directly view the list of all the Pre-order Products on the frontend. Here in this section the customer can view all the running and upcoming pre-orders and can pre-order any of the products by paying the pre-order amount set by the admin.

    Customers can view the countdown timers running on every pre-order product.

    Shopify Pre-order

    Clicking the PreOrder button, the customer will straightaway be redirected to checkout.

    Now, the customer can select any of the products from here and order it. Just select the payment option and click on the “PreOrder” button.

    product page

    If your customer will find any product that is currently not in stock, he/she can visit that product page and enter his/her email ID to get notified once the product comes in stock.

    my account page

    Once the customer order any product, he/she can view all the details in the “My Account” section.

    Once the customer clicks on the “Preorder” button displayed on frontend, he/she will get the list of all the products ordered by him/her. This includes the “Pre-order Status”, “Payment Status” and “pre-order duration”.

    my preorders

    Moreover, from the “Action” menu customer can again order any product as well as pay the remaining amount if he/she has paid the partial pre-order amount.

    Pay Remaining Amount in Case of Partial Payment

    In case of Partial Payment, you will receive the complete order amount in two different phases.

    The Customer pays the 1st order amount while pre-ordering the product.

    Now in the “My Account” section of the customer on the Shopify Store, he will get the order listing for all the pre-orders. He can pay the remaining amount as the “Pay Balance Amount” button would be shown next to the partial pre-orders.

    Once the Customer pays the remaining amount for PreOrder, You will be notified for the same via mail and thus the status will be shown as “Fully Paid” in the app.

    NOTE:- As we create draft orders in the app, Customers will not get the “Continue Shopping” button and Store Logo on the Order Status page once a product is pre-ordered.

    Thank you page

    So, in case You want to add these features to the Order Status (Thank You) page, You need to copy the below-given code and add it to the “Additional Script” section of the Checkout settings:

    <script>
        var wk_po_logoLeft = document.getElementsByClassName('logo--left');
        for (var wk_po_index = 0; wk_po_index < wk_po_logoLeft.length; wk_po_index++){
            if(wk_po_logoLeft[wk_po_index].getAttribute('href') == '#' || wk_po_logoLeft[wk_po_index].getAttribute('href') == ''){
                wk_po_logoLeft[wk_po_index].setAttribute('href', window.location.origin);
            }  
        }
        if(document.getElementsByClassName("step__footer__continue-btn").length == 0){
            var wk_po_continue_shoping = document.createElement("a");
            wk_po_continue_shoping.className = 'step__footer__continue-btn btn';
            wk_po_continue_shoping.href = window.location.origin;
            wk_po_continue_shoping.innerHTML ='<span class="btn__content">Continue shopping</span><svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg>';
           
            document.getElementsByTagName("BODY")[0].onload = function() {wkPoCreateBtn(wk_po_continue_shoping)};
    
            function wkPoCreateBtn(wk_po_continue_shoping){
                var wk_po_footer = document.getElementsByClassName('step__footer')[0];
                wk_po_footer.insertBefore(wk_po_continue_shoping, wk_po_footer.childNodes[0]);
            }
        }
    </script>

    Do follow the Procedure to add the Scripts:

    • Visit Shopify Store Backend.
    • Go to Settings.
    • Now, go to Checkout settings.

    In the Order Processing section, Paste the codes to “Additional Script” box as shown in the below screenshot:

    checkout settings

    The Order Status Page after adding the Scripts:

    Thank you page1

    That is all about the PreOrder Controller app.

    Demo Details

    You can go through the below-given link to check the demo of Pre-order Controller App for Shopify:-

    https://wk-pre-order.myshopify.com/pages/preorder-listing

    Need Support?

    Hope you like this blog. To get more interesting blogs, keep in touch with us. If you need any kind of support, simply raise a ticket at https://webkul.uvdesk.com/en/.

    You can contact [email protected] to get proper assistance.

    Thank You for reading this Blog!

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content

    Hide Index