How to Add An Automatic Estimated Delivery Date on Your Shopify Store

When you purchase anything on eBay, one of the first things you take a note of is the estimated delivery date. This little feature assures the customer of getting the product delivered. Admit it or not, humans are lazy! Our brains want to get away with the least amount of calculation. So instead of calculating estimated delivery date from today's date and the usual or average shipping time, we prefer someone else to do the math for us and let us know the estimated delivery date. eBay knows it!

Even Amazon knows it, too. Is it one of those things that made them so successful?

As a Shopify eCommerce entrepreneur, I looked for an app on Shopify's marketplace for apps, but found absolutely nothing! That's when I had to look for an alternative solution. Javascript seemed to be the right option. This post here made it easier for me to implement this on my store.

For Shopify entrepreneurs, who dropship the products from China, the delivery time in the US is generally longer than usual. ePacket seems to be the cheapest yet the fastest carrier of all. For one of my stores, the average delivery date was from 15 to 25 days after a customer placed an order. So I tweaked the code as my requirement.

To add a custom estimated delivery date, you need to login to your Shopify admin panel. From the side bar, click on "online store." When you are on the page where you see the theme currently installed on your store, you'll find the three little dots (...) at the top-right corner. Click on them and a drop down menu will appear. Click on "Edit HTML/CSS" and you'll see a list of all .liquid files. Find the file "product.liquid" and click on it. If you're not very comfortable with codes, don't do it all on your own! You might accidentally remove any important lines of the code! Place the following piece of code where you want the custom delivery date to appear. For me, it was just above the options, such as color, size etc.

<p>Order today, and you'll receive your package between <i><span id="fromDate"></span></i> and <i><span id="toDate"></span></i> </p>

{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}

<script>

 var fromDate = Date.today().addDays(15);

 if (fromDate.is().saturday() || fromDate.is().sunday()) { 

fromDate = fromDate.next().monday();

 }

 var toDate = Date.today().addDays(25);

 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>

If today is 2nd of April, 2017. The JavaScript code above will generate a dynamic text on your product page which will look like this:

"Order today, and you'll receive your package between Monday April 17th and Thursday April 27th"

You can tweak the code and show any date you want. Just change 15 and 25 from the piece of code to any number that you see fit.

var fromDate = Date.today().addDays(15);
?var toDate = Date.today().addDays(25);

I hope this piece of information will help you to convert more visitors into customers. Let me know if you have any question.

Happy selling!

#eCommerce #Shopify #Dropshipping #Entrepreneurship