In this article, you will learn about Onfleet's integration with Shopify.
This article will cover:
- Shopify
- Workflow
- Onfleet App Installation
- Shopify Tag and Delivery Status Updates
- Set-Up - Local Delivery
- Set-Up - No Timeslot
- Set-Up - With Timeslot
- Updating Timeslots
- Troubleshooting
Overview
Shopify
Shopify is an e-commerce platform that allows businesses to create their own online store, manage inventory, process payments, and ship products to customers. It provides a range of tools to help businesses build and customize their online store, manage orders and customers, and track sales and growth over time. Streamline your order-to-delivery operation with the most advanced last-mile delivery software.
Workflow
The integration between Shopify and Onfleet is designed to streamline and automate task creation for deliveries, leveraging Shopify's local delivery feature and other customizable delivery methods.
Automatic Task Creation:
Whenever a customer completes a checkout on Shopify and selects a pre-configured delivery method, an Onfleet task is automatically generated. Depending on the order's requirements, this can result in either a drop-off task or a linked pick-up and drop-off task.
Local Delivery and Custom Delivery Methods:
Shopify's local delivery feature supports setting up delivery zones based on distance or specific postal codes and offers flexible pricing rules for these zones. This allows businesses to tailor delivery options to their local customers by defining delivery areas and adjusting charges according to distance or order value. Beyond local delivery, merchants can configure any delivery method of their choosing to initiate Onfleet task creation, providing flexibility to accommodate various logistics and delivery scenarios.
Manual Order Task Creation:
Orders entered manually into Shopify can also trigger the creation of an Onfleet task, provided the designated delivery method matches one that has been configured for automatic task creation.
Order Information:
Once a task is created in Onfleet, information from the Shopify order, including the Order ID and line items, is displayed as metadata. This ensures relevant details are accessible within Onfleet.
Fulfillment Details and Status:
Onfleet tasks are created with associated Shopify fulfillment details, configuring the fulfillment status. This setting can be adjusted to change the Shopify fulfillment status at different stages of the Onfleet task's lifecycle, impacting the information customers see on their Shopify order confirmation page.
Delivery Timeslot Selection:
The Onfleet cart widget, once enabled for a location, allows customers store-wide to select delivery timeslots before checkout. This feature integrates seamlessly across all Shopify cart types, adapting to the store's theme for a consistent look and feel.
Note: If you have a custom theme, you will need to reach out to support@onfleet.com for further assistance
- Delivery Area and Zip Code Configuration: Delivery areas are defined by unique zip codes for each location. It's essential that these zip codes match between Shopify's native local delivery feature and the integration settings to ensure accurate delivery area recognition.
- Configurable Timeslots: Locations can offer single or multiple delivery timeslots, empowering customers to choose either a delivery day or a specific timeslot. Timeslot availability automatically adjusts to prevent selection of past times.
- Preparation and Cutoff Times: Customize prep times for each location to determine the earliest timeslot available to customers, and set cutoff times to manage order placement and next-day delivery scheduling.
- Delivery Instructions: Enable customers to add delivery notes to their orders, providing additional instructions or preferences for their delivery.
Task and Order Updates:
Modifications to Shopify order notes are synchronized with the Onfleet task's details. Additionally, Complete After and Before times in Onfleet can be adjusted using Shopify metafields configured for this purpose.
Shopify Tag and Delivery Status Updates: The integration also includes dynamic updates to Shopify tags and delivery status based on the task's progression in Onfleet:
- Unassigned Tasks: Initially, tasks are marked as "Unassigned" in Shopify, with the delivery status set to "Confirmed."
- Assigned Tasks: Once a task is assigned, the Shopify tag changes to "Assigned," and the delivery status updates to "In-Transit."
- Task Started: Starting a task updates the Shopify tag to "Started," changes the delivery status to "Out for Delivery."
- Task Completion: Completing a task sets the Shopify tag to "Completed" and updates the delivery status to "Delivered."
- Failed Tasks: If a task fails, the Shopify tag is marked as "Failed," the delivery status changes to "Attempted Delivery," and the Shopify fulfillment status reverts to "Unfulfilled." Cloning and reattempting a failed task in Onfleet will update the statuses on the original Shopify order, with the requirement of selecting the "clone metadata" option during cloning.
- Deleted Tasks: Deleting a task changes the Shopify tag to "Canceled" and marks the Shopify fulfillment status as "Unfulfilled."
Onfleet App Installation
Navigate to the Apps and sales channel. Select the Shopify App Store:
Search for Onfleet
Once Onfleet populates the screen, select "Open" from the bottom left corner.
Install the Onfleet app.
The Onfleet App will be located in the Apps section on the Left Hand navigation
Enter your Onfleet Organization Email and API key. Instructions on Onfleet API keys can be found here.
Select connect and Onfleet is Authenticated with your Shopify store.
Shopify Tag and Delivery Status Updates
The Shopify and Onfleet integrations include dynamic updates to Shopify tags and delivery status based on the task's progression in Onfleet:
|
Shopify Fulfillment Status |
Shopify Tag | Shopify Order Update | Shopify Delivery Status | Onfleet Task Status |
| Fulfilled | Unassigned | Confirmed | Unassigned | |
| Fulfilled | Assigned | In-Transit | Assigned | |
| Fulfilled | Started | Out for Delivery | Active | |
| Fulfilled | Completed | Delivered | Completed- Success | |
| Unfulfilled | Failed | Attempted Delivery | Completed- Failure | |
| - | Clone Task | |||
| Unfulfilled | Cancelled | Deleting Task |
Shopify Local Delivery Configuration
Shopify allows merchants to set up local delivery options for customers within a designated area or zip code. This feature is customizable for each location from which delivery is offered, supporting delivery within a specific radius or to certain postal codes. To learn more, head to the Shopify Help Center.
If you want Onfleet tasks to be created from Shopify’s Local Delivery orders, this location must be configured for "Local Delivery".
To confirm that the location is configured for local delivery, navigate to "Shipping and Delivery" and the "Local Delivery" section.
If the location isn’t set for local delivery, select the location.
Enable local delivery for the selected location.
Configure the Delivery Zones with either zip codes or a delivery radius.
Save the configuration by selecting "Save" in the upper right corner.
After confirming that the location is configured in Shopify’s Shipping and delivery, navigate back to the Onfleet Application for additional configuration.
In your Shopify account, under "Settings", select "Checkout".
Under the Customer Information section, select required for "Shipping address phone number".
Once you have selected these options, select "Save" from the bottom of the page.
After you have saved, navigate to the "General Settings" page.
Under the "Order Processing" section, select "Don’t fulfill any of the order’s line items automatically" and then select "Save the Configuration".
Set-Up - No Timeslot Selection Feature
This section will provide you with the ability to set up a location without a time slot selection.
In the Onfleet App, you can add a new location or connect an existing location. The location created in the Onfleet App needs to have a matching location in the Shopify app.
To create a new location, select the"Location Configuration" section on the left-hand menu of your Shopify store.
Click the "Add location" button. Select the location after it is connected.
Configure your Delivery Methods for your selected location.
Select "Save" to save this configuration.
You can also configure other Delivery Methods that will create Onfleet tasks. This is useful if you have Shopify apps that create recurring orders or if you wish to support additional use cases. To determine your Delivery Method name(s), you can view them on the Shopify orders page.
Add the Delivery Method name that you want Onfleet tasks to be created for. Please note that the name must match exactly and the configuration is location based.
Configure your task creation settings for this location. You can choose the task types that are created for each order. The Pickup and Dropoff Tasks option will create a pickup task with the Shopify location address as a destination and a dropoff task with the customer's address. You can also choose auto-assignment options and the completion requirements for each order.
Configure your order fulfillment settings. This setting will let you choose when the Shopify order is marked as Fulfilled.
Your location is now configured to create Onfleet tasks for Shopify local delivery fulfillment orders.
To see a list of Shopify orders that are fulfilled by Onfleet, click the Orders Fulfilled section on the left menu.
Note: Please confirm that the location is also configured in Shopify for Local Delivery. For instructions on how to confirm that the location is configured, please refer to these instructions.
If the location in the Onfleet App and the location in Shopify aren’t configured with matching location information, the Onfleet App will not create delivery pickups/dropoffs.
Set-Up - With Timeslot
Onfleet offers the ability for you to provide delivery time for customers at checkout. Configuring the Timeslot feature will allow you to offer your customer the ability to choose the delivery day and time
Enabling Time Slot Selection:
Activate the Onfleet cart widget across your store to offer customers the ability to choose delivery time slots. This extension supports all Shopify cart types and will automatically adapt to your store's theme. The timeslot feature is only supported for themes in the Shopify app store. By using the timeslot selection feature, customers will not be able to select Buy It Now as that will bypass the cart widget. The widget will automatically hide the Buy It Now button on your store.
Note: If you have a custom theme, you will need to reach out to support@onfleet.com for further assistance
Navigate to the Onfleet App. In the "Location Configuration" section, navigate to the "Additional Settings" area and select the option for enabling delivery time slots.
Click "Enable Widget". You will be redirected to your theme editor in a new tab.
You will be redirected from the Onfleet App to your Shopify theme editor in a new browser tab.
Toggle on the Onfleet App. You will now be able to see a preview of the changes on your storefront.
Switch back to the previous browser to the Onfleet App in Shopify. Navigate back to the location that you were configuring in the integration.
Enter your Zip Codes that correspond to this location. Zip Codes must be unique per location. If you are using Shopify’s Local delivery feature, It's essential that these zip codes match exactly to ensure accurate delivery area recognition.
Set up the days and times when you wish to provide delivery services. Before completing their purchase, customers will have the option to select a delivery timeslot. You have the flexibility to offer one timeslot for the entire day or several timeslots throughout the day. If a customer places an order after the beginning of a timeslot, that timeslot will no longer be visible or available for selection to the customer.
Preparation times can be set in minutes, hours, or days, offering flexibility based on your operational needs. Cutoff times determine when the current day's timeslots become unavailable, pushing orders to the next available slot.
The "Delivery Note" option allows customers to convey special instructions, preferences, or requests related to the delivery.
Select "Save" to save your configuration.
In the Onfleet App, select the Widget Configuration section and then click the “View in theme editor”
You can now test out the time slot selection as customers would see it. Click "Save" to confirm your changes.
If you wish to restrict checkout if a customer is not in an eligible Zip Code, enable the setting below on the "Widget Configuration" screen. If you have multiple themes on your store, you can enable the widget for them here by clicking "View" in the theme editor.
The details gathered at checkout will be displayed in the "Additional Notes" section, where you can view the delivery date, time, and any notes provided.
Updating Timeslots
The Complete After/Before times for Onfleet tasks can be adjusted through Shopify's metafields. You can update the value of it or set it manually.
Access Shopify Settings: In your Shopify admin panel, go to "Settings".
Within settings, select "Custom Data".
Choose the "Orders" group to add new metafields.
Add a Date and Time metafield named "Complete After". Ensure the field name matches exactly.
Add another Date and Time metafield named "Complete Before". The field name must be exact.
Once the metafields are created, you can set or update the delivery window on Shopify orders. This information will automatically update the corresponding Onfleet task with the specified Complete After/Before times.
Troubleshooting
If you are running into any errors with your Onfleet integrations, please refresh the page in Shopify. If you still have issues, please contact support@onfleet.com.