Cart Attribute Input
A free-text field that writes a cart-level attribute — commonly an order note — saved to the cart and carried through checkout to the order.
Last updated
How to use
Place this component in the cart.
Set the
Attribute Key— the name of the cart attribute this note is saved under, shown to you on the Shopify order — andPlaceholdercopy for helpful hint text.Style the text (font, transform, color, placeholder color), the
Text Areasizing,Padding, andRadius.Style each field state under
Styles, and configureValidation.
Styling each field state
Styles covers Default, Hover, Focus, and Error — background and border for each, plus shadow and transition on Focus — following the same input-focus conventions used across Butter's form fields. There's no disabled state to style, since the field is never disabled.
Validating the note before checkout
Turn on Required and Validate under Validation to enforce the note, then set the Empty and Invalid messages shown when it fails. When validation fails, the field switches to its Error style (background and border) and the matching message renders below it, styled with its own Gap, Font, and Color.
Cart-wide attributes vs. per-item text
Cart Attribute Input writes under the Attribute Key you set, shown to you in the Shopify order's Additional details at fulfillment — making it the supported path for a note that applies to the whole order. Notes are capped at 40 characters, with letters, numbers, and basic punctuation allowed. For text tied to one specific item, like an engraving, use the product's Attribute Input at add-to-cart time instead.
Each field writes to its own key by default, so a Cart Attribute Input and a Cart Attribute Toggle on the same drawer stay independent — turning the toggle off no longer clears whatever the customer typed here. Give them the same Attribute Key only if you want them to share one value as alternate UIs for the same attribute.