How can estimated delivery date be added on Shopify using code?
add a comment
1 Answer
To add an estimated delivery date on Shopify using code, you can follow these steps:
- In your Shopify dashboard, go to Online Store > Themes.
- Click on the Actions dropdown menu and select Edit Code.
Navigate to the theme.liquid file and add the following code inside the <head> tags:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>Save the changes to the theme.liquid file.
- Next, open the product-template.liquid file (or any other template file where you want to display the estimated delivery date).
Add the following code inside the
tag:<div class="product-details__delivery"> <label for="datepicker">Estimated Delivery Date:</label> <input type="text" id="datepicker" readonly="readonly"> </div>Save the changes to the product-template.liquid file.
Finally, add the following JavaScript code to the end of your theme.js file:
$(document).ready(function() { var d = new Date(); var deliveryDate = d.setDate(d.getDate() + 3); // Set delivery date as 3 days from today $( "#datepicker" ).datepicker({ dateFormat: 'dd MM yy' }).val(deliveryDate); });This code initializes a datepicker widget, sets the date format to "dd MM yy", and sets the default delivery date as three days from the current date. You can adjust the delivery date calculation as per your needs.
Save the changes to the theme.js file.
Once you complete these steps, the estimated delivery date will be displayed on your product pages.
Your Answer
Stats
Asked: 2023-01-15 11:00:00 +0000
Seen: 7 times
Last updated: Aug 12 '22