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

Solved
meganv
New Member
3 0 0

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

Accepted Solution (1)

Accepted Solutions
themecaster
Excursionist
30 10 15

This is an accepted solution.

Here you go.

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

                <label for="deliveryDate">
                      Pick a delivery date
                    </label>
                <div class="product-form__input">
                  <input type="date" name="properties[Delivery Date]" id="deliveryDate">
                  <div style="display: inline-block; margin-bottom: 5px;">
                    <i>We deliver Monday to Friday. Please call for weekend deliveries.</i>
                  </div>
                </div>

This should return the following output:

DatePicker.png

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

 

If my response was helpful please Like and Mark As Solution.

View solution in original post

Replies 7 (7)
themecaster
Excursionist
30 10 15

This is an accepted solution.

Here you go.

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

                <label for="deliveryDate">
                      Pick a delivery date
                    </label>
                <div class="product-form__input">
                  <input type="date" name="properties[Delivery Date]" id="deliveryDate">
                  <div style="display: inline-block; margin-bottom: 5px;">
                    <i>We deliver Monday to Friday. Please call for weekend deliveries.</i>
                  </div>
                </div>

This should return the following output:

DatePicker.png

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

 

If my response was helpful please Like and Mark As Solution.

View solution in original post

meganv
New Member
3 0 0

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!

 

themecaster
Excursionist
30 10 15

You can increase the bottom margin like so:

<div style="display: inline-block; margin-bottom: 30px;">

 

If my response was helpful please Like and Mark As Solution.
Ironwood
New Member
1 0 0

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

shyam2021
Tourist
3 0 1

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).

abelseetoh
New Member
3 0 0

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?

vrundap
Tourist
26 0 3

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

 

AppJetty Apps to Improve Sales: CommerceXpand & Delivery Date Manager