how can i display delivery timeline on products ?

nithinknsk
Visitor
2 0 0

Hello,

 

can I have a code for Estimate prep time , dispatch date and estimated delivery date. (As Shown in Below image ).
which can be added to product page .  I think it can be achieved by metafields , but needed assistance with code . Thanks . 

Screenshot 2024-04-01 at 11.04.18 PM.png

 

Replies 2 (2)

LuffyOnePiece
Shopify Partner
293 53 51

Hi @nithinknsk ,

 

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.

Here is the reference code:

{% 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 %}


If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece



 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
nithinknsk
Visitor
2 0 0

hi @LuffyOnePiece 

thank you for your response but .

I need to achieve it more specific product page ( like as shown below ).

Order placed ----3 days------dispatch date-----(4-6 days)---- delivery date .  

 (today date )                            (4 - Apr)                                        (8 Apr - 10Apr).

like this .

can you suggest me

  • how to set metafield .
  • how to add to theme .
  • custom CSS if possible.

    Your help is much appreciated.