> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/choice-list/dropdown-menu.md).
# Dropdown menu
✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/dropdown-menu?variant=51025987961110)
### 1. How Does the Dropdown menu Display?
The dropdown menu allows customers to select an option from a predefined list instead. When clicked, the menu expands, displaying the available choices in a structured way, making the selection process easier.
Example of how it appears on a product page:
* A T-shirt product with a dropdown menu to select size: S, M, L, XL.
### 2. How to Create a Dropdown
**Step 1: Add a New Option**
* Click Add Option > Dropdown menu to create a new option
**Step 2: Add information to the Dropdown**
* Enter a label for the dropdown (e.g., "Select Size", "Choose Color")
* Add the option values (e.g., S, M, L, XL).
* Tick on “Required field” if you want customers must choose the option before checking out.
* Tick on "Hide option label” if you don’t want to show the option name above the option values.
Other features:
* Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md)
* SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
* Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)
**Step 3: Advanced Settings (If Needed)**
{% hint style="success" %}
**Conditional Logic:** Enable conditional logic if you want the Dropdown to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/)
{% endhint %}
Example: A “Customization” dropdown appears only if the customer selects “Yes” for “Would you like to personalize this item?”
{% hint style="success" %}
**Help text:** Add a short description to explain the purpose of the Switch option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
{% endhint %}
{% hint style="success" %}
**Default value:** Pre-select the Dropdown options every time the customer goes to the site. It can save time for customers by providing common or expected choices.
{% endhint %}
Example: Default size selection set to "XS" for a Dog's shirt
{% hint style="success" %}
**Default text on dropdown:** Display placeholder text in the dropdown before the customer makes a selection.
{% endhint %}
Example: “Select a size” or “Choose an option.”
{% hint style="success" %}
**Search bar:** If your dropdown contains a long list of options, enable a search bar to make it easier for customers to find their preferred choice.
{% endhint %}
Example: A dropdown with 20+ fragrances for perfume
{% hint style="success" %}
**Quantity:** Allows customers to select multiple values from the dropdown. You can set the **Min** and **Max** for each option value according to your own requirements. This allows you to control how many units of each option value customers can select.
{% endhint %}
Example: Select multiple fragrances for one dropdown menu option
**Step 4: Save and Test**
* Click Save to apply the settings.
* Visit the product page on your store to check if the Dropdown menu option works correctly.
### 3. Real-World Applications of Dropdown menu
* Fashion: Choose size, color, or fabric type.
* Electronics: Select storage capacity, color, or bundle options.
* Personalized Services: Choose engraving styles or packaging types.
### 4. Key Features of Dropdown menu
* Clean and user-friendly display: Saves space on the product page.
