Number Input

Written By Floris de Vries

Last updated 3 days ago

The Number Input field allows customers to enter a numeric value. This field is commonly used for measurements, quantities, or custom amounts and can directly affect the final price of the product. The entered value can be used immediately in calculations or referenced in later steps of the calculator.


Label

The Label defines the text displayed above the input field on the product page.
Use a clear and descriptive label so customers know which number they need to enter.

Example:
Width (cm)


Placeholder

The Placeholder is a hint or example shown inside the input field before the customer enters a value.
This helps clarify the expected format or unit.

Example:
e.g. 120


Key (unique ID)

The Key is a unique technical identifier for this field.
It is used by the calculator engine and can be referenced in pricing formulas or conditional logic.

Important rules:

  • Only lowercase letters are allowed

  • Numbers and underscores are supported

  • No spaces or special characters

Examples:
width_cm
custom_quantity


Required field

When Required field is enabled, the customer must enter a value before the product can be added to the cart.
Use this option when the number is essential for calculating the price or fulfilling the order.


Is quantity input

When Is quantity input is enabled, the entered number will be treated as the product quantity instead of a custom value.
This means the value will be linked to the Shopify product quantity and can influence inventory and cart behavior.

Use this option only if the number input should replace the standard quantity selector.


Numeric value (float)

The Numeric value (float) defines the base numeric value used in calculations.
This value is typically used as a multiplier or starting point when calculating prices based on the customerโ€™s input.

Example use cases:

  • Price per unit

  • Price per square meter

  • Price per item


Minimum

The Minimum value defines the lowest number the customer is allowed to enter.
If the entered value is lower than the minimum, the input will be considered invalid.

Example:
10 (minimum width of 10 cm)


Maximum

The Maximum value defines the highest number the customer is allowed to enter.
If the entered value exceeds this limit, the input will be considered invalid.

Example:
300 (maximum width of 300 cm)


๐Ÿ’ก Tip:
Always set a minimum and maximum when using Number Inputs for pricing calculations. This prevents invalid values and ensures accurate price calculations.