Shopify theme with custom fields in the add to cart form

A Shopify theme with custom fields in the add to cart form lets shoppers type text right on the product page: a name to engrave, a gift card message, an initial to embroider. What they enter follows the item into the cart and then the order, and you’ll find it in your Shopify admin. In FullStack, this is the native Custom field block, no personalization app required.

Why add a custom field to the product page

Personalization turns a standard product into a one-of-a-kind item, and it’s often what makes the sale, especially for gifts. But if customers have to email you after ordering to say which name to engrave, you lose time, you risk mistakes, and some shoppers don’t buy at all because they can’t see how to do it.

A field inside the form settles everything at the moment of purchase: the shopper picks the model, types the text, adds to cart. The information is attached to the order line, with no back-and-forth emails and nothing forgotten.

How the custom field works in FullStack

The Custom field block goes inside the Product form block of the Product section, before the add to cart button. Its settings:

• Label (label): the heading shown above the field, such as “Engraving”. It also serves as the name of the information passed to the order. Without a label, the field doesn’t render.
• Placeholder (placeholder): the hint shown inside the empty field, such as “Enter your first name”.
• Required field (required): shoppers can’t add to cart without filling it in.
• Minimum and maximum length (min_length, max_length), 1 and 30 characters by default.
• Full width (full_width), on by default, plus top and bottom margins.

The text entered is saved as a line item property: it shows up in the cart, the order and confirmation emails, under the label you chose.

What the custom field works with in FullStack

The product form holds several blocks, in the order you choose:

• Variant picker: place the field after it, since shoppers choose their model before deciding what to engrave.
• Size guide in a popup, opened from the variant picker, as on the demo.
• Checkbox cross-sells: “Is this a gift?” with wrapping or a card, right below the field.
• Several custom fields in a row: one for the engraving, one for the card message.

Examples by store type

Jewelry: engraving

Label “Engraving”, placeholder “Enter your first name”, maximum length matched to the engravable area. That’s the setup of the demo store above.

Gifts and stationery: the message

Label “Gift card message”, optional field, a higher maximum length to leave room for a sentence.

Textiles and leather goods: initials

Label “Your initials”, required only on personalized products, maximum length of 3 characters.

Best practices

• Write the label for the shopper (“Your engraving”, “Gift card message”): it appears as is in the cart, the order and emails.
• Set the maximum length to match reality: an engraving always has a physical limit.
• Avoid renaming a label once you’re taking orders: the name of the information passed to the order changes too, which can disrupt tools that read it.
• If the field is required, keep it visible on both desktop and mobile.

Limitations to know

The custom field is a single-line text input: it doesn’t handle file uploads or a visual preview of the personalization on the product, and it doesn’t change the price. For those needs, you’ll still need a personalization app. Also avoid combining a required field with a desktop-only or mobile-only display setting: that combination can cause add to cart issues (this display setting is set to be removed from the block in version 2.6.0). To offer gift wrapping as a checkbox add-on, see one-click cross-sells. License details are on the pricing page.

FAQ

Where do I find what the customer typed?

In the order details in your Shopify admin, under the field’s label. It also appears in the cart and in emails.

Can I make the field required?

Yes, with the required setting. Shoppers then have to fill it in to add the product to their cart.

Can I limit the number of characters?

Yes, with a minimum and a maximum length, 30 characters by default.