Add a Name Field to Shopify Products (2026 Guide)

Add a name field to Shopify product pages with code or an app in 2026. Step-by-step setup, troubleshooting, and the Bespo verdict for scaling personalization.

calendar_today
schedule
How to add a name and initial field to Shopify product pages

The blog

Add a Name Field to Shopify Products (2026 Guide)

Adding a name or initial field to a Shopify product page takes five minutes with an app, or an afternoon of Liquid work if you're doing it yourself — this guide covers both paths and the mistakes that break checkout data.

TL;DR

You add a name field to a Shopify product two ways: hand-code a line item property into product-form.liquid, or install a personalisation app like Bespo that adds a live-preview text field with zero code. The DIY route works for a single static field but breaks down fast once you need character limits, live previews, or production-ready files for fulfillment. Bespo is the faster verdict for 2026 if you're selling more than a handful of personalized SKUs — the code method is fine for a one-off test. Either way, the field has to write into properties[Name] so it survives checkout and shows up on the order.

Why this matters

A name or initial field isn't decoration — it's the difference between an order you can fulfill correctly and one you have to email the customer about. Shopify's native checkout doesn't have a personalization input built in, so every store selling monogrammed, engraved, or embroidered products has to add one manually or through an app.

Get the implementation wrong and the name typed by the shopper never reaches the order, the fulfillment team, or the packing slip — it just vanishes after "Add to Cart." That's the single most common support ticket on personalized product listings in 2026: customer says they entered "Sarah," order shows nothing.

What you'll need

  • Access to your Shopify theme editor (Online Store > Themes > Edit code), or a personalisation app installed on the store
  • 15-30 minutes for the code method, or under 5 minutes for an app-based setup
  • A test product to build and check the field on before rolling it out storewide
  • A character limit in mind — most engravers and embroiderers cap names at 15-20 characters
  • If you're going the app route, Bespo handles the field, the live preview, and the production file output in one setup

The steps

1. Decide whether you need a static field or a live preview

A plain text input is enough if the name just needs to show up on the order and packing slip. If shoppers need to see "Sarah" appear on the product image before they buy — which lifts conversion on engraved and monogrammed items — you need a live-preview customizer, not a bare input box.

Static fields are a code job. Live previews require rendering logic most merchants don't want to write from scratch, which is the reason personalisation apps exist. Pick your route now because it changes every step after this one.

2. Add the input to product-form.liquid (code method)

Open your theme's main-product.liquid or product-form.liquid file and drop a text input inside the <form> tag, before the Add to Cart button:

<label for="name-field">Name or Initial (max 20 characters)</label>
<input type="text" name="properties[Name]" id="name-field" maxlength="20" required>

The properties[Name] naming is what makes Shopify carry the value into the cart and order object automatically — get this attribute wrong and the field is cosmetic only. This is the step where most DIY builds fail silently.

3. Enforce a character limit with JavaScript

HTML's maxlength attribute stops typing past the limit, but it doesn't stop pasted text or give the shopper a live counter. Add a small script that counts characters and shows a warning at 18 of 20, so nobody submits a name that gets truncated on the engraving file.

Skip this and you'll get orders where "Alexander" becomes "Alexande" with no explanation to the customer — a common mistake on stores that only rely on the HTML attribute.

4. Test the cart and checkout, not just the product page

Add the product to cart, then check the cart drawer and the checkout page — the property has to display in both places or your fulfillment team won't see it either. Then place a real test order and pull it up in Shopify admin under Orders.

If the name doesn't appear on the order detail page, the field isn't wired to properties[Name] correctly. This is the single most skipped step in DIY builds — everyone tests the product page and nobody tests the actual order.

5. Set up a fulfillment-ready output

A name field that only lives in Shopify admin still means someone on your team retypes every name into an engraving machine or embroidery file. For low volume, that's tolerable. Past 20-30 personalized orders a week, manual re-entry becomes the bottleneck, not the field itself.

This is where an app like Bespo changes the math: it doesn't just capture the name, it outputs a production-ready file per order, so the field you added on day one still saves labor in month six.

6. Publish, then check the first 10 real orders

Push the theme change live, or publish the product block if you went the app route, and watch the first real batch of orders closely. Check for blank name fields, special characters that break engraving fonts, and names that hit the character cap.

The first week after launch is when you catch edge cases — accented letters, emoji in the name field, or shoppers typing full names when you only wanted initials.

Troubleshooting

  • The name doesn't show up on the order. The input's name attribute isn't formatted as properties[Name] — check for a typo or a missing bracket.
  • The field shows on desktop but not mobile. Your theme likely has a separate mobile product template, or the input is hidden by a CSS media query — inspect the mobile view directly.
  • Customers are pasting full sentences into a field meant for one name. Add a stricter character limit and a placeholder like "e.g. Sarah" so the expected input is obvious.
  • Special characters break the engraving or embroidery file. Restrict input with a pattern that blocks emoji and non-Latin characters if your fulfillment machine can't render them.
  • The field resets when a shopper changes a variant (size, color). This is a known Shopify quirk with line item properties on variant-swapping themes — apps built for personalization, including Bespo, handle this state correctly by default.
  • You need the name to appear live on the product image before purchase. A static input can't do this — you need a live-preview customizer, which is app territory, not a Liquid snippet.

Tools and resources

  • Shopify theme editor (Online Store > Themes > Edit code) for the manual method
  • Bespo for a no-code name/initial field with live preview and production file output
  • A test product isolated from your live catalog, so you're not debugging on a page real customers can buy from
  • Browser dev tools to inspect whether the property is actually posting on Add to Cart

What to do next

Once the basic name field works, the next upgrade is applying the same logic across product variants instead of one static field — see how to add a personalization text option to Shopify variants for that setup. If you want the field to sit inside a styled box rather than a bare input, adding a personalization box to Shopify product pages covers the layout side.

FAQ

How do I add a name field to a Shopify product page without an app? Add a text input with name="properties[Name]" inside your product form in product-form.liquid — Shopify automatically carries any properties[] field into the cart and order. This works for a single static field but won't give you live preview or fulfillment-ready output.

Does the personalization field show up on the packing slip? Yes, if it's correctly named as a line item property, it appears on the order detail page and default packing slip in Shopify admin. If it's missing, the input attribute name is wrong.

What character limit should I set for a name or initial field? Most engraving and embroidery vendors cap between 15 and 20 characters — check your fulfillment method's limit before setting the field, since going over it can cut off names on the physical product.

Is a Shopify app better than coding the field myself? For a single test product, coding it yourself is fine. Past a handful of personalized SKUs or any need for live preview, an app like Bespo is faster to maintain and removes the manual file-prep step for your fulfillment team.

Can the name field work across different product variants? Yes, but it takes more Liquid logic to keep the field visible when a shopper switches size or color — apps built for personalization handle this natively without extra code.

Why did the name disappear when the customer changed the product variant? This is a common Shopify theme bug where variant-switching JavaScript re-renders the form and wipes unsaved line item properties — it's one of the top reasons merchants move to an app instead of maintaining custom code.

Do I need a developer to add this field in 2026? No — a text-only field is copy-paste Liquid, and a live-preview field through an app like Bespo takes under 5 minutes with no code at all.

Can customers see their name on the product before buying? Only with a live-preview customizer, not a plain text input. Static fields capture the data but don't render it visually until the order reaches fulfillment.

One last thing

The field itself is the easy 20% — the file that goes to your engraver or embroiderer is the part that actually costs time, and it's the part most DIY guides skip entirely. If you're still hand-typing names into a machine from a spreadsheet export in 2026, the name field on the product page was never really the bottleneck.

Related guides