Need Help Adding Delivery Date and City Selectors to Product Pages

[Giftshop-Digita]

Hello Shopify Community,

We’re looking for some assistance with our Shopify store. We want to add two features to our product pages:

1. Delivery Date Selector: Allowing customers to choose their preferred delivery date.
2. City Selector: Covering all cities in the 7 Emirates of the UAE.

As a new startup, managing costs is crucial, and we’d prefer not to use third-party apps with monthly fees. Any advice or guidance on how to implement these features would be greatly appreciated!

[BlackCro]

You could achieve this by using the <date> and <select> elements inside main-product.liquid and linking them to the basket form using the form= attribute. This would include the preferred Date and City as a note to the order.

        <select name="properties[City]" form="{{ product_form_id }}" id="dropdown_1">
          <option value="City1"> City 1</option>
          <option value="City2"> City 2</option>
          <option value="City3"> City 3</option>
        </select>


          <input type="date" form="{{ product_form_id }}" name="properties[Date]" value="2024-06-01" />

If you're not comfortable editing the code yourself, we could certainly help you with this.

Kind regards

Simon 

[Huptech-Web]

Hi @Giftshop-Digita 
You can add a delivery date selector to your product page by adding a date input field. Here’s how you can do it:

1. Delivery Date Selector

Step 1: Add the Date Picker HTML to Your Product Page

- Go to your Shopify admin and navigate to Online Store > Themes.

- In the Sections folder, find the file named product-template.liquid (or main-product.liquid depending on your theme).

- Look for the {% form %} or <form> that adds the product to the cart. Inside this form, add the following HTML for the date picker:

<label for="delivery-date">Choose your delivery date:</label>
<input type="date" id="delivery-date" name="delivery_date" required>

Step 2: Capture the Selected Date

To capture and pass this date to the cart, you need to include it as a line item property. Add the below code to the form

<input type="hidden" name="properties[Delivery Date]" id="hidden-delivery-date">

Then, use JavaScript to update this hidden input field whenever the user selects a date:

<script>
  document.getElementById('delivery-date').addEventListener('change', function() {
    document.getElementById('hidden-delivery-date').value = this.value;
  });
</script>

Step 3: Display the Delivery Date in the Cart and Checkout

- Go to the cart.liquid file (found under Templates or Sections).
- Find the loop that displays cart items, and add the following code to display the selected delivery date:

{% for p in item.properties %}
  {% if p.first == 'Delivery Date' %}
    <p><strong>Delivery Date:</strong> {{ p.last }}</p>
  {% endif %}
{% endfor %}

 2. City Selector Covering All Cities in the 7 Emirates of the UAE

You can create a dropdown selector for cities by manually adding the cities as options.

Step 1: Add the City Selector HTML

In the same product-template.liquid file, add the following HTML code in form tag:

<label for="city-selector">Select your city:</label>
<select id="city-selector" name="properties[City]" required>
  <option value="" disabled selected>Select your city</option>
  <optgroup label="Abu Dhabi">
    <option value="Abu Dhabi City">Abu Dhabi City</option>
    <option value="Al Ain">Al Ain</option>
    <!-- Add more cities under Abu Dhabi -->
  </optgroup>
  <optgroup label="Dubai">
    <option value="Dubai City">Dubai City</option>
    <!-- Add more cities under Dubai -->
  </optgroup>
  <optgroup label="Sharjah">
    <option value="Sharjah City">Sharjah City</option>
    <!-- Add more cities under Sharjah -->
  </optgroup>
  <!-- Repeat for the remaining Emirates: Ajman, Fujairah, Ras Al Khaimah, Umm Al Quwain -->
</select>

Step 2: Display the Selected City in the Cart and Checkout

Similar to the delivery date, you can display the selected city in the cart:

{% for p in item.properties %}
  {% if p.first == 'City' %}
    <p><strong>City:</strong> {{ p.last }}</p>
  {% endif %}
{% endfor %}

By following the above steps, you can add a Delivery Date Selector and a City Selector to your Shopify product pages without needing third-party apps.  

Thank you.

D.P,

[Huptech-Web]

Hi @Giftshop-Digita 

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.