Solved

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

meganv
Shopify Partner
4 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)

themecaster
Excursionist
30 10 19

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 11 (11)

themecaster
Excursionist
30 10 19

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.
meganv
Shopify Partner
4 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 19

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.
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
Visitor
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?

meganv
Shopify Partner
4 0 0

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

matildeflorist
Visitor
1 0 0

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?

Ironwood
Visitor
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

vrundap
Excursionist
26 0 4

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
kaycnavarro
Visitor
3 0 0

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

Andrea45
Visitor
3 0 0

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