The number input lets you add a field where your customers can add numbers of their choice. When you add the number option, customers can only add numbers in this field, and text won’t show up even if it’s added by mistake.
Follow the step-by-step guide below to add a number option to the option set:
You can add the number option to either a completely new option set or an existing one. You can learn to create a new option set in another part. For now, we will discuss how to add the number option to an existing option set
Go to an existing option set.
Click the Edit option to open it.
Click the “Add options” button.
Select the “Number” option under Inputs.
After adding the Number option, configure the available settings according to how you want customers to enter and purchase a numeric value.
Option Title: Enter the name or label of the number input option that customers will see.
Help Text: Add additional instructions or guidance to help customers understand what value they should enter in the number field.
Required Field: Enable this option if customers must enter a number before they can add the product to their cart. When enabled, customers cannot proceed without completing this field.
Placeholder Text: Enter the temporary text that appears inside the number input field before the customer enters a value. The placeholder disappears automatically when the customer enters a number.
Option Description: Add additional information or details about the number option. This can be used to explain the purpose of the field or provide extra instructions to customers.
Minimum Value: Set the smallest number that customers are allowed to enter. If the customer enters a value below the specified minimum, they will not be able to add the product to the cart. Keep the filed blank for no limit.
Maximum Value: Set the largest number that customers are allowed to enter. If the customer enters a value above the specified maximum, they will not be able to add the product to the cart. Keep the filed blank for no limit.
Additional Price: Set an additional fixed price that will be added when the customer enters a value in this field.
Price per Unit: Set a price that will be charged for each unit of the number entered by the customer. For example, if the price per unit is $2 and the customer enters 5, an additional $10 will be charged.
After configuring the main settings, scroll down and expand Additional Settings. These settings allow you to customize the Number field's appearance to match your storefront design better.
Title Color : Controls the color of the option title displayed to customers.You can change this color to match your store's design or branding.
Placeholder Color: Controls the color of the placeholder text displayed inside the text input field before the customer enters any text.
Description Color: Controls the color of the option description displayed below or around the option.
Border Color: Controls the color of the border around the text input field. You can change the border color to match your store's theme.
Border Radius: Controls how rounded the corners of the text input field are. A higher value creates more rounded corners, while a lower value creates sharper corners.
Border Thickness: Controls the thickness of the border around the text input field. A higher value makes the border thicker and more visible.
Help Text Style: The Help text style setting lets you choose how the help text for an option is displayed on your storefront. From the Help text style dropdown, you can choose:
Above option element – Displays the help text above the option.
Below option element – Displays the help text below the option.
No help text – Hides the help text from the storefront.
Show Price on Option Values: Enable this option to display the option price next to the option title on the storefront. When disabled, the option price will not be shown alongside the option title.
You can find the “Product” option at the bottom of every option set, from where you can apply the option set to any one of the three product categories.
To Assign an Option Set
Open the Option Set.
Scroll down to Product .
Select one of the available assignment methods.
All Products: Select All Products to apply the Option Set to all products in your store.
Manually Select Products: Select Manually Select Products when you want to choose specific products to which the Option Set should be applied.
Select Products by Conditions: Select Products by Conditions when you want to apply the Option Set based on specific product conditions automatically.
You can use the available conditions to determine which products should receive the Option Set.
|
Important: Each Optionia option includes advanced styling with custom CSS. The text option is no different; you can find the advanced styling option at the bottom.
|
|
Note: When you create or edit the Option Set, it’s saved as a draft and is only visible in your dashboard. Change the status from draft to active to ensure visibility. You can see the status option right next to the Option Set title.
|
Once the Number option is configured, the Option Set is active, and the Option Set has been assigned to the appropriate products, customers can enter a numeric value directly on your product pages.
Need Help?
Getting Started
Option Sets
Orders
Settings
Configuration
Live Preview
Packages
Help & Support
Price Add-Ons
Conditional Logic
Design Theme Styling
Uninstallation
