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_cmcustom_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.