inline item properties

dev12341
Tourist
9 0 3

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. 

Replies 4 (4)

Developer-G
Shopify Partner
3079 604 857

 Hello @dev12341 ,

Please them inside the from tag not under form tag.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
dev12341
Tourist
9 0 3

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

Developer-G
Shopify Partner
3079 604 857

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
dev12341
Tourist
9 0 3

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