How to create Shopify app that provides custom fields (inputs) on product detail pages?

Solution:

There are multiple questions, I'll try to give an idea on how you could proceed.

When adding a product to the cart you can addproperties to thelineItem.lineItem is a line in the cart, its main attributes arequantity,variantiId, andproperties but there are many others.

Typically when you want to customize an item you add a property with the customisation.

Let's say I want to add a custom label to my phone case.

In your product page you have a form made like this

{% form 'product', product, id: "add-to-cart-form", novalidate: 'novalidate' %}

{% endform %}
Copy code

Inside that form put an input like this

<input type="text" name="properties[custom_text]" value=""/>
Copy code

If the input is filled by the customer with "My text", when the product is added to the cart, in your cart, thelineItem will be something like

{... "variantId" : 123, "quantity" : 1, "properties" : {"custom_text" : "My Text"} }

Note that properties are visible at checkout, unless the key starts with_, in that case only the shop can see them.

So your app would just need to add in the product form those input fields.

Regarding the price it's a bit more complicated, it's easier to add a product to the cart like "Customization" with a certain price.

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.