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

0 Likes

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.
0 Likes
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!

 

0 Likes

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.
0 Likes
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

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

0 Likes