Product Line Item Personalization Fields Shopify

product-personalize-fields.liquid

{% comment %}
Product personalization line items
{% endcomment %}

<div class="product-single__personalization">
  
  {% comment %}
  Product personalization required dropdown
  {% endcomment %}
  
  {% assign personalizationOptions =  section.settings.dropdown_options | split: "," %}
  {% if personalizationOptions.size > 0 %}
  <p class="product-single__personalization--line-item">
    <label>{{section.settings.dropdown_name}}</label><br>
    <select required class="required" id="{{section.settings.dropdown_name}}" name="properties[{{section.settings.dropdown_name}}]">
{% for option in personalizationOptions %}
      <option value="{{option}}">{{option}}</option>
      {% endfor %} 
    </select>
  </p>
  {% endif %}
  {% comment %}
 Product personalization optional input field
{% endcomment %}
  <p class="product-single__personalization--line-item">
    <label for="optional-personalization">{{section.settings.monogram}}</label>
    <input maxlength="3" placeholder="ABC" id="optional-personalization" type="text" name="properties[{{section.settings.monogram}}]">
  </p>
</div>