Attribute Input

A text field that collects customer-provided text (e.g. customization) and sends it to checkout as a line attribute.

Last updated

Attribute Input icon

How to use

  1. Place the field on the product page and connect ⛁ Butter Data to the product's Butter Data CMS field.

  2. Set the Attribute Key — the field name that will appear on the Shopify order, and Placeholder text as a helpful hint for the customer.

  3. Toggle Text Area on for a multi-line field (gift notes, instructions) and size it; leave it off for a single-line field like a name.

  4. Optionally turn on Required and set the Message beneath it (shown when the field is left empty), or turn on Validate Email and set the Message beneath it (shown for an invalid email address) — then style the error state with the dedicated error font, color, and border controls.

What the field writes to the order

Whatever the customer types is written to the cart line as a Shopify line attribute — it's what makes engraving text, gift messages, or custom instructions show up on the order. The Attribute Key is the field name that appears on that order, so keep it stable and meaningful once it's live.

Required and email validation happen on Add to Cart, not on keystroke

Validation isn't live as the customer types — it fires when they click the Purchase Button, which checks every connected Attribute Input on the page and blocks the add if a required field is empty or an email fails the check, surfacing the matching error Message right here on the field.

Questions? Join our Slack community