Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
Note the input will be stored as 'Delivery Date' in the order.
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:
Note the input will be stored as 'Delivery Date' in the order.
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!
You can increase the bottom margin like so:
<div style="display: inline-block; margin-bottom: 30px;">
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).
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?
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
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?
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
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.
The details for Delivery date and time, can be included in Shopify's Order confirmation and packing slip?
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024