Adding a Delivery and Pick up Calendar with Date and Time to product pages

Store Design
1

Hi.

I"ve found a tutorial on how to add a calendar onto the cart page. I’m also wanting this on the product page itself but up above the ADD TO CART Button.

Can anyone tell me where to place the code in the product.liquid so it sits nicely above the ADD TO CART button and not at the bottom of the page.

The website is still in development stage: https://north-steyne-emporio.myshopify.com/

Thanks

Megan

Screen-Shot-2021-02-02-at-3.34.30-pm.jpg
Screen-Shot-2021-02-02-at-3.34.30-pm.jpg2410×2162 465 KB

2

Here you go.

Insert the following code to the product-template.liquid file at line 218:


                

                  
                  

                    *We deliver Monday to Friday. Please call for weekend deliveries.*

This should return the following output:

DatePicker.png
DatePicker.png544×149 4.57 KB

Note the input will be stored as ‘Delivery Date’ in the order.

3

Thanks so much for this solution - works perfectly!

Something really small - if I wanted a little more space between the Delivery Date DIV and the Add to cart button, how would I do this?

Thanks again - you’re amazing!

4

You can increase the bottom margin like so:
5

Hey Megan,

Were looking to add a pick-up date for customers to our page. Can you send me the link to the tutorial you’ve referenced?

Thanks

6

this code is working but , i dont have product.template file in my store ,i have product-form.liquid where i want this . but due to forloop i could not implement.

and how can i highlight the date for selection like range (from ,to).

7

Hi, I tried adding the code into the file like you mention but there nothing appears. I am using the Narrative theme and not sure what the reason is for this. Can you help me out?

8

Decide whether to let customers choose suitable delivery dates and time slots in your preferred format or not by enabling or disabling the delivery date picker from the backend of the delivery app. Display the delivery date picker on either product page(s) or cart page.

When your requirement is limited to just showing the estimated delivery date to the customers, then you should use scripts to show the delivery date.

Order Delivery Date Manager provides the delivery date selection on the product page and also with the cart page.

Ey+8CEAE=.png
Ey+8CEAE=.png1600×900 168 KB

9

Hey Megan, I’ve had a look on your shop and wonder which app you used for the date picker and free text field. I’d need both for my shop, but as newbie don’t know where to start.

thanks

Andrea

10

Hi Themecaster.

You kindly helped me out with some code to add a Delivery Date / Calendar. If I needed to make this section required how would you go about setting this as a requirement?

Kindest

Megan

11

The details for Delivery date and time, can be included in Shopify’s Order confirmation and packing slip?

12

So I did this, but when I placed a test order the date did not show up on the order. Do you know why this could be?