# 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 “This option is required” if you want customers must choose the option before checking out.
* Tick on "Hide option name” 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" %}
**Multiple selection:** Allows customers to select multiple values from the dropdown.
{% 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.optis.me/product-options/18-option-types/choice-list/dropdown-menu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
