Custom Checkout Fields
Adding your own inputs, radios, select fields, and date pickers to the checkout — for things like terms of service, gift notes, or referral codes.
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 calendar-style date field to checkout for things like preferred delivery dates, event dates, or scheduled service appointments.
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 read a custom checkout field's value inside your custom shipping code — useful for adjusting rates based on things like delivery preferences or a selected pickup location.
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.