> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Text Area

1. [OPTIS Product Options, Variant](/product-options)
2. [20 Option Types](/product-options/20-option-types)
3. [Text Input](/product-options/20-option-types/text-input)

# Text Area

A **Text area** is a multi-line box for longer text. Unlike a [Text box](/product-options/20-option-types/text-input/text-box), customers can press **Enter** to start a new line or paragraph, and the box grows as they type.

![](https://storage.crisp.chat/users/helpdesk/website/-/6/1/c/7/61c76c7a2b83d000/2d15bf28-850e-409e-aa62-8e88d1_1kaha7b.png)

## When to use a Text area

* **Custom orders** - engraving text, name personalization, special requests.
* **Gift messages** - a note to include with the order, or delivery instructions.
* **Forms** - a short bio, cover letter, or a longer answer on an application.

## How to add a Text area option
### Step 1: Add the option

Open **1. Add options**, click **Add option**, tick **Text area** under **Text input** on the **New options** tab, then click **Add options**.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/e/b/0/4eb0bdaed3428c00/af7b2cc4-890f-4b32-8921-584a66_pyxdnv.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/4/3/f/c/43fcc02a85c36800/3a179f85-58f5-4d2d-8566-face64_tc2jv6.png)

### Step 2: Name it

Enter the **Label on product** (e.g., "Note"). Use **Label on cart** if the cart and order should show a different name. Tick any options below based on your needs:

* **Required field** if customers must fill it in
* **Hide option label** to hide the label.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/c/1/9/2c19211a38bcec00/00196bde-8e6f-4ea9-bedb-aa9aca_xqf46v.png)

### Step 3: Save and test

Click **Save**, then open the product page on your store to check that the Text area works correctly.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/7/8/8078382c1f405800/8fb1ea68-a1a6-4830-8a20-9ca34b_1t1v79w.png)

## Option settings

Set only what you need - all of the settings below are optional.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/5/1/9/4519f2984f541000/b70dcca5-77a2-4a1c-9ffd-7c0198_147pco1.png)

* **SKU** - a SKU for this field. Advanced plan and above. See [How does Product Option SKU works?](/product-options/customize-design/how-does-product-option-sku-works).

### Default value and placeholder

* **Placeholder text** - a faded hint shown inside the field (e.g., "Type your message here"). It disappears once the customer starts typing. Available on every plan.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/0/f/f00ff939852f7000/5b00acc3-17ce-4027-8ea9-f175bf_367sp.png)

How the placeholder looks on your storefront:

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FpLidxiLtIvMONFGiPZ8R%252Fimage.png%3Falt%3Dmedia%26token%3D378af729-5e52-4046-8a5d-09448c287b0f&width=768&dpr=3&quality=100&sign=b355ea6a1d61593da91a84baf81df849&sv=3)

* **Default value** - text that is already filled in when the customer opens the product page. Available on the **Advanced** plan and above.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FCECTDOawPxq0sC0C4LP6%252Fimage.png%3Falt%3Dmedia%26token%3Df24b9780-7b12-4609-864a-942706bac90c&width=768&dpr=3&quality=100&sign=cd98ccf2a49303689c69a979522b7b80&sv=3)

Example: pre-fill the "Message" field with "Happy Birthday!" so it appears automatically when customers open the product page.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FwNPTLCYTg5UPkDw1JonV%252Fimage.png%3Falt%3Dmedia%26token%3D30536909-160d-423c-b720-dc7ab49d7fa1&width=768&dpr=3&quality=100&sign=2a7aa874b963bdd76a38ac5cd1b2197b&sv=3)

### Help text

Add a short note explaining what to enter. Choose how it's shown: **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FuZoETiaRK2wqRlA2I367%252Fimage.png%3Falt%3Dmedia%26token%3D5e6c5bf1-a9cd-4ef1-8835-e42b4ce3eb74&width=768&dpr=3&quality=100&sign=bb530103f627fa50536df48b213aa4aa&sv=3)

Example of Help text shown as a Tooltip on the storefront:

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FZNuNZNWqN3XGOiVPf4pj%252Fimage.png%3Falt%3Dmedia%26token%3D68bb3776-232a-46e2-a3e1-c7ae2ee6b1f5&width=768&dpr=3&quality=100&sign=d0c5c842e859f18d4bfd1a7a554d56e2&sv=3)

### Limit the number of characters

Set **Min character** and **Max character** to control how much customers can type. Available on the **Advanced** plan and above.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F6WxIlHM6nf5qO97AtNwF%252Fimage.png%3Falt%3Dmedia%26token%3D7f8932ef-3bf1-4ebb-919a-eb1a42625b41&width=768&dpr=3&quality=100&sign=c9c43e10cde7b3d01075162d4f78aaee&sv=3)

* **Min character** - if the customer's text is shorter than this, OPTIS shows a message under the field, e.g. **Min character: 5**.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F1iiAqHZBtAIoMFnzythe%252Fimage.png%3Falt%3Dmedia%26token%3D5d848198-b2fe-4311-9a86-ee1a68b485e8&width=768&dpr=3&quality=100&sign=f6061f9e398a99788164b3c04551e64d&sv=3)

* **Max character** - once the customer reaches this limit, OPTIS stops accepting more input and shows a message under the field, e.g. **Max character: 50**.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F5ooq1g12bGfAUlwGj3WA%252Fimage.png%3Falt%3Dmedia%26token%3Dfd51452e-6960-4821-9396-b05a908788a9&width=768&dpr=3&quality=100&sign=e4de0e57c44b781179c7ef79acd253a4&sv=3)

* **Character counter (optional)** - turn on **Character count for text box** in **Settings > General Settings > Option type setting > Text input** to also show a running count (e.g. **12/50 characters**) under the field. See [Limit Characters for Text Input](/product-options/faq/limit-characters-for-text-input).

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FEYXPjoDQOAJSxeqOLYh7%252Fimage.png%3Falt%3Dmedia%26token%3D53f083de-b2ea-401d-aa98-427e5e6f1a9f&width=768&dpr=3&quality=100&sign=e2f1b93061da66615fdcdf1c9468ffc9&sv=3)

### Charge an extra fee (price add-on)

Charge more when a customer fills in this field. Available on the **Advanced** plan and above; **Upsell product** needs **Platinum**.

* **Extra fee** - adds a fixed amount to the price. See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option).

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F2U5NCDXlGArLtlA8vZAb%252Fimage.png%3Falt%3Dmedia%26token%3D922c51b2-1e84-4996-b8f4-1c70cd9e4487&width=768&dpr=3&quality=100&sign=8aee1fe725289fe0fc78115623d33602&sv=3)

How the price add-on looks on the storefront:

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FUTZUo09JvpwDDk54eQmv%252Fimage.png%3Falt%3Dmedia%26token%3D83d93037-719e-410f-b476-af571d771956&width=768&dpr=3&quality=100&sign=b64c277ebc7380d7f83c6025a53a1feb&sv=3)

* **Upsell product** - links the fee to a Shopify variant's price and stock. See [How to Use "Upsell product"?](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value).

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FtFo6BcUjQoo15TXhNl3I%252FScreenshot%2520-%25202026-01-12T135810.931.png%3Falt%3Dmedia%26token%3D6759fec8-33d8-4bbe-bfe8-3477da229a96&width=768&dpr=3&quality=100&sign=3b9de31f6484a352326a0351c44832b6&sv=3)

### Show or hide with Visibility (conditional logic)

* Show or hide the Text area based on another option - for example, only show a "Message" field when the customer answers "Yes" to "Would you like to leave a message?".
* Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FKRCOu5WWJxlbvwBqLM1o%252Fimage.png%3Falt%3Dmedia%26token%3Dd61af973-990b-45dc-b17e-f2b3078626db&width=768&dpr=3&quality=100&sign=950ae39fd55bcecd4221fed884620331&sv=3)

### Option width

In the **Display** tab, set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the Text area takes.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FHtNQX1F4OiBaMZYF4JJ4%252Fimage.png%3Falt%3Dmedia%26token%3D47d2c9c9-9649-4ce0-b274-4c1dbee9279a&width=768&dpr=3&quality=100&sign=44901d7e4f1cfec30f338ce5f269a58b&sv=3)

## Related guides

* [Text box](/product-options/20-option-types/text-input/text-box)
* [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option)
* [How to Use "Upsell product"?](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value)
* [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)