inline item properties

[dev12341]

How to add custom inline line items properties to the product page with the new design?

I tried using the UI Element Generator and place it under the "form" object in the "main-product.liquid" but the item properties are not showing in the cart and the required attributes are not working. 

[Guleria]

 Hello @dev12341 ,

Please them inside the from tag not under form tag.

Thanks

[dev12341]

Can you please share an example? I tried every possible combination....

[Guleria]

Just place your code before 
</form> or {% endform %} 

[dev12341]

That's exactly what I did, but it is not working with the new 2.0 version.

Here is how my code looks inside the section file "main-product.liquid" (below).

But the property is not shown in the checkout cart after the product is added to the cart, AND the "required" attribute is never enforced (that is, it is possible to submit the form with blank value in the new field):

{%- form 'product', product, id: 'product-form-installment', class: 'installment caption-large' -%}

              <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

              {{ form | payment_terms }}

        <p class="line-item-property__field"> 

                   <label for="from-the-full-name-of-the-card-sender" style="font-weight: 600;">From: </label> 

                   <input  

                          style="width:100%; max-width:100%;" 

                          id="c_from" 

                          class="field__input required" 

                          type="text" 

                          name="properties[From: ]"

                          required> 

                </p> 

            {%- endform -%}