Product options are a Store widget feature that enables you to add variants of the same product (e.g., size, color, etc.) to a single listing. The benefits of doing this include a more user-friendly product page without clutter caused by duplicate items. This setting will also allow you to offer extras, customization, and additional product configurations to the product you’re selling.
Visit our Store Widget article to learn more about the Store widget and about how to add it to your project. To learn more about the Store widget pricing tiers, see Store Widget Plans Overview.
Product options overview
To access product options settings, go through the following steps:
- Go to your project.
- Click on the store’s container in the editor.
- Click Store Manager.
- From the dashboard that opens, navigate to the Catalog on the left-hand panel.
- Click on the item for which you want to edit the options.
- On the product page and click on Options.
You’ll get to a page where you can manage options for any product in your store. Two tabs with distinct functions are available in the window on this page: Options (which opens by default) and Variations.
You can add as many product options as you like.
Option types
The Store widget allows for eight distinct option types, with some having more specific use cases than others. Let’s look at them in detail:
- Dropdown lists allow the user to select one option in a list opened by a click.
- Radio buttons let the user choose an option among several choices listed on the page.
- Size is for selecting an option via buttons on the product page.
- Checkboxes allow the user to pick several options listed on the product page.
- Text field and text area give users the ability to add a note to their order. It’s commonly used for customizing products. Text area is larger than the text field.
- Date picker opens a pop-up calendar that lets the user select a particular date to receive a product or service.
- Upload file allows the user to add a file from their device to their order.
Creating options
From the product options settings, click on +Add New Option. Once you do, a new tab will appear on the left-hand side, and you can start customizing the option.
The option name you choose will be reflected on the product page and the relevant tab in the window you’re working in.
Option types such as the dropdown list, radio buttons, size, and checkboxes will also require you to enter the names of each option you’re providing. By default, each of these option types has four values to work with. To add a new value within an option type, click on +Add New Value. To remove an option, click on the trash bin icon next to that value.
Text field, text area, date picker, and upload file options have no additional values.
Preselected default values
When creating an option for any given product, you can either force the user to make a selection or choose a value to be pre-selected automatically when the product page loads. The first value of any option in dropdown lists, radio buttons, and size option types will be the selected value by default. You may choose another value to be preselected in the relevant option’s tab.
To remove the preselected value and force the user to choose one, check the box next to Do not preselect default value. This option will also make selections mandatory in such option types as text field, text area, date picker, and upload file. With this setting active, the customer won’t be able to add the product to the cart without making a choice. If they try to add a product to the cart regardless, they will see an error message and highlighted product options they need to decide on.
The checkboxes option type cannot have preselected values.
Using price modifiers
Values added to such option types as dropdown, checkbox, and radio buttons can also have price modifiers. Adding these modifiers will mean that particular options will affect the product cost.
There are three settings to consider when adding price modifiers:
- Price adjustment (positive or negative)
- Value type (percentage or absolute amount)
- The modifier (the amount the price is adjusted by)
To add a price modifier, navigate to that tab in the window of the Options page and adjust values by selecting the appropriate option from the dropdown menus and entering the modifier.
When these settings are active, users will see the price modifiers next to the options on the product page.
And that’s how you add and manage product options with Boxmode’s Store widget. If you want to learn more about managing product attributes, product types, and product filters, please visit those Help Center articles. Or you can start using your knowledge already!
Go to Editor