# Dropdown menu

The **Drop-down Menu** option type allows customers to make selections from a drop-down list on the product page. This option type is ideal for offering a range of choices in a compact, organized format, such as sizes, colors, or product variants.

👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/drop-down-menu-2) to see how it works&#x20;

***

## **Basic Option Settings:**

<figure><img src="/files/wBTjplDGhueUbMvKUWHU" alt=""><figcaption></figcaption></figure>

#### **1. Option Name**

The internal name used to identify this group of drop-down options within your app. It helps you organize and manage your product options effectively.

#### **2. Label on Product**

This label appears next to the drop-down menu on the product page, guiding customers on what the drop-down list represents (e.g., "Select Size" or "Choose Color").

#### **3. Label on Cart**

The label shown in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents. It clearly indicates the selection made by the customer.

#### **4. Option Values**

Add the different choices available in the drop-down menu. You can do this individually by selecting "Add option value" or in bulk using the "Bulk add" feature. Each option value represents a specific choice (e.g., "Small", "Medium", "Large").

#### **5. Default Value**

Set a default option that will be pre-selected when the product page loads, guiding customers towards a recommended or popular choice.

#### **6. Required Field**

Make it mandatory for customers to select an option from the drop-down menu before adding the product to their cart. This ensures that all necessary choices are made.

#### **7. Hide "Label on Product"**

Option to hide the label next to the drop-down menu on the product page for a cleaner, more streamlined appearance.

#### **8. One Time Charge**

This setting allows you to modify how additional charges are applied to a specific option value. Normally, the extra charge for an option is multiplied by the quantity of the product purchased (e.g., an additional charge of $10 would become $50 if the quantity is 5). However, by enabling the "One time charge" feature, the extra charge will only be added once, regardless of the product quantity. This is useful when you want to apply a flat fee for certain options without scaling the charge with the number of items purchased.

#### **9. Show "Quantity" for Option Value**

Enable customers to specify the quantity for each option in the drop-down menu. You can set minimum and maximum quantity limits for better control.

#### **10. Min/Max Selection**

You can define the minimum and maximum number of checkbox options that a customer can select. This ensures that customers make a choice within a specified range.

#### **11. Option URL**

Allows you to link specific options in the drop-down menu to external URLs. Customers can select these options to be directed to another page or site for additional information.

{% hint style="info" %}
[How to set up Option URL for your options](https://options-docs-v2.avisplus.io/app-features/option-url-feature)
{% endhint %}

#### **13. Conditional Logic**

Apply conditional logic to control when certain drop-down menu options are displayed based on other selections made by the customer. This creates a more personalized and interactive shopping experience.

{% hint style="info" %}
[How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected)
{% endhint %}

***

## **Advanced Option Settings:**

<figure><img src="/files/lB4Qsgkr9j9pCv27TSKm" alt=""><figcaption></figcaption></figure>

**1.** **Change product image on option selection**

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

{% hint style="info" %}
[How to change product image upon option selection](/storefront-display/change-product-image-upon-option-selection.md)
{% endhint %}

**2. Price display type**

Decide whether to **show or hide** the additional price on the slider interface.

#### **3. Placeholder Text**

Add placeholder text that appears in the drop-down menu before a selection is made. This can prompt customers to make a choice (e.g., "Please select a size").

**4. Show price**

Customize how pricing is displayed with these options:

* *Only Option Value:* Show price next to the option value.
* *Only Option Label:* Show price next to the label.
* *Show All:* Display prices with both label and value for maximum transparency.

#### **5. Tooltip**

Provide additional information about each option by adding tooltips. When customers hover over an option, the tooltip will display, offering further details.

#### **6. Help Text**

Display help text below the drop-down menu to offer further explanation or instructions, helping customers make informed selections.

#### **7. Class Name**

For advanced customization, add custom CSS class names to the drop-down menu. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your 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://options-docs-v2.avisplus.io/option-types/all-option-types/dropdown-menu.md?ask=<question>
```

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.
