Custom Checkout Fields
Add, validate, and manage custom input fields on your checkout, from simple text inputs to multilingual and sensitive fields.
Custom checkout fields overview
What custom checkout fields let you collect beyond standard billing and shipping info, and the two ways to add them — a built-in toggle or your own custom HTML.
Add a date picker field to the checkout
How to add a date picker field to the checkout to collect a date such as a preferred delivery date.
Add a dropdown with an "other" text option
How to add a custom checkout dropdown that reveals a text box when the customer selects "Other" — includes the Twig/JavaScript snippet and how to edit its option list.
Add a gift wrapping checkbox to the checkout
How to add a gift wrapping (or similar add-on) checkbox to checkout using custom Twig and JavaScript that adds or removes the item as customers toggle it.
Add custom fields to your checkout
How to add custom text, dropdown, radio, or checkbox fields to your checkout by enabling the custom checkout fields option and pasting in your own HTML.
Hide sensitive custom field data from receipts and emails
How to keep sensitive custom checkout field data — like a Social Security or ID number — out of receipts and emails while still keeping it visible on the order in the admin.
Keep custom field values when the checkout re-renders
How to preserve a custom checkout field's entered value using Twig, so it isn't lost when the checkout re-renders as the customer moves through steps.
Pass custom field data to custom shipping code
How to pass a custom checkout field's value into your custom shipping code using a data attribute.
Populate custom checkout field options from an endpoint
How to have a select, radio, or checkbox field on checkout pull its available options dynamically from your own endpoint — useful when choices need to stay in sync with an outside system.
Pre-populate custom checkout fields
How to have a custom checkout field come pre-filled for the customer using a hidden session value passed in with the add-to-cart link — handy for known info like a referral source or account ID.
Set up multilingual custom checkout fields
How to translate custom checkout field labels and descriptions for stores using multiple template set languages.