How can I add range date and location detection on Shopify Dawn?

Store Design
, , , , ,

Topic summary

A user implemented an estimated delivery date feature on Shopify product pages using metafields and custom CSS. The code calculates a future delivery date by adding a specified number of days to the current date.

Initial Problem:

  • Needed to add date ranges (e.g., “Jan 15 to Jan 20”) instead of single dates
  • Wanted location-based delivery estimates for different countries (USA vs Canada)

Solution Provided:

  • Create a second metafield called “Range Date For Delivery” to specify the start of the date range
  • Modified code displays both range start and end dates using two metafields
  • The original poster confirmed the solution works after removing trailing underscores from the metafield references

Location Detection:

  • Suggested using Shopify’s Location API to detect customer location and adjust delivery estimates accordingly
  • This feature remains unimplemented but was recommended as the next step

Status: The date range functionality is now working. Location-based detection would require additional API integration.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have a code for Estimate delivery date for my product pages. Using custom CSS section and using the metafields. Works great.

However, I’m wanting to add range date and location from where the customer are from for better estimation dates, USA has different shipping times than Canada.

How can I add range date and location detection? Thanks

CODE:

<style>
.delivery-date, .delivery-date p, .delivery-date div { display:inline;}
</style>

{% if product.metafields.custom.number_of_days_for_delivery != blank %}
                      <div class="delivery-date">
                        <p><b>Estimated Delivery Date:</b></p>
                          <div id="m-date">
                          {% assign days_to_add = product.metafields.custom.number_of_days_for_delivery | date: "%s" | times: 86400 %}
{% assign future_date = 'now' | date: "%s" | plus: days_to_add | date: "%d %b" %} {{ future_date }}
                         </div>
                      </div>
                      {% endif %}
2

Hello @xnyjyh , To display the range date create another meta field “Range Date For Delivery” and replace your code with the below code. Also, Replace the meta field code for “product.metafields.custom.range_date_for_delivery” with your meta field.

{% if product.metafields.custom.number_of_days_for_delivery_ != blank %}
  
    

**Estimated Delivery Date:**

      
        {% if product.metafields.custom.range_date_for_delivery != blank %}
          {% assign range_date_add = product.metafields.custom.range_date_for_delivery | date: "%s" | times: 86400 %}
          {% assign range_date = 'now' | date: "%s" | plus: range_date_add | date: "%d %b" %}
        {% endif %}
      {% assign days_to_add = product.metafields.custom.number_of_days_for_delivery_ | date: "%s" | times: 86400 %}
        
  {% assign future_date = 'now' | date: "%s" | plus: days_to_add | date: "%d %b" %}
    {% if range_date %} {{ range_date | append: ' to ' }} {% endif %} {{ future_date }}
    

  

{% endif %}
2 Likes
3

this is the current metafield i had. on the product page I get only one option to input a number. with this new code, how would I set up the metafield and what would I input in the product metafield option?

#11.png
#11.png695×708 13.5 KB

4

UPDATE::: you had underscores at the end of the metafield coding. Once removed, it works great. Thanks!

1 Like
5

Hi @xnyjyh
You can use the above code to set the delivery date using metafields. For location functionality, you need to use the Location API. This API allows us to detect the customer’s location and update the date range accordingly. Feel free to contact me if you have any questions.