Vague shipping info makes shoppers nervous. A live ‘Get it between X and Y’ line sets the right expectation and reduces ‘where is my order’ support tickets. These snippets calculate the date range automatically from today’s date with vanilla JavaScript — 6 designs for different store types, all working without any app.

1. Fashion Store – Elegant Delivery Estimate

Soft and stylish for apparel brands.

Preview

Sample: dates auto-calculate from today’s date.

Liquid Code

<div class="lk-edd" style="font-family:Georgia, serif;">
  <span style="font-size:20px;">🚚</span>
  <span><strong>Estimated delivery:</strong> <span id="lk-edd-dates">calculating...</span></span>
</div>
<style>
.lk-edd {
  display:flex; align-items:center; gap:10px;
  background:#fdf6f4; border-left:4px solid #b76e79;
  border-radius:10px; padding:12px 16px; margin:14px 0;
  color:#5c3a42; font-size:14px;
}
</style>
<script>
(function(){
  function fmt(d){ return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); }
  var a = new Date(); a.setDate(a.getDate() + 3);
  var b = new Date(); b.setDate(b.getDate() + 5);
  document.getElementById('lk-edd-dates').textContent = fmt(a) + ' – ' + fmt(b);
})();
</script>

2. Electronics Store – Express Delivery Estimate

Bold tech styling with fast timelines.

Preview

Sample: dates auto-calculate from today’s date.

Liquid Code

<div class="lk-edd" style="font-family:'Segoe UI', sans-serif;">
  <span style="font-size:20px;">🚚</span>
  <span><strong>Express delivery:</strong> <span id="lk-edd-dates">calculating...</span></span>
</div>
<style>
.lk-edd {
  display:flex; align-items:center; gap:10px;
  background:#0b1c2c; border-left:4px solid #00e5ff;
  border-radius:6px; padding:12px 16px; margin:14px 0;
  color:#ffffff; font-size:14px;
}
</style>
<script>
(function(){
  function fmt(d){ return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); }
  var a = new Date(); a.setDate(a.getDate() + 1);
  var b = new Date(); b.setDate(b.getDate() + 2);
  document.getElementById('lk-edd-dates').textContent = fmt(a) + ' – ' + fmt(b);
})();
</script>

3. Grocery Store – Same-Day Estimate

Fresh green for groceries and essentials.

Preview

Sample: dates auto-calculate from today’s date.

Liquid Code

<div class="lk-edd" style="font-family:Verdana, sans-serif;">
  <span style="font-size:20px;">🚚</span>
  <span><strong>Delivery estimate:</strong> <span id="lk-edd-dates">calculating...</span></span>
</div>
<style>
.lk-edd {
  display:flex; align-items:center; gap:10px;
  background:#f2f9ec; border-left:4px solid #2e7d32;
  border-radius:10px; padding:12px 16px; margin:14px 0;
  color:#1b4d1e; font-size:14px;
}
</style>
<script>
(function(){
  function fmt(d){ return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); }
  var a = new Date(); a.setDate(a.getDate() + 0);
  var b = new Date(); b.setDate(b.getDate() + 1);
  document.getElementById('lk-edd-dates').textContent = fmt(a) + ' – ' + fmt(b);
})();
</script>

4. Furniture Store – White-Glove Estimate

Premium look for bulky goods with longer timelines.

Preview

Sample: dates auto-calculate from today’s date.

Liquid Code

<div class="lk-edd" style="font-family:Georgia, serif;">
  <span style="font-size:20px;">🚚</span>
  <span><strong>Delivery + installation:</strong> <span id="lk-edd-dates">calculating...</span></span>
</div>
<style>
.lk-edd {
  display:flex; align-items:center; gap:10px;
  background:#faf6f0; border-left:4px solid #8d5a2b;
  border-radius:4px; padding:12px 16px; margin:14px 0;
  color:#4a2f17; font-size:14px;
}
</style>
<script>
(function(){
  function fmt(d){ return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); }
  var a = new Date(); a.setDate(a.getDate() + 5);
  var b = new Date(); b.setDate(b.getDate() + 8);
  document.getElementById('lk-edd-dates').textContent = fmt(a) + ' – ' + fmt(b);
})();
</script>

5. Jewelry Store – Insured Delivery Estimate

Luxury black-gold for high-value items.

Preview

Sample: dates auto-calculate from today’s date.

Liquid Code

<div class="lk-edd" style="font-family:Georgia, serif;">
  <span style="font-size:20px;">🚚</span>
  <span><strong>Insured delivery:</strong> <span id="lk-edd-dates">calculating...</span></span>
</div>
<style>
.lk-edd {
  display:flex; align-items:center; gap:10px;
  background:#111111; border-left:4px solid #c9a227;
  border-radius:4px; padding:12px 16px; margin:14px 0;
  color:#f5e6c4; font-size:14px;
}
</style>
<script>
(function(){
  function fmt(d){ return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); }
  var a = new Date(); a.setDate(a.getDate() + 4);
  var b = new Date(); b.setDate(b.getDate() + 6);
  document.getElementById('lk-edd-dates').textContent = fmt(a) + ' – ' + fmt(b);
})();
</script>

6. Beauty Store – Glow Estimate

Playful pink for cosmetics lovers.

Preview

Sample: dates auto-calculate from today’s date.

Liquid Code

<div class="lk-edd" style="font-family:'Trebuchet MS', sans-serif;">
  <span style="font-size:20px;">🚚</span>
  <span><strong>Delivery estimate:</strong> <span id="lk-edd-dates">calculating...</span></span>
</div>
<style>
.lk-edd {
  display:flex; align-items:center; gap:10px;
  background:#fdf2f7; border-left:4px solid #ec4899;
  border-radius:16px; padding:12px 16px; margin:14px 0;
  color:#6d2d4d; font-size:14px;
}
</style>
<script>
(function(){
  function fmt(d){ return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); }
  var a = new Date(); a.setDate(a.getDate() + 2);
  var b = new Date(); b.setDate(b.getDate() + 4);
  document.getElementById('lk-edd-dates').textContent = fmt(a) + ' – ' + fmt(b);
})();
</script>

How to Add Estimated Delivery Date to Shopify

No theme file editing needed. Use Shopify’s Custom Liquid section:

1. In Shopify admin, go to Online Store > Themes.
2. Click Customize on your live theme (works with Dawn and all OS 2.0 themes).
3. Navigate to your product page template using the top page selector.
4. In the left sidebar, click Add section and choose Custom liquid.
5. Paste the code from any variation above into the Custom liquid box.
6. Drag the section to the right position (under the buy buttons is ideal) and click Save.

Tip: want it on every product automatically? Add the section once to the default product template and it appears store-wide.

Customize the Estimated Delivery Date

• Change the min/max day numbers in the script to match your real dispatch times.
• Skip Sundays: add a check with getDay() if you don’t ship on weekends.
• Change the locale in toLocaleDateString for other regions.
• Pair it with the pincode checker for maximum delivery confidence.

More Shopify Code Sections

• Shopify Product Page Pincode Delivery Checker
• Shopify Product Page Trust Badges with Liquid (Code + Guide)
• Shopify Product Page Stock Counter (Only X Left)
• Shopify Cart Countdown Timer
• Shopify Product Page Custom Offer Box
• Shopify Sticky Add to Cart Bar
• Shopify Product Page Size Chart Popup
• Shopify Product Page WhatsApp Order Button

Conclusion

An estimated delivery date is a small line of text that punches above its weight. It builds trust, cuts support queries, and nudges hesitant buyers. Drop in your variation and let the dates update themselves forever.

Want this done for you? LayoutKart builds conversion-ready Shopify stores with all these sections pre-installed. Browse our readymade Shopify templates or get a custom store built for your brand.