Adding text input fields, calendar, or file uploader to product pages

Input fields allow you to ask customers to provide additional information like gift messages for presents, preferred dates, or files for products or services that you sell. This way, shoppers can personalize the product they’re about to buy and more. You can make providing input mandatory or voluntary for your customers.

After checkout, all the customer input will appear in the order details as well as in your store’s notifications and in invoices.

Input fields let you collect information for individual items right on the product page before adding to cart. To gather information for the whole order in the cart, use custom checkout fields.

Available input field types

The following input field types are available in your store:

  • Text Field and Text Area are input text fields where your customers can type any text for a product. It is often used to offer personalization, engraving, custom printing, or embroidery for products. Compared to text fields, text areas can contain multiple lines.
  • Date Picker is a popup calendar to select a date for a product or service.
  • File Uploader allows customers to attach files to the product or service they order.

Creating input fields

You can add an unlimited number of input fields to each product to help customers personalize their purchase.

To create an input field for a product:

  1. From your store admin, go to Catalog → Products.
  2. Open the product page you want to edit or create a new one.
  3. Go to the Options tab.
  4. Scroll down and click Add Input Field.
  5. Add the name of the input field (e.g., "Gift message").
  6. From the Input field type dropdown, select your option. For example, if you want your customer to add a long gift message with several paragraphs, click Text Area:

    Input_fields__3_.png

  7. (optional) Tick Required field if you want customers to be required to provide input. This way, a customer cannot add a product to the cart without filling out the field.
  8. Save the changes.

Repeat the above steps to add more input fields (like file upload) if needed.

Here is how a product with an input field looks in the storefront:

Input_fields__4_.png

And here is an example of how shoppers are reminded to provide input after clicking the Add to Bag button if you make the fields required:

Required_fields.gif

As you can see, a customer cannot add the item to the cart without providing input.

Editing input fields

After you add an input field to a product in your store, you can make edits to it if you need. For example, if later you want to change input field name or type, or you want to make it required.

To edit an input field:

  1. From your store admin, go to Catalog → Products.
  2. Open the product you want to edit.
  3. Go to the Options tab.
  4. Click the three dots icon next to an input field, then click Edit:

    Input_fields__5_.png

  5. Make edits to the field.
  6. Save the changes.

That’s it! Now customers will see the updated input field on the product page in your store.

Sorting input fields

You can change the order in which input fields and options appear on the product pages in your store. For example, if you want to rearrange different text fields on the page or you want input fields to appear before product options.

To sort input fields and options on the product page:

  1. From your store admin, go to Catalog → Products.
  2. Open the product you want to edit.
  3. Go to the Options tab.
  4. Click the three dots icon next to an input field, then click Change Order:

    Input_fields__1_.png

  5. Drag-and-drop input fields and options to rearrange them.
  6. Save the changes.

That’s it! Now input fields and product options will appear on the product page exactly in the order that you have set.

Accessing input field data

All the data your customers provide via input fields on product pages appear in the order details in your store admin. It is also available in the admin and customer email notifications, as well as in the order invoices and in customer accounts.

To access input field data in the order details:

  1. From your store admin, go to My Sales → Orders.
  2. Click on the order to open it.
  3. Find field data in the product block:

    Input_fields__2_.png

You can also download input field data for your orders as a CSV file. 

Bulk adding and updating input fields

You can always add or update input fields and product options in bulk using built-in import tool. See a dedicated case study on importing a product with options or input fields

Also, you can easily update your input fields and product options using the Bulk Product Editor app from App Market.

Bulk Product Editor helps you:

  • update all your products in bulk or filter those you’d like to change
  • update properties like price, weight, quantity, and more
  • add and remove options and input fields (they all go under “options” in this app)
  • add and remove option values
  • import input fields and options from CSV file (it's compatible with spreadsheets)
  • enable and disable products in bulk

If you have any questions about the Bulk Product Editor, please contact the developer of the app directly.

Deleting input fields

You can delete input fields that exist in your store at any time. For example, if you no longer need a date picker for a product as you’ve switched to displaying available pickup date and time at checkout.

To delete input fields from a product page:

  1. From your store admin, go to Catalog → Products.
  2. Open the product you want to edit.
  3. Go to the Options tab.
  4. Click the three dots icon next to an input field, then click Delete.
  5. Save the changes.

Related articles

Product options
Creating custom fields at checkout
Requesting additional information from customers

Was this article helpful?
0 out of 0 found this helpful