How to display the estimated delivery date on your shopify store

In this tutorial we will see how to add a dynamic estimation of the delivery date on a Shopify product page.

The goal is to propose a range of days (like 7 to 14) to display an estimated delivery date within those days. The the system will automatically calculate the approximate delivery date. This system takes into account the working days and will therefore not calculate the Saturday and Sunday of the day of purchase.

It’s going to look like this:

How to display the estimated delivery date on your shopify store

You can see the result on this demo store : https://speed-ecom-tutorials.myshopify.com/products/product-1

Password : Speedecom

Why display the delivery date on your Shopify store?

Allowing access to this information will save you a lot of client support. The customer will be able to clearly see the delivery time before ordering a product. He will therefore be aware of a delivery between a minimum and a maximum amount of days. Moreover, you will be able to define the number of days in the options of the provided code.

As a bonus I also propose you to indicate 2 additional details like…

  • Free exchange within x days,
  • Only available online,
  • And delivery within xxx and the xxx

How to install the codes?

The CSS code

This part allows you to customize the display options of the content area and the colors of the texts.

Go to online store – Actions – Edit code

Open the “Assets” folder and click on the file “theme.scss.liquid, style.scss.liquid, timber.scss.liquid” or any other file “xxx.scss.liquid” that is specific to your theme.

Paste the code below at the very bottom of the file:

.dg-shipping-date {
  margin:10px 0 10px 0;letter-spacing:0.01em;text-transform: uppercase;
}
.dg-shipping-date p {
  color:#333;
  font-size:11px;line-height:22px;color:#333;
}
.dg-shipping-date p span {
  color:#4ca868;
}

The JS code

We will calculate the approximate delivery date between 14 and 18 days. Don’t forget to change the variables “start date” and “end date” according to your own preferences.

Go to online store – Actions – Edit code

Open the “Assets” folder and click on the file “theme.js, style.js, timber.js” (there may be the term .liquid as the ending), or any other “xxx.js” file that is specific to your theme.

Paste the code below at the very bottom of the file:

(function() {
// estimate the delivery date
if(document.getElementById('fromDate')) {
  
  var dateStart = 6;
  var dateEnd = 12;

  var fromDate = Date.today().addDays(dateStart);
  if (fromDate.is().saturday() || fromDate.is().sunday()) { 
    fromDate = fromDate.next().monday();
  }
  var toDate = Date.today().addDays(dateEnd);
  if (toDate.is().saturday() || toDate.is().sunday()) { 
    toDate = toDate.next().monday(); 
  }
  document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM');
  document.getElementById('toDate').innerHTML = toDate.toString('dd/MM');
}
})();

The HTML code

Go to online store – Actions – Edit code

Open the Sections folder and click on the “product-template.liquid” file (if you don’t have a product-template.liquid go to “Templates – product.liquid”).

You will have to find and select a specific zone to display the content. Ideally put it just before the form below the product title. To do this do a ctrl + F or cmd + F and look for the term: ” <h1 ” and paste the code on the line below.

To make it easier you can watch the video tutorial available a little further down!

Code to copy/paste:

<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<div class="dg-shipping-date">
<p>
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/dollar-symbol.png?7836362982984239286" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;">Free returns <span>under 30 days</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/package_1_4fdab5e4-e664-4a7d-be7b-838d8ff12915.png?4359582636050475579" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Only available <span>online</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/truck.png?8138466027095184927" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Delivery estimated within <span id="fromDate">20/11</span> and <span id="toDate">29/11</span>
</p>
</div>

Use the code below If you want to only display the estimated delivery dates

<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<div class="dg-shipping-date">
<p>
<img src="https://cdn.shopify.com/s/files/1/2692/4812/files/truck.png?8138466027095184927" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Delivery within <span id="fromDate">20/11</span> and <span id="toDate">29/11</span>
</p>
</div>

If the tutorial doesn’t work you can try to add this code in Layout – theme.liquid -> find the closure of the /head tag and copy/paste the code below on the line above the /head tag:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>  

If it still won’t work after that, unfortunately, I won’t be able to do anything more for you 😀

This tutorial is also available in video format

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *