Add Estimated Delivery Date For Shopify Via Custom Code
How to Add Estimated Delivery Dates in Shopify (3 Simple Methods)
Introduction
Adding estimated delivery dates to your Shopify product pages or cart is a powerful way to build customer trust and increase conversions. While Shopify does not offer this feature by default, you can easily implement it using custom code. In this guide, you’ll learn three effective methods to display estimated delivery dates on your Shopify store.
Why Show Estimated Delivery Dates?
Including delivery estimates on your store helps in multiple ways:
- It builds the customer trust (source: Baymard Institute research on delivery expectations)
- Reduce the risk of cart abandonment
- Decreases support inquiries about shipping
- Increase conversions by quicker purchasing decisions
Methods for Adding Estimated Delivery Dates
There are 3 possible ways of how you can add an estimated delivery date in Shopify.
- Show static Estimated delivery date range
- Show dynamic delivery date based on the Today’s date
- Dynamic Delivery By Product or Location Using Metafields
Method 1: Show Static Estimated Delivery Date Range
In this method you can set the static delivery date based on your business shipping details, usually (Delivery in 3-5 business days). Estimated delivery date in the store can help to improve the user user experience and trust. Here is the final result, check the GIF below to see how it will look before we go through the steps.
Step 1: Navigate to Online store > Themes > Edit code
Step 2: Navigate to the product.liquid or main-product.liquid file (can be changed from theme to theme) and open it.
Step 3: Paste the following code in the desired location usually below the add to cart button and save the changes.
Estimated Delivery: 3–5 business days
Pros:
- It is a simple and fast approach.
- No need to calculate the actual dates.
Cons:
- It is not personalized
- It doesn’t add weekends or holidays.
Method 2: Show dynamic delivery date based on the Today’s date
In this method you can show a dynamic delivery date range based on today's date like "Estimated delivery between July 26 and July 29". Hard coded dates needs updates on regular basis while dynamic dates can be changed once. It automatically updates based on the current date.
Step 1: Navigate to Online Store > Themes > Edit code
Step 2: Go to the main-product.liquid file.
Step3: Paste thi s code inside product.liquid or main-product.liquid file inside the script tag.
<p id="estimated-delivery"></p>
<script>
const today = new Date();
const minDays = 3;
const maxDays = 6;
const options = { month: 'long', day: 'numeric' };
const startDate = new Date(today);
startDate.setDate(today.getDate() + minDays);
const endDate = new Date(today);
endDate.setDate(today.getDate() + maxDays);
const formattedStart = startDate.toLocaleDateString('en-US', options);
const formattedEnd = endDate.toLocaleDateString('en-US', options);
document.getElementById('estimated-delivery').innerText =
`Estimated delivery between ${formattedStart} and ${formattedEnd}`;
</script>
Pros:
- It automatically updates on a daily basis and doesn't have to update manually.
- It is a professional way of doing things.
Cons:
- It does not skip weekends and holidays.
- Must need customizations for local zones.
Method 3: Dynamic Delivery by Product or Location Using Metafields
In this method if you have different delivery time per product or region than this method can give you full control. In this method you can set the different delivery date based on the country and region and set the different date for each product separately. Follow these steps to add delivery date using the Metafields.
Step 1: Add Metafield to your product.
Step 2: Navigate to the Shopify Admin and click Settings.
Step 3: Navigate to the Metafields and Metaobjects section
Step 4: Select Products and then click Add definition Button
Step 5: Name it something like Estimated Delivery and select the type to Single line Text
Step 6: Navigate to the Product section and select the product where you want to add Metafield value and click on it.
Step 7: Go to the Metafiled section and add something like this.
Step 8: Navigate to the main-product.liquid file and add following code to the file.
{% if product.metafields.custom.estimated_delivery %}
<p class="estimated-delivery">
{{ product.metafields.custom.estimated_delivery }}
</p>
{% endif %}
For more on boosting conversions, see our in-depth guide: Why SEO is Important for E-commerce | Boost Visibility and our Shopify conversion rate optimization tips.
Bottom Line
Displaying estimated delivery dates can significantly enhance the shopping experience and build trust with your customers. Whether you choose a static message, dynamic script, or product-specific metafields, each method offers its own level of customization and complexity. If you want more tips on enhancing your Shopify store’s features, visit Shopify’s official help center or explore our Shopify development services for tailored solutions.
Choose the method that best fits your business needs and technical comfort. A small tweak like this can make a big impact on your Shopify store’s performance!
Need help implementing this on your store? If you'd like expert assistance or something in this blog isn't working as expected, feel free to reach out to Ecomx Agency, we're here to help you get it fixed fast and right!