Delivery Slot Management for Shopify

If you are selling on Shopify, you can now deliver items on customer’s choices with the Delivery Slot Management App. Using this app, the admin can add delivery methods and create slots for the customers. Now, the customer will choose an available date & time on the product/cart page to get the item delivered.

You can list the items (products) from Shopify into the app and set the Preparation time i.e. time that a restaurant takes to prepare the item for delivery (in a food delivery business).

PURPOSE OF THE APP

The Delivery Slot Management App allows the merchants to add delivery methods & create the date & time slots on the store items to let the customer select their preferred delivery timings to get the item delivered. Thus, provide a more efficient delivery experience to the customers.

• You can add delivery methods such as home delivery, on-time delivery, pickup on demand, etc.
• Create delivery slots based on two delivery options i.e. On-time delivery & Fixed-day delivery.
• Allow customers to request to reschedule delivery time for their orders.
• You can cancel or reschedule deliveries to your customers.
• You can close deliveries on some specific days for your customers.
• Configure preparation time i.e time required to prepare items to get delivered.

Let’s dive into the details and know how to configure the app.

As soon as you install the Delivery Slot Management App, the app gets listed in the “Apps” section of your Shopify store. You can then proceed to configure the app backend.

You can add multiple Delivery Methods in the app. These methods will appear on the product/cart page of your store. Customers can select one and proceed to choose a preferred date & time slot for order delivery.

Please Note:- The merchant needs to select at least one delivery slot while creating a delivery method.

Now, clicking the Add Delivery Method button, you need to enter the delivery method details and assign delivery slots to the method added. You can allow customers to reschedule deliveries and reschedule deliveries after fulfillment.

From this section, you can add delivery slots for the customers. You can allow customers to choose either a fixed date or a fixed date & time for the order delivery.

While adding a slot, you need to enter the delivery information such as title of the slot, delivery type either single or multi-user delivery.

In the Availability section:-
You can configure either Fixed Day Delivery or On-time Delivery options for the customers.

On-time Delivery:-
You can configure this delivery option if you want to allow customers to choose a preferred date & time to get the item delivered to the destination.

Also, you can enable the weekdays to let customers choose a date for the order delivery.

Thus, the customer will get the option to choose a date & time for the order deliveries.

Fixed-day Delivery:-
You can configure this delivery option if you want to allow customers to choose a preferred date (irrespective of time) to get the item delivered to the destination.

Thus, the customer will get the option to choose a date for the order deliveries.

Lead Days:-
This is the no of days you want to close the deliveries from the current date.

Overwrite Specific days:-
Moreover, you can configure this option if you want to close deliveries on some specific days.

Custom Information:-
Show additional information related to your products.

Custom Field:-
Also, you can add custom fields in case you want to add additional infomation from the customers at the time of placing an order.

From this section, you can configure all the details related to the deliveries, emails, translation, etc. in the app.

General Configuration:-
Configure your store name, email, timezone, etc.

Delivery Details:-
From here, you can configure the no of days after which you want to display the slots for the customers.

Email Template:-
From this section, you can configure the template of the emails sent to the customers and the admin.

Delivery Widget:-
In this section, you need to choose if you want to show the delivery widget on the product page or the cart page of your store.

You can display the delivery widget either on the product page or on the cart page of your store. In case you choose it to display the widget on “Product”, you will have the option to add “Preparation time“ (time required to prepare items to get delivered) to the products.

For that, firstly, you need to add products from your Shopify store into the app and configure Preparation Time for the product.

Clicking the Add Product button, select a product from Shopify, and set a time required to prepare the product for delivery.

After the admin end configurations, you need to add the codes in the suggested liquid file. Follow the Instructions later in this Blog!

With the delivery slot management app, you can set the global preparation time from the Configuration menu in the app. This is the time required to get the item prepared for delivery. The time you set here will be applicable to all the products added to the cart for purchase [In case you show the delivery widget on the cart page].

Also, if you show the delivery widget on the product page and want to set the same preparation time for all the products of your store then, global preparation time can be configured from the Configuration menu in the app.

Note:- In case you want to configure a different preparation time for each product of your store then, you need to configure this separately for each product from the Products menu in the app. Otherwise, this global configuration will be applicable to all the products.

Front Labels:-
Additionally, you can configure the front labels from this section.

Now, to visualize the effect on the store front or to display the delivery widget, you need to add codes to the suggested liquid files.

CODES

To display widget on the product page:-

<!-- Delivery product page snippet --> {% if shop.metafields.dsm_widget and shop.metafields.dsm_widget.dsm_widget_allow_page and shop.metafields.dsm_widget.dsm_widget_allow_page == 'Product Page' %}{% include 'dsm-product-widget' %}{% endif %} <!-- End of delivery product page snippet -->

To display widget on the cart page:-

<!-- Delivery snippet --> {% if shop.metafields.dsm_widget == null or shop.metafields.dsm_widget.dsm_widget_allow_page == null or shop.metafields.dsm_widget.dsm_widget_allow_page == 'Cart Page' %}{% include 'dsm-widget' %}{% endif %} <!-- End of delivery snippet -->

For the customer’s account section:-

<!-- Delivery Order snippet --> {% include 'dsm-order-widget' %} <!-- End of Delivery order snippet -->

To display delivery details on customer account section:-

<!-- Delivery Order LineItem snippet --> {% if line_item.properties.wk_delivery %}<p><u><a href="https://{{ shop.domain }}/pages/delivery-information?order={{ order.id }}&handle={{ line_item.variant_id }}">View Delivery Details</a></u></p>{% endif %} <!-- End of Delivery Order LineItem snippet -->

If you are using Online store 2.0 (Example- Dawn), you need to follow the steps to add the codes.

To show the delivery widget on the product page, add the code below inside the form tag in main-product.liquid :-

<!-- Delivery product page snippet --> {% if shop.metafields.dsm_widget and shop.metafields.dsm_widget.dsm_widget_allow_page and shop.metafields.dsm_widget.dsm_widget_allow_page == 'Product Page' %}{% include 'dsm-product-widget' %}{% endif %} <!-- End of delivery product page snippet -->

Now, to show delivery widget on the collection page, add the code below inside the form tag in main-cart-items.liquid :-

<!-- Delivery snippet --> {% if shop.metafields.dsm_widget == null or shop.metafields.dsm_widget.dsm_widget_allow_page == null or shop.metafields.dsm_widget.dsm_widget_allow_page == 'Cart Page' %}{% include 'dsm-widget' %}{% endif %} <!-- End of delivery snippet -->

To show delivery information on the customer’s My Account page, add the code inside the form tag in customers/order.liquid

<!-- Delivery Order snippet --> {% include 'dsm-order-widget' %} <!-- End of Delivery order snippet -->

To show delivery information on the customer’s My Account page, add the code in customers/order.liquid :-

<!-- Delivery Order LineItem snippet --> <div class="dsm_order_line_item" id="dsm_order_line_item_{{ line_item.id }}" dsm="{% if line_item.properties.delivery_slot_management == "true" or line_item.properties["Delivery Slot Management"] == "true" %}true{% else %}false{% endif %}" lineitem="{{ line_item.id }}" variant="{{ line_item.variant_id }}" product="{{ line_item.product_id }}" vendor="{{ line_item.vendor }}" order="{{ order.id }}" token="{{ order.token }}" status="{% if line_item.successfully_fulfilled_quantity == line_item.quantity %}fulfilled{% endif %}"></div><!-- End of Delivery Order LineItem snippet -->

Paste the code below in main-cart-items.liquid before {% for p in item.properties %} and next after {% endfor %}

<div class="cart__meta-text">

</div>

<script delivery='true'>window['delivery_date_label'] = '{{ shop.metafields.dsm_labels.label_13 | default: 'Delivery Date' }}';window['delivery_time_label'] = '{{ shop.metafields.dsm_labels.label_14 | default: 'Delivery Time' }}'; </script>

Once you add the codes, this is how the widget appears on your store front:-

Delivery Widget on the Product Page:-

After selecting a delivery method, the customer will get the option to choose a date & time slot for the order delivery.

Delivery Widget on the Cart Page:-

Customer “My Account”

Customers can view the delivery details from their account.

Customer can request the admin to reschedule the deliveries.

From this section, you can have the list of all the order deliveries requested by the customers. You can edit the delivery and approve & cancel it.
Moreover, you can export the delivery details from the app.

So, you can approve, cancel or reschedule customer’s order delivery requests.

In addition to it, You can track all the delivery records from the admin dashboard.

So, that’s all about the Delivery Slot Management app.

Demo

Please check the Demo here: https://delivery-slot-management-demo.myshopify.com/pages/demo

Need Help?

If you need any kind of support, just raise a ticket at https://webkul.uvdesk.com/en/. 
Also, you can contact support@webkul.com to get proper assistance.

Thank You for reading this Blog