How to display an estimated delivery date

Tourist
4 0 2

Hi there, I'm very new at Shopify and I have a question regarding how the display an estimated delivery date on the product page and on the cart. This might sound odd but this is a law requirement in France since mid-June (Loi Hamon): all e-shops do have the obligation to display the maximum date when the customer will receive his/her order.

Could anyone tell me if it's possible (and how) to add a phrase on the cart page and, if  possible (but optional) on the product page, saying something like : "Order today, and you'll be delivered between (today+5 days) and (today+10 days)"?

Many thanks in advance for those who will provide some help.

[EDIT] Richard from the support send me a link to this topic: https://ecommerce.shopify.com/c/ecommerce-design/t/display-an-estimated-delivery-date-174024

I think this is exactly what I'm trying to do, but I absolutely don't know where to put this code. Could anyone help? Thanks!!!!

 

0 Likes
Tourist
4 0 2

I still haven't found how to include the code mentioned in the other post, but I found a solution that works fine, thanks to this short tutorial. I will explain what I did for the other newbies like me who might have the same problem:

First I created a new Page where I included the code from the link below (via the HTML editor), in the phrase :

Order today and you'll receive your package between ... and ... (*)

<p><span style="font-size: 14px;">Order today and you'll receive your package <strong>between <script>// <![CDATA[
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate() + 4
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
// ]]></script> and <script>// <![CDATA[
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate() + 7
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
// ]]></script></strong>*.

This code doesn't take working days into accounts, so the (*) relates to a mention below that says :

(*) or the next working day following this date

Then I named the file "delivery-info" (in the "URL & handle" field), saved it, went to the Template Editor and opened the cart.liquid file. I called the page by adding the following code under the <h1> title :

{{ pages.delivery-info.content }}

And that's it !

To change the estimated date, you juste have to change the number of days at the end of this/these line(s):

var day = currentTime.getDate() + 4

I hope it will be helpful.

 

1 Like
Shopify Staff
Shopify Staff
5826 0 276

Hi Candice,

You can also use this library in the most simple way:

<p>Order today, and you'll receive your package between <span id="fromDate"></span> and <span id="toDate"></span>.</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>

Only use the above code, and place it where you want to display the delivery estimate inside your product.liquid template.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
4 Likes
Shopify Staff
Shopify Staff
5826 0 276

I added code to jump to the next Monday if date falls during the week-end.

This in the format:

dS

... gives you the day of the month between 1 and 31 followed by the ordinal suffix ("st, "nd", "rd" or "th") of that day.
 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
1 Like
Tourist
4 0 2

Thank you very much Caroline, it works perfectly!

1 Like
Highlighted
Excursionist
58 0 4

Caroline, 

Thank you so much for this.

Is there a way to change the delivery date by product tag (or other means) rather than individually? (I dont know if liquid variables can be referenced in javascript)?

How can I add this information to the order confirmation ?  I would like to know which date we have promised.

Can we specify the delivery time based on whether it is currently before or after our cut off time for orders to be processed the same day?

Thanks so much!
 

1 Like
Shopify Expert
91 1 6

Hi rrg211.

 

The above code is great but as you have identified, it is static and something than can react to cutoff times is something Delivery Timer can do.

 

Delivery Timer, previously featured on the Shopify App Store, allows you to display order by and delivery estimates creating customer urgency but also satisfying customers need for clear information on shipping.

 

You can check out the app here which is also fully supported: https://apps.shopify.com/delivery-timer

Shopify Expert, Apps & Support - https://www.launchtip.com
0 Likes
New Member
12 0 0

Hello Caroline, 

 

Sorry to dig this old topic but could you tell me how to have this but in french language and format ?

 

<p>Order today, and you'll receive your package between <span id="fromDate"></span> and <span id="toDate"></span>.</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>

Thanks

0 Likes