> ## 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). # Number Field 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) # Number Field A **Number Field** only accepts numbers - letters and symbols aren't allowed - so it's ideal for quantities, dimensions or counts. ![](https://storage.crisp.chat/users/helpdesk/website/-/c/4/6/c/c46c8eb2b00d0000/8b3838c9-b8a7-484f-ae1f-3ba2a5_1ohco9j.png) ## When to use a Number Field * **Personalization** - a quantity of engraved characters, a jersey number, or a custom size. * **Catering and events** - number of guests, servings, or portions. * **Specifications** - battery life, storage size, weight, or dimensions. ## How to add a Number Field option ### Step 1: Add the option Open **1. Add options**, click **Add option**, tick **Number field** under **Text input** on the **New options** tab, then click **Add options**. ![](https://storage.crisp.chat/users/helpdesk/website/-/3/0/9/5/30958c36917c0200/3c02577d-15f2-4f26-af35-656959_psve73.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/2/a/f/a/2afa26d42c604400/542137f7-80fc-4914-af47-4cf635_7nleqc.png) ### Step 2: Name it Enter the **Label on product** (e.g., "Number of additional gift boxes", "Grade"). 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/-/f/9/3/0/f93022c50e4c4800/684eb99d-f831-40a0-89ca-9ff1a5_1xg1pb1.png) ### Step 3: Save and test Click **Save**, then open the product page on your store to check that the Number Field works correctly. ![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/1/d/ec1d66412896e000/e55c6bc6-d305-4943-a5ea-f624bb_1d0dl58.png) ## Option settings Set only what you need - all of the settings below are optional. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/a/4/b/9a4b32420fb87000/64c437df-45e2-4e68-83b0-bfa60b_1lgq5vx.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. It disappears once the customer starts typing. Available on every plan. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/9/8/9c986942af011800/44f2ca60-83fe-4e9f-b491-679d3f_1fff74j.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%252FcchfYQXcezu8nUWLlcrv%252Fimage.png%3Falt%3Dmedia%26token%3Dc4fad7b3-1f17-4930-a0f0-a2b257fae171&width=768&dpr=3&quality=100&sign=d691c07da8283df5f0673bce47af6a4f&sv=3) * **Default value** - a number that is already filled in when the customer opens the product page. Available on the **Advanced** plan and above. Example: pre-fill "Number of additional gift boxes" with "2" 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%252FP4oD0taEIg2BiU1mm1U5%252Fimage.png%3Falt%3Dmedia%26token%3D7f8bae05-5174-4020-8def-bb7636ef3485&width=768&dpr=3&quality=100&sign=35cce94793541bf2e13faaba41169147&sv=3) How it 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%252FCrlLTq4qPRz8M8QinZQM%252Fimage.png%3Falt%3Dmedia%26token%3D236c5f28-c3d9-446f-bf0a-c9d26906f11d&width=768&dpr=3&quality=100&sign=0ea21f725fd295c24d88f0294969d905&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%252FBLpbgq7IzlkqYz4oKD0n%252Fimage.png%3Falt%3Dmedia%26token%3D7a69e316-a7e8-439b-b0af-f65d16c8e262&width=768&dpr=3&quality=100&sign=fb9c5f1ab0e367b21ab2495a93927c9c&sv=3) ### Limit the value Set **Min value** and **Max value** to control the numbers customers can enter. 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%252FkVCXlIHQiUHVgKJFLeBb%252Fimage.png%3Falt%3Dmedia%26token%3D2fcc6576-814c-4d93-909b-59ef26253cfa&width=768&dpr=3&quality=100&sign=c76e66b5372954290841fbeac3982557&sv=3) * If a customer enters a number below the minimum or above the maximum, OPTIS shows a message below the field (e.g., **Min value: 10**). ![](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%252FUMQCiQo98VeJ65UeBGqv%252Fimage.png%3Falt%3Dmedia%26token%3D940e88d3-0828-412c-bbee-aaa365087c59&width=768&dpr=3&quality=100&sign=40530e1e2c8a1e38e5ab907770b3160e&sv=3) * You can change the wording in **Settings > Translation Texts > Default text customization > 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%252FR1PiPIpbIxPZLxv3J8LI%252Fimage.png%3Falt%3Dmedia%26token%3Df72b170b-688e-4c94-b72c-4464c923c931&width=768&dpr=3&quality=100&sign=2671a2f0755f34a234f6a343bbff0c03&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%252FXRE9uRyYrXWGBuB4W3Uw%252Fimage.png%3Falt%3Dmedia%26token%3D28e8cc97-c1c8-4ec9-9dfd-572da01b0df3&width=768&dpr=3&quality=100&sign=9248debdfae9ccda222475eac064d646&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%252FjqEXidjDsjurIzzYLq7h%252Fimage.png%3Falt%3Dmedia%26token%3Dca3f9f38-1515-490f-a283-5928ca592275&width=768&dpr=3&quality=100&sign=754ec814778571011303f4f1c685a595&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%252Fwm8ZKerppVW4MvfD2Fe6%252Fimage.png%3Falt%3Dmedia%26token%3Dbb87a5aa-1d1e-42a7-8fcd-fcfb9dcd9eed&width=768&dpr=3&quality=100&sign=abe4a7ffb7c8ec5524aa44cced12c1e3&sv=3) ### Show or hide with Visibility (conditional logic) Show or hide the Number Field based on another option - for example, only show a "Year" field when the customer answers "Yes" to "Are you a student?". 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%252FYMiROVmKKnk5FESaQC94%252Fimage.png%3Falt%3Dmedia%26token%3Db7a9f6c1-e3b5-4a92-9d57-58db3aff5256&width=768&dpr=3&quality=100&sign=66f4e3cc8fc8aaa91923634b41652d4c&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 Number Field 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%252F807HMv7Ip9q8gxznlXtX%252Fimage.png%3Falt%3Dmedia%26token%3D99b9da3f-05d9-4cd3-8d30-82c9218dc599&width=768&dpr=3&quality=100&sign=e8fc093c8cf85024e8761f6c733bb033&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)