How to add a custom text field to a Shopify product page
Personalised products need somewhere for the customer to type: a name, initials, a date, a note for the maker. Shopify supports this out of the box through line item properties; the work is in putting the field on the page.
The free way: a line item property
Any input inside the product form whose name is properties[Label] is saved with the item. The label becomes the heading on the order, so name it the way you want it to read in your admin, for example properties[Name to print].
In the theme editor, open a product page, add a Custom Liquid block to the product information section and paste this in. The form attribute ties the field to the Add to cart form, so the answer is sent with the product. This works on Dawn and most current Shopify themes; if your theme names its product form differently, the field will appear but its answer will not reach the cart.
<p>
<label for="print-name">Name to print</label><br>
<input id="print-name" type="text" maxlength="24" required
name="properties[Name to print]"
form="product-form-{{ section.id }}">
</p>Making it required
The required attribute above stops the browser from submitting an empty field, but only when the theme submits the form normally. Themes that add to cart with their own script can skip that check, so test it on your store before relying on it.
Hiding a property from the customer
Properties whose label starts with an underscore, such as properties[_internal], are kept on the order but hidden from the cart and checkout on most themes. Useful for reference codes the customer does not need to see.
When to use an app instead
The theme-code field is the same on every product that uses the template, cannot charge for the text, and needs editing in code to change. An app is worth it when different products need different fields, when some answers cost extra, or when one answer should reveal another field.
Varia is our app, so weigh this accordingly. It adds the field, shows the price next to it, keeps a running total on the product page and adds the charge at checkout as its own line, without creating a duplicate product for each option. The free plan covers one live option set with text, dropdown and checkbox fields and flat add-on prices.