Shopify themes, liquid, logos, and UX
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 %}
Solved! Go to the solution
This is an accepted solution.
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 %}
<div class="delivery-date">
<p><b>Estimated Delivery Date:</b></p>
<div id="m-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 }}
</div>
</div>
{% endif %}
This is an accepted solution.
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 %}
<div class="delivery-date">
<p><b>Estimated Delivery Date:</b></p>
<div id="m-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 }}
</div>
</div>
{% endif %}
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?
UPDATE::: you had underscores at the end of the metafield coding. Once removed, it works great. Thanks!
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025