> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Dropdown menu 1. [OPTIS Product Options, Variant](/product-options) 2. [20 Option Types](/product-options/20-option-types) 3. [Choice list](/product-options/20-option-types/choice-list) # Dropdown menu A **Dropdown menu** lets customers pick one value from a compact list - they click to open it, then choose. ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/dropdown-menu?variant=51025987961110) ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/7/a/d97aedf59579d800/18117b77-0ca2-4470-a6b8-d999fb_1f69e24.png) ## When to use a Dropdown menu * **Fashion** - size, color, or fabric type. * **Electronics** - storage capacity, color, or bundle options. * **Personalized services** - engraving styles or packaging types. ## How to add a Dropdown menu option ### Step 1: Add the option Open **1. Add options**, click **Add option**, tick **Dropdown menu** under **Choice list** on the **New options** tab, then click **Add options**. ![](https://storage.crisp.chat/users/helpdesk/website/-/6/c/0/1/6c0171a0e78c5000/a2d145e2-1143-44f3-9a68-8fbbd8_1a4o6te.png) ### Step 2: Name it and add values Enter the **Label on product** (e.g., "Select Size") and add the **Option values** (e.g., S, M, L, XL). Tick **Required field** if customers must choose before checking out, or **Hide option label** to hide the label. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/0/a/d/b0adbe28809ab800/b25c8889-cc7c-4d81-942e-0bc328_1n66n4t.png) ### Step 3: Save and test Click **Save**, then open the product page on your store to check that the Dropdown menu works correctly. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/d/0/fad01f75c2301800/cccd719a-404b-4be8-8bc4-472aba_1q3jpl2.png) ## Option settings Set only what you need - all of the settings below are optional. In the **Option values** table, click **Columns** to show **Add-on**, **Help text**, **SKU** or **Quantity** for each value: * **Add-on** - charge extra for a value (**Extra fee**, Advanced plan and above) or link it to a Shopify variant (**Upsell product**, Platinum and above). See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option). * **SKU** - a SKU for that value. Advanced plan and above. See [How does Product Option SKU works?](/product-options/customize-design/how-does-product-option-sku-works). ![](https://storage.crisp.chat/users/helpdesk/website/-/d/4/3/9/d439d06bf9bee000/ce66e90c-4555-4991-8923-237331_5s13d5.png) ### Default value Toggle **Default** for the value that should be pre-selected when the customer opens the product page (e.g., default size "XS" for a dog's shirt). Available on the **Advanced** plan and above. ![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/8/b/4b8bc0c08ead3c00/f21bc087-56ef-48d7-b8bd-bbb19f_1lmna2w.png) ### Default text on dropdown Show a placeholder such as "Select a size" or "Choose an option" before the customer picks a value. ![](https://storage.crisp.chat/users/helpdesk/website/-/3/1/8/f/318ff0c426022c00/3dafce20-dda6-4261-a8a6-f9f07f_sisizm.png) ### Search bar If the dropdown has many values (10-15 or more), enable a search bar so customers can find their choice faster - for example, a dropdown with 20+ fragrances. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FQfwzyoJuROFymvV2zw3u%252F11.png%3Falt%3Dmedia%26token%3Dd626b970-8c38-4774-a2a2-1868fee8103f&width=768&dpr=3&quality=100&sign=c793874852f601349df6b05b0c2a0e41&sv=3) ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FyVOv6QEIvhoxHDUqrReS%252FScreenshot%2520-%25202026-01-12T170753.187.png%3Falt%3Dmedia%26token%3D34b4737c-8cff-461c-b0b8-4e08c9d2eadf&width=768&dpr=3&quality=100&sign=7e08980c44f03d983db70ac8845b7d53&sv=3) ### Quantity Turn on the **Quantity** column so customers can pick several values (for example, several fragrances) and set how many of each, using **Min quantity** and **Max quantity**. Available on the **Platinum** plan and above. See [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FdU4vmT697Hzw2PJUTw0g%252F12.png%3Falt%3Dmedia%26token%3D7c1647cc-be91-4bc0-997b-62a9062960a7&width=768&dpr=3&quality=100&sign=53e6a53bbb4ab8068142d1e33e22cf93&sv=3) ### Help text Add a short note explaining what to choose, shown as a **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**. Available on the **Platinum** plan and above. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FTTd0Z02tyJJgBCQqIle2%252F9.png%3Falt%3Dmedia%26token%3D3f4c410a-1b59-48ea-b53a-d606ebed96fd&width=768&dpr=3&quality=100&sign=acf10114cb9a3fe653310d8cfd264b75&sv=3) ### Show or hide with Visibility (conditional logic) Show or hide the Dropdown menu based on another option - for example, only show a "Customization" dropdown when the customer answers "Yes" to "Would you like to personalize this item?". Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F0aWe9T7GkrcwRabu14NK%252Fimage.png%3Falt%3Dmedia%26token%3D0025dd0b-6eaa-4b44-80a8-237334b95891&width=768&dpr=3&quality=100&sign=1284d3eea67c982aad2637edc735aa64&sv=3) ### Option width In the **Display** tab, set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the Dropdown menu takes. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F9U3dtq1LmntoeGF2jy72%252Fimage.png%3Falt%3Dmedia%26token%3De61299b1-7351-4bef-bf24-46d11ececa95&width=768&dpr=3&quality=100&sign=f1517f5490c908ff19d7191b767afe45&sv=3) ## Related guides * [Dropdown Menu with Thumbnails](/product-options/20-option-types/choice-list/dropdown-menu-with-thumbnails) * [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option) * [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) * [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)