# Number Field
### 1. How Does the Number Field Display?
The Number Field option displays numeric data - such as product dimensions, or custom options like "engraving characters”.
> 📝Note: Customers can only fill in numbers in the Number Field.
Example of how it appears on a product page:
### 2. How to Create a Number Field option
**Step 1: Add a New Option**
* Click Add Option > Number Field to create a new option
**Step 2: Add information to the Number Field**
* Enter the name for the Number Field (e.g., “Number of additional gift boxes", "Grade")
**Step 3: Set the target of Price add-on in Option values (optional)**
* Price Add-on feature will help you add extra fee for options customers choose.
How the Price add-on will look on the storefront:
* If you choose to Create fee, see details of this feature in [How to add price to options?](/product-options/getting-started/other-popular-features/manage-add-on-additional-fee-for-option.md).
* If you choose to Upsell product, follow [this guide](https://optis-options-helpdesk.crisp.help/en/article/how-to-use-assign-to-variant-link-stock-and-price-of-shopify-variant-to-option-value-1u73u86/) for more information.
Other features:
* Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md)
* SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
* Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)
**Step 4: Advanced Settings (If Needed)**
{% hint style="success" %}
**Conditional Logic**: Enable conditional logic if you want the Number Field to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logics?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/)
{% endhint %}
Example: A “Year” Number field appears only if the customer selects “Yes” for “Are you a student?”
{% hint style="success" %}
**Help text**: Add a short description to explain the purpose of the Number Field option, offering context or clarification when the customer enters the information. Help text can be displayed as Tooltip or Content (Below/Beside the option title, Below the option).
{% endhint %}
{% hint style="success" %}
**Default value**: Pre-fill text inside the Number Field that appears every time the customer goes to the site. It can save time for customers by providing common or expected input.
{% endhint %}
Example: You want the option “Number of additional gift boxes” will display automatically the number 2 in the field when customers go to the product page.
How it looks like in your storefront:
{% hint style="success" %}
**Placeholder text:** Display placeholder text inside the Number Field as a faded, lighter color. This text disappears when the customer starts typing and is often used to give customers a clear example of what should be filled in the field.
{% endhint %}
Here is an example of how it looks like in your storefront:
{% hint style="success" %}
**Limit value:** You can set Min/Max value that customers can input.
{% endhint %}
If your customers input less than the minimum value, it will show a notification message below. The same with maximum value.
**Step 4: Save and Test**
* Click Save to apply the settings.
* Visit the product page on your store to check if the Number Field works correctly.
### 3. Real-World Applications of Number Field
* Fashion & Accessories: Enter number of characters for engraving, jersey numbers, or custom sizing.
* Food & Catering: Specify number of guests, servings, or meal portions.
* Tech & Electronics: Show battery life, storage size, or power capacity as numeric data.
* Home & Furniture: Display weight, dimensions, or quantity per box.
### 4. Key Features of Number Field
* The Number Field option type prevents invalid input like letters or symbols. They're ideal for quantities, measurements, or custom inputs.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.optis.me/product-options/18-option-types/text-input/number-field.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
