The bellow-given instructions apply to e-stores created with Online Store and Advanced Store plans. If you have a Business plan, take a look here 💡

If you sell products that have variants (like colors and sizes), you can list them as one base product with options. As a result, your client can select their preferred options on the product page.

With the help of product options, you also can:

  • Offer extras, like gift wrapping.

  • Ask buyers to upload a file for the ordered product or service.

  • Offer multiple selections to configure or personalize the final product, and more.

Table of contents

Option types

You can use different option types to help customers select a product they desire:

  • Drop-down List allows selecting one value from multiple choices. Drop-down lists are suggested for a compact view of many choices.

  • Radio Buttons also allow selecting one value from multiple choices, yet in a less compact view than drop-down lists.

  • Size allows selecting one value from multiple size choices.

  • Checkboxes allow selecting several options at once. For example, cheese, salami, olives, etc. for pizza toppings.

  • Text Field and Text Area are input text fields where your clients can type any text. It is often used to offer personalization, engraving, custom printing, or embroidery for products.

  • Date Picker is a pop-up calendar to select a date for a product or service.

  • Upload Files allows clients to attach files to the product or service they order.

Creating options

You can have an unlimited number of options for each product. To add options, follow these steps:

1. In your store manager, go to Catalog → Products.

2. Open the product you want to edit and go to the Options tab:

Add options in Ecwid store

3. Click Add New Option.

4. Add the name of the option, for example, “Size”.

5. Select the Input type. If you want to add sizes for a product, click Size:


6. Click Add New Value and add all values of the option. In the example with the sizes, specify all the sizes that your product is available in and specify whether they affect the base product price or not.


7. Choose the Default option. If you enable the Do not preselect default value, the Default column will be hidden.


8. Save the changes and check how the product page looks. Repeat the above steps to add more options (like color), if needed.

Here is how a product with different options looks in the storefront:


You can control the stock of product options and provide a separate image for each option by using variations.

Preselected default values

You can use the Do not preselect default value with drop-down lists and radio buttons to ensure customers select an option:


With the Do not preselect default value option checked, a customer cannot add a product to the cart without selecting an option. Here is an example of how shoppers see a product page right after opening it (no options are selected) and how they are reminded to pick options.


With the Do not preselect default value option unchecked, your default product options (for example, basic ingredients for pizza) are preselected for faster customer checkout. If a shopper wants to order a product with other options (for example, unusual ingredients for pizza), they need to choose them on the product page instead of default options. Here is an example of how shoppers see a product page in this case:


If your customers tend to order products with default options, you can allow them to add products with default options to the cart right in the product list, by clicking on the “Buy Now” button:

This setting is available in your store manager's Settings → General → Cart & Checkout tab.

Using price modifiers

Price modifiers help increase or decrease the base product price depending on options. For example, a cotton T-Shirt costs $10, while an organic cotton T-Shirt sells for $12. If a customer selects the organic option with the +$2 price modifier, they will see the updated price ($12) on the product page.

Note: Price modifiers can be assigned to drop-down, checkbox, and radio-buttons option types.

1. In your store manager, go to Catalog → Products.

2. Open the product you want and go to the Options tab.


3. Select how the price modifier should adjust the price:

Negative and positive price modifiers

4. Select whether the modification adjusts the price in absolute amount or as a percentage:

Monetory and percentage price modifiers

5. Set the amount and save the changes.

This is how the price modifiers appear in your store manager's product options:


This is how your customers see modifiers in your storefront. The price changes immediately when you select an option:

Price modifiers in product page

Product options may increase or decrease the price of a product, but they do not have their own stock level. To track the inventory of product options, you can use product variations.

Did this answer your question?