To Add Delivery Date Option in PDP Dawn Theme

[Az94]

Hi,

I need help where I want to create a section where customer can choose their delivery date in the PDP. Currently, I am using Dawn theme. This feature should 

1. grey out from the past date

2. I should be able to disable certain date for delivery option.

3. the information - delivery date, should be included in my order detail page. 

As-is

To - be

[prakashVt · Accepted solution]

Hello @Az94 

If you know a little bit of coding then insert this code on your PDP

<div>
  <label for="datePicker">Pick a Delivery Date:</label><br/>
    <input type="date" id="datePicker" name="properties['Delivery Date']" min="" />
</div>
    <script>
        // Set today's date as the minimum
        const today = new Date();
        const dateInput = document.getElementById('datePicker');
        dateInput.min = today.toISOString().split('T')[0];

        // Disable weekends (Saturday and Sunday)
        dateInput.addEventListener('input', function() {
            const selectedDate = new Date(this.value);
            const day = selectedDate.getUTCDay(); // 0: Sunday, 6: Saturday

            if (day === 0 || day === 6) {
                alert('Weekends are not allowed. Please choose a weekday.');
                this.value = ''; // Clear the invalid selection
            }
        });
    </script>

[prakashVt · Accepted solution]

Hello @Az94 

If you know a little bit of coding then insert this code on your PDP

<div>
  <label for="datePicker">Pick a Delivery Date:</label><br/>
    <input type="date" id="datePicker" name="properties['Delivery Date']" min="" />
</div>
    <script>
        // Set today's date as the minimum
        const today = new Date();
        const dateInput = document.getElementById('datePicker');
        dateInput.min = today.toISOString().split('T')[0];

        // Disable weekends (Saturday and Sunday)
        dateInput.addEventListener('input', function() {
            const selectedDate = new Date(this.value);
            const day = selectedDate.getUTCDay(); // 0: Sunday, 6: Saturday

            if (day === 0 || day === 6) {
                alert('Weekends are not allowed. Please choose a weekday.');
                this.value = ''; // Clear the invalid selection
            }
        });
    </script>

[Sajat · Accepted solution]

Hi @Az94 ,

Welcome to Shopify Community.

This is achievable with pretty simple code.

Go to Online Store -> Edit code

Search for the file buy-buttons.liquid.

Search for the code  <div class="product-form__buttons">

Just above this code, paste this code

<label for="delivery-date" class="form-label">Delivery date</label>
<input type="date" id="delivery-date" name="properties[delivery-date]">
<div>We deliver from Monday to Friday. For weekend deliveries, please call.</div>

and thats all, you will get the delivery date field on the product page and the delivery date entered by the visitor are displayed on details of order.

You can add your own styles from your main css file under assets.

Thank you,

Sajat

-------------------------------------------------------------------------------------------
If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.