How to Show Estimated Delivery Date in Shopify?
Table Of Contents
Do you know that displaying the estimated delivery date on your Shopify store may improve the customer experience? This guide will help you clearly show expected delivery dates (EDDs) on your Shopify site, with and without code.
Why Should You Display Estimated Delivery Dates (EDDs) On Your Shopify Store?
Did you know that 41% of online stores still rely solely on shipping speeds? While speed is essential, it only tells part of the story for your customers. The real question they're asking is: when will my order arrive?
Getting rid of shipping speeds and showing clear EDDs will improve your customers' experience. Let's see the benefits of it:
- Build trust and confidence: Putting EDDs on display shows openness and builds consumer confidence. Knowing what to expect reduces anxiety about when their orders will arrive.
- Reduce customer inquiries: EDDs may dramatically cut resource burdens. Customers may get the necessary information without contacting you by showing expected arrival dates.
- Boost conversions: Knowing when their order will arrive reduces reluctance and increases conversions and purchases.
So, why wait? In the next part, you will learn how to display estimated delivery dates on your Shopify store.
Show Estimated Delivery Date On Shopify With Coding
This method only works with Shopify OS 2.0 themes and needs basic code knowledge.
Don't worry if you don't know the code. Scroll down the following section; we will guide you through the Shopify estimated delivery date using the third app.
Here is a step-by-step guide displaying the estimated delivery date on Shopify:
Step 1: Navigate To Theme Customization
You can begin by logging into your Shopify admin panel and click "Online Store" > "Themes" > "Customize."
Step 2: Create A New Product Template
We suggest making a new product template so that you don't change the style of your original product page. This lets you change the new page without changing how the old page looks.
To do this, in the middle menu of Shopify's theme customizer, select "Products" > "Create template".
Step 3: Add Custom Liquid Code
After step 2, go to the "Add Section" and then select "Custom Liquid."
This is where you'll insert the given code snippet to show the approximate delivery date:
<p> <img src="https://cdn-icons-png.flaticon.com/512/709/709790.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/> Get it between <strong><span id="fromDate"></span> - <span id="toDate"></span></strong></p> {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }} <script> var fromDate = Date.today().addDays(5); if (fromDate.is().saturday() || fromDate.is().sunday()) { fromDate = fromDate.next().monday(); } var toDate = Date.today().addDays(10); if (toDate.is().saturday() || toDate.is().sunday()) { toDate = toDate.next().monday(); } document.getElementById('fromDate').innerHTML = fromDate.toString('dddd MMMM dS'); document.getElementById('toDate').innerHTML = toDate.toString('dddd MMMM dS'); </script> |
Code breakdown:
- By default, the code estimates delivery within 5-10 business days after buying. You may vary this range by changing the code's "5" and "10" values.
- The script_tag helper function integrates date.min.js for dynamic date computations.
- The script estimates delivery dates by adding a 5-day buffer to the current date (excluding weekends) and then a 10-day buffer. Finally, it formats these dates conveniently ("Friday, June 14th"- "Monday, June 24th").
Finally, click "Preview" to preview the changes and "Save" them when satisfied.
For maximum effect, we suggest placing your block underneath the "Buy It Now" button. This clever positioning gives customers a clear checkout view.
Show Estimated Delivery Date in Shopify Without Coding
EComposer Page Builder's straightforward drag-and-drop editor allows you to adjust Shopify's expected delivery date with its features:
- Visual editing: Drag and drop to add or change your delivery date section.
- Real-time preview: See your changes instantly as you make them with the live preview feature.
- Icon library: Choose from various icons to visually represent estimated delivery times.
- Template selection: Start your design with templates with data on expected delivery.
Here is how to use EComposer to show and edit your Shopify estimated delivery date:
Step 1: Install EComposer Builder Page
Visit the Shopify App Store and search for "EComposer Landing Builder Page"-or just click the button down below to get straight to it.
Once installed, launch EComposer from Shopify Admin and select "Start building" > "Product page" to edit the estimated delivery date on your product page.
Step 2: Edit Your Shopify Estimated Delivery Date
Find "Delivery Time" on the left side of the "Elements" tab in the EComposer editor.
Then, drag and drop the "Delivery Time" element to the correct position on the product page.
Now, in the "Delivery text" area, type something like: "Order in the next [hour] to get it between [date_start] and [date_end]."
You can easily change "Exclude days," "Delivery cut off (UTC Time)," "Text hour(s)," and "Text minute(s)" by typing it.
Additionally, EComposer lets you change the months and days to any language you want.
Step 3: Save Your Change
Before publishing your updates, preview your storefront to ensure everything looks perfect.
EComposer allows you to publish up to 3 pages during the free trial. You can upload to a paid plan to unlock more features and upload pages.
For example, we will show "Delivery Time" below the "Add to Cart" button for a clear and prominent display.
Want even more options for managing delivery dates on Shopify? Read the next part to find out!
Top 3 Shopify Delivery Date Apps
While the EComposer Builder Page provides an easy method for entering and changing expected delivery dates, various Shopify applications focus on delivery date management and let customers choose their delivery time.
Here are five recommended Shopify delivery date apps:
#1. Pickup Delivery Date -Pickeasy
Rating: 4.9/5.0 ⭐ (942+).
Pickup Delivery Date -Pickeasy on Shopify App Store.
Pickeasy fits companies with a variety of delivery needs. The thing that makes Pickeasy unique is:
- Flexible Fulfillment: You may choose in-store pickup, local delivery, or standard shipping.
- Order Deadline Control: Set order deadlines by pickup or delivery date (e.g., Friday pickup orders by Thursday 4 PM).
- Blackout Dates: Limit orders on holidays to minimize staff overload.
- Granular Delivery Rates: Define an accurate delivery price based on zip code, product weight, cart value, and the time window to recover delivery expenses.
- Product-Specific Rules: You may limit pickup and delivery to specified days or delivery zones.
- Multi-location Management.
Pricing: A free trial with 20 orders/month and a $9.99/month starter fee.
Pickeasy's pricing.
#2. Stellar Delivery Date & Pickup
Rating: 4.9/5.0 ⭐ (736+)
Stellar Delivery Date & Pickup on Shopify App Store.
With Stellar Delivery Date & Pickup, customers can easily manage their orders, and your business can run more efficiently in the background. How Stellar shines:
- Estimated Delivery Visibility: Show expected delivery timelines on product pages for client transparency.
- Rescheduling Power: Allow customers to quickly reschedule purchases from the thank-you page, reducing delivery problems.
- Day-Wise Shipping Rates: Flexible pricing strategies are possible with dynamic shipping prices dependent on delivery date.
The Stellar Delivery Date app is an excellent option for businesses with a single location.
Pricing: A limited-order free trial with limitless locations is available, and from a $14.99/month for store pickup version.
Stellar Delivery Date's pricing.
#3. Estimated Delivery Date ‑ Plus
Rating: 4.8/5.0 ⭐ (637+)
Estimated Delivery Date ‑ Plus on Shopify App Store.
Estimated Delivery Date ‑ Plus (Plus) takes a different approach compared to Stellar Delivery Date & Pickup (Stellar) and Pickup Delivery Date - Pickeasy (Pickeasy). Here's how it stacks up:
- Focus on Estimated Dates: Plus emphasizes providing anticipated delivery dates on product pages, carts, and checkout for straightforward consumer communication.
- Multilingual Support: Show expected delivery texts in multiple languages to reach people worldwide.
- Time Zone Flexibility: You can ensure the delivery estimate is correct by using either the visitor's or the store's default time zone.
Estimated Delivery Date Plus greatly improves consumer transparency by providing clear estimated delivery information across your shop.
Pricing: A free trial and the most basic plans start at $4.98/month.
Estimated Delivery Date ‑ Plus's pricing.
Tips For Displaying Estimated Delivery Dates
Now you know how to display estimated delivery dates for your Shopify store. Let's discuss practical tips for displaying them effectively in this part.
Choose Where To Display Estimated Delivery Dates
Here are two recommended options you can display the expected arrival dates (EDDs) on Shopify:
Product page:
Based on the Project44 survey, most customers (75.1%) said adding estimated delivery dates to the product page improves their decision-making. This makes perfect sense, as buying decisions are often cemented on product pages.
By displaying precise estimated arrival times right there (Look at "below the 'Start Designing' button" like Rush Order Tees in the image below), you eliminate the need for customers to hunt for this information elsewhere.
Rush Order Tees' product page.
You can also add your Shopify shipping policy to the product page for a one-stop shipping store. Transparency improves consumer trust and simplifies purchases, increasing sales and customer satisfaction.
Read more: 11 Excellent Shopify Store Policy Page Templates.
Cart page:
The energy grows as people put more things in their carts. Don't let worries about giving birth slow them down. For example, The North Face could improve its checkout process and make the expected arrival date stand out on the cart page.
The North Face's cart page.
This makes them more likely to buy and removes any last-minute worries about when their goodies will come.
We recommend you strive to present clear, concise, and consistent estimated delivery dates across all these touchpoints (product page, cart, checkout) for a seamless customer experience.
Account For Holidays And Potential Delays
Celebrations like birthdays, anniversaries, and holidays sometimes need online orders with a specific delivery date in mind.
Consider using cutting-edge tools such as Shipup SDE (Smart Delivery Estimate). These tools use Google's AI algorithms to guess when packages will arrive more accurately. They also use real-time data like weather, traffic trends, and transport capacity to ensure they take into account delivery times during busy times.
Shipup SDE's website.
Also, applications such as Pickup Delivery Date-Pickeasy (before presented) should be used to restrict orders to specified days. This helps you keep control and focus on order accuracy during busy times.
Set Delivery Date Locations
Now, we all know that EDDs can influence customer buying decisions. But don't forget that location matters.
Here's the good news: all the Shopify delivery date apps listed before enabling you to experiment with positioning. You may locate the sweet spot where your audience will respond most.
Think about how REI handled things for inspiration. They use a sidebar zip code box to provide fast delivery estimates depending on consumer location. Customer access to EDDs is quick and straightforward, while the product page remains clutter-free.
REI's product page.
Key Takeaways
Estimated delivery dates (EDDs) are a great way to provide your Shopify shop with the transparency your consumers want. Customers can make intelligent choices about what to buy because they know exactly when their new gifts will arrive. This makes purchasing more accessible and reduces worry while increasing trust and enjoyment.
For a more straightforward solution, the EComposer Builder Page lets you display EDDs without any coding required. This is an excellent choice if you just want the basic functionality.
To make your Shopify shop stand out, visit our blog for additional valuable hints.
comments