Servv displays default fields during the checkout process like appointment time. Merchants can add more custom fields to the Product or Order page. These fields are handled directly by Shopify.
To add custom fields, please follow this Shopify article -> link
Example:
In this example, we will add three custom fields (DOB, Location and Time of birth) to Order page.
1. Go to Shopify UI Element generator and get HTML code for three fields i.e.
<div>
{% if item.vendor contains "SERVV_EVENT_ZOOM_APOINTMENT" %}
<p class="cart-attribute__field">
<label for="dob">DOB</label>
<input id="dob" type="text" name="attributes[DOB]" value="{{ cart.attributes["DOB"] }}">
</p>
<p class="cart-attribute__field">
<label for="birth-location">Birth Location</label>
<input id="birth-location" type="text" name="attributes[Birth Location]" value="{{ cart.attributes["Birth Location"] }}">
</p>
<p class="cart-attribute__field">
<label for="time-of-birth">Time of birth</label>
<input id="time-of-birth" type="text" name="attributes[Time of birth]" value="{{ cart.attributes["Time of birth"] }}">
</p>
{% endif %}
</div>
2. Edit theme and add code to `cart-template.liquid`. Please refer to this Shopify article for details on how to edit theme and add code. Click Save.
3. The fields should now display on the order page as shown below:
4. Users can now enter details in custom fields and place an order. Entered details can be viewed by admin in Orders page under "Additional Details" section on the right as shown below.
Options Drop-down Field:
If you would like to display a drop-down field instead of text field, you can reference this sample code in step-2 above:
<div>
{% if item.vendor contains "SERVV_EVENT_ZOOM_APOINTMENT" %}
<p class="line-item-property__field">
<label>Make a choice</label><br>
<select required class="required" id="appointment-topic" name="attributes[appointment-topic]" placeholder="Make a selection">
<option value="Kitchen"{% if cart.attributes["appointment-topic"] == "Kitchen" %} selected{% endif %}>Kitchen</option>
<option value="Garage"{% if cart.attributes["appointment-topic"] == "Garage" %} selected{% endif %}>Garage</option>
<option value="Bathroom"{% if cart.attributes["appointment-topic"] == "Bathroom" %} selected{% endif %}>Bathroom</option>
<option value="Outdoor"{% if cart.attributes["appointment-topic"] == "Outdoor" %} selected{% endif %}>Outdoor</option>
<option value="Indoor"{% if cart.attributes["appointment-topic"] == "Indoor" %} selected{% endif %}>Indoor</option>
</sele
</p>
{% endif %}
</div>