Eshopbox provides you with the feasibility to enable order tracking and management on your Shopify store. This will allow your customers to track, cancel, return, exchange, or update their delivery address. Additionally, customers can take action on failed delivery orders, if any.
You might come across different types of customers who place orders on your website. For example, guest users browse without logging in, maintaining anonymity and quick access but with limited features. Registered users log in, enjoying personalized experiences, enhanced features, and engagement benefits such as updates, promotions, and loyalty rewards, leading to a richer, more customized experience.
Enabling this feature will provide order tracking and management on your website for both types of customers:
Guest customers can track or manage their orders by providing the order and billing contact number.
Registered customers, however, can additionally track or manage their orders from the order history page.
This will contribute to an enhanced customer experience, reduced support queries, and increased customer retention.
In this article, you will learn:
Enabling order tracking and management on Shopify
Before you start, please ensure you have enabled customer accounts in your Shopify store. Learn how to set up customer accounts.
Enabling order tracking and management in the order history page
You can allow the customers to track or manage their orders from the order history page. You can follow the below steps to achieve this:
Step 1: Log in to your Shopify store
Step 2: Navigate to Online Store > Themes > Edit code
Step 3: Create a snippet and name it manage_return_script.liquid.
<style>
.js-manage-return {
background: #000 !important;
padding: 6px 10px !important;
border-radius: 4px !important;
color: #fff !important;
text-decoration: none !important;
position: relative;
margin: 0 !important;
min-height: unset !important;
min-width: unset !important;
--border-offset: none !important;
--border-opacity: none !important;
}
.js-manage-return:focus, .js-manage-return:hover {
--border-offset: none !important;
--border-opacity: none !important;
}
.js-manage-return.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
display: inline-block;
background: none !important;
color: #000 !important;
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip img {
vertical-align: middle;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 390px;
background-color: #000000bf;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 6px 8px;
position: absolute;
z-index: 1;
top: -5px;
right: 30px;
font-size: 12px !important;
font-weight: 400 !important;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #000000bf;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.manage_order {
display: flex;
justify-content: space-between;
}
.manage_btn_center {
padding-top: 0 !important;
vertical-align: middle !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.js-manage-return').forEach(el => { el.addEventListener('click', function(e) { const OrderId = el.getAttribute('data-orderId');
const billingPhone = el.getAttribute('data-billingPhoneNumber').replace(/\\+/g, '');
const shippingPhone = el.getAttribute('data-shippingPhoneNumber').replace(/\\+/g, '');
const base54String = `${OrderId}####${billingPhone || shippingPhone}`; const encodedUserDetail = btoa(base54String);
const hostUrl = window.location.origin;
window.location.href = `${hostUrl}/pages/manage-order/${encodedUserDetail
}`; }); }); });
</script>
You can customise the look and feel of the button to match your branding. The above example shows a button which is designed additionally. With default code, it will be a plain text with a link.
Step 4: Go to customers/account.liquid or main-account.liquid and paste the below snippet.
{% include 'manage_return_script' %}
Step 5: Add manage order button inside <tbody></tbody>.
{% if order.fulfillment_status == 'fulfilled' or order.fulfillment_status == 'partial' %}
<td class="manage_btn_center">
<button class="js-manage-return"
data-orderId="{{ order.id }}"
data-billingPhoneNumber="{{ order.billing_address.phone }}"
data-shippingPhoneNumber="{{ order.shipping_address.phone }}">
Manage order
</button>
</td>
{% endif %}
Step 6: Go to main-order.liquid and add this snippet.
{% include 'manage_return_script' %}
Step 7: Search for this code snippet.
<h2>#{{ 'customer.order.title' | t: name: order.name }}</h2>
Step 8: Replace it with below mentioned code snippet.
{% if order.fulfillment_status == 'fulfilled' or order.fulfillment_status == 'partial' %}
<h2 class="manage_order">
{{ 'customer.order.title' | t: name: order.name }}
<div>
<div class="tooltip">
<img width="16" height="18" src="https://ik.imagekit.io/2gwij97w0o/info-grey-medium.svg?updatedAt=1711017001244" alt="manage_order_info">
<small class="tooltiptext">Click Manage order to track, cancel, return, exchange, or update your delivery address quickly and easily.
</small>
</div>
<button class="js-manage-return"
data-orderId="{{ order.id }}"
data-billingPhoneNumber="{{ order.billing_address.phone }}"
data-shippingPhoneNumber="{{ order.shipping_address.phone }}">
Manage order
</button>
</div>
</h2>
{% else %}
<h2>{{ 'customer.order.title' | t: name: order.name }}</h2>
{% endif %}
Step 9: Go to Online store > Pages > Add page.
Step 10: Give a title to your page. For example, Manage order.
Step 11: Inside content, add the below mentioned code snippet in content section.
Note: You also need to update the baseUrl in the below snippet with your customer portal link. Click here to get the customer portal link.
<style>
#eshopbox_manage_order {
width: 100% !important;
height: 100% !important;
border: none;
}
.scroll-trigger {
height: 100% !important;
}
.shopify-section {
height: 100% !important;
}
.page-width--narrow {
height: 100% !important;
max-width: 100% !important;
}
.main-page-title,
.newsletter,
.color-scheme-1,
.footer,
#shopify-section-template--22777450201376__form {
display: none !important;
}
</style>
<iframe title="Manage order" id="eshopbox_manage_order"></iframe>
<script>
document.addEventListener('DOMContentLoaded', function() { var iframe = document.getElementById('eshopbox_manage_order');`
// Add your base URL here const baseUrl = ""; // Your_base_url
const url = window.location.href;
const pathSegments = url.split('/');
const orderId = pathSegments.pop();
if(baseUrl) {
const trackUrl = ${baseUrl}${orderId}?fromShopify=true;
iframe.src = trackUrl; iframe.style.display = 'block';
} else {
console.log("Base URL is empty in manage_order page script");
} });
</script>
Step 12: Save the changes.
Congratulations! Your customer will now be able to see the Manage order in the customer order history page as well as in the order detail page.
On clicking the Manage order, your customers can now access the customer portal.
Note: You can manage the customer portal settings from Eshopbox workspace. Learn how to manage customer portal settings.
How can the customer track their order without order history page?
Any customer placing an order without log in to your website are called guest orders. You can enable tracking for order by simply following the below steps:
Step 1: Login to you Shopify store.
Step 2: Navigate to Online store > Navigation > Add menu
Step 3: Select the menu where you want to provide the tracking option to the customer. For example, you can provide Track your order link in the main menu or in the Footer menu. Learn how to add menu items in your Shopify store.
Step 4: Give a name of the button and paste the Eshopbox customer portal link. Click here to get the customer portal link.
Congratulations! Your customer will now be able to see the Track your order link on your store enabling the user to track and manage the order by providing the order and billing phone number.
