With Zapiet - Product Options, you can create as many options as needed, combine them in option sets, and assign to products.

Create a product option

On the Options page, click Create option.

You can create the following option types:

Checkboxes
Dropdown list
File upload
Large text field
Number field
Radio buttons
Swatches
Text field
Toggles

Checkboxes

Checkboxes appear on the product page, and multiple product options can be selected at the same time.

Add an Option name.
In the Option type field, click Checkboxes.
Start adding option values. Click Add option value to add more checkboxes.
You can change the order of the options.
If needed, add a charge to every option. Learn more in our Charging more for certain options guide.
If needed, you can add Tooltip text and Help text.
Choose whether you would like the first option to be selected by default.
Allow multiple selections setting is enabled by default. If you want to allow only one option to be selected, use the Radio buttons option type or set the Maximum number of selections to 1.
Limit how many checkboxes can be selected on the product page. Add a minimum and maximum number of selections. If this is left blank, the customer will be able to choose as many as they like.
Select if this is a Required option for your customers to complete before adding the product to the cart.
Click Create.

Repeat the process if you want to add different options as a list of checkboxes. Once your options are set up, the next step is to create an option set.

Dropdown list

A dropdown list appears on the product page, and only one option can be selected at a time.

Add an Option name.
In the Option type field, click Dropdown list.
Start adding option values. Click Add option value to add more options in the dropdown list.
If needed, add a charge. Learn more in our Charging more for certain options guide.
You can change the order of the options.
If needed, you can add Tooltip text and Help text.
Add a Placeholder.
Choose whether you would like the first option to be selected by default.
Tick Quantity selector to allow customers to add a numerical value for the chosen option, and add a maximum value they can enter.
Select if this is a Required option for your customers to complete before adding the product to the cart.
Click Create.

Repeat the process if you want to add different options as a dropdown list. Once your options are set up, the next step is to create an option set.

File upload

A file upload field appears on the product page, allowing customers to upload their files.

Add an Option name.
In the Option type field, click File upload.
Select accepted file extensions.
If needed, you can add Tooltip text and Help text.
Select if this is a Required option for your customers to complete before adding the product to the cart.
If needed, add a charge to every option. Learn more in our Charging more for certain options guide.
Click Create.

The uploaded files will be available for download on the Shopify > Orders page.

Repeat the process if you want to add additional file upload fields. Once your options are set up, the next step is to create an option set.

Large text field

A large text box appears on the product page, where customers can add a description or instructions. You can limit the number of characters entered and add a charge.

Add an Option name.
In the Option type field, click Large text field.
If needed, you can add Tooltip text and Help text.
Add a Placeholder.
If needed, add a Default value and a Character limit.
- If you add both a default value and a placeholder, the placeholder will not be visible to your customers because the default value will be shown instead.
Select if this is a Required option for your customers to complete before adding the product to the cart.
If needed, you can Create a charge for every option. Learn more in our Charging more for certain options guide.
Click Create.

Repeat the process if you want to add different options as large text fields. Once your options are set up, the next step is to create an option set.

Number field

A number field appears on the product page for your customers to enter a numerical value.

Add an Option name.
In the Option type field, click Number field.
If needed, you can add Tooltip text and Help text.
Add a Placeholder.
Add a Default value, Minimum and Maximum values.
- The default value will be automatically selected for every customer. Customers will be able to adjust the number according to their needs.
Select if this is a Required option for your customers to complete before adding the product to the cart.
If needed, you can add a charge. Learn more in our Charging more for certain options guide.
Click Create.

Repeat the process if you want to add different options as number fields. Once your options are set up, the next step is to create an option set.

Radio buttons

A list of radio buttons appears on the product page, where only one option can be selected at a time.

Add an Option name.
In the Option type field, click Radio buttons.
Start adding option values. Click Add option value to add more options that will appear in the list.
You can also change the order of the options.
If needed, you can add a charge to every option. Learn more in our Charging more for certain options guide.
If needed, you can add Tooltip text and Help text.
You can choose whether you would like the first option to be selected by default.
Tick Quantity selector to allow customers to add a numerical value for the chosen option, and add a maximum value they can enter.
Select if this is a Required option for your customers to complete before adding the product to the cart.
Click Create.

Repeat the process if you want to add different options as radio buttons. Once your options are set up, the next step is to create an option set.

Swatches

A selection of swatches with images or colors appears on the product page for your customers to choose one or more options.

Add an Option name.
In the Option type field, click Swatches.
Start adding option values. Click Add option value, to add more options that will appear in a list.
Click Image sign to select swatch color or add an image.
To add a color, add the hex code or select the color manually, then click Save.
Click Select an image, then click Add image to upload an image. Click Save.
You can also change the order of the options.
If needed, you can add a charge to every option. Learn more in our Charging more for certain options guide.
If needed, you can add Tooltip text and Help text.
By default, we will show satwches as color tiles. Select whether you would like to Show swatches as a dropdown list.
For a dropdown list, you can select the Placeholder text.
Select whether you would like the first option to be selected by default.
Tick Quantity selector to allow customers to add a numerical value for the chosen option, and add a maximum value they can enter.
Tick Change product image on selection if you have uploaded images and want to change the image based on the selected option.
- This option would require completing additional steps in order to work correctly.
- You will need to add the class .zapiet-product-image-container imgto every product image container on your theme. To learn more take a look at our Showing dynamic images on product pages article.
Allow your customers to select multiple options. If needed, add Minimum and Maximum selections allowed for this option.
- If you tick Allow multiple options, Quantity selector and Change product image on selection settings will be disabled.
Select if this is a Required option for your customers to complete before adding the product to the cart.

Repeat the process if you want to add different options as swatches. Once your options are set up, the next step is to create an option set.

Text field

Text option will add a text box to your products page for your customers to add short messages.

Add an Option name.
In the Option type field, click Text field.
If needed, you can add Tooltip text and Help text.
Add a Placeholder.
If needed, add a Default value and a Character limit.
- If you add both a default value and a placeholder, the placeholder will not be visible to your customers because the default value will be shown instead.
Select if this is a Required option for your customers to complete before adding the product to the cart.
If needed, you can add a charge. Learn more in our Charging more for certain options guide.
Click Create.

Repeat the process if you want to add different options as text fields. Once your options are set up, the next step is to create an option set.

Toggles

Toggles appear on the product page, and multiple product options can be selected at the same time.

Add an Option name.
In the Option type field, click Toggles.
Start adding option values. Click Add option value to add more toggles.
You can change the order of the options.
If needed, add a charge to every option. Learn more in our Charging more for certain options guide.
If needed, you can add Tooltip text and Help text.
Choose whether you would like the first option to be selected by default.
Allow multiple selections setting is enabled by default. If you want to allow only one option to be selected, use the Radio buttons option type or set the Maximum number of selections to 1.
Limit how many toggles can be selected on the product page. Add a minimum and maximum number of selections. If this is left blank, the customer will be able to choose as many as they like.
Select if this is a Required option for your customers to complete before adding the product to the cart.
Click Create.

Repeat the process if you want to add different options as a list of toggles. Once your options are set up, the next step is to create an option set.

Troubleshooting

If the toggles option is not working as expected on your store, please follow the steps below.

If you’re not using custom CSS, reset the CSS settings in Zapiet - Product Options > Settings > Custom styles.

If you’re using custom CSS, add the following code to the existing CSS in Zapiet - Product Options > Settings > Custom styles, then Save the changes.

/* Toggle Switch Container */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 5px !important;
}
 
/* Hide default checkbox */
.toggle-switch .toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
 
/* The slider */
.toggle-slider {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 20px;
    background-color: #e0e0e0;
    transition: .4s;
    border-radius: 20px;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;
}
 
/* Slider knob  */
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
 
/* Add X only when unchecked */
input[type="checkbox"]:not(:checked) + .toggle-slider:before {
    content: "x";
    color: #e0e0e0;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
}
 
/* Checked state - Fixed selector */
input[type="checkbox"]:checked + .toggle-slider {
    background-color: var(--zapiet-primary-button-color, #121212);
}
 
input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(12px);
}
 
/* Focus state */
input[type="checkbox"]:focus + .toggle-slider {
    box-shadow: 0 0 1px var(--zapiet-primary-button-color, #121212);
}
 
/* Toggle label */
.toggle-label {
    font-size: 1.2rem;
    color: var(--zapiet-text-color, #333);
    vertical-align: middle;
    display: inline-block;
}
 
/* Fieldset styles */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}