Need Help Adding Delivery Date and City Selectors to Product Pages

Store Design
1

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!

shopify products page.png
shopify products page.png1876×796 121 KB

2

You could achieve this by using the 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.

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

Kind regards

Simon

3

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 that adds the product to the cart. Inside this form, add the following HTML for the date picker:

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

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

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' %}
    

**Delivery Date:** {{ p.last }}

  {% 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:

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' %}
    

**City:** {{ p.last }}

  {% 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,

4

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.