# variant-dropdown

> Webflow dropdown whose links are the values of a product option.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/variant-dropdown  
Updated: 2026-10-13

## At a glance

| Picker | Built with | Inside |
|---|---|---|
| `variant-swatches` | a Custom element | one Custom element with the tag `button`: the template of every value |
| `variant-dropdown` | a Custom element around a Webflow Dropdown | one Dropdown link: the template of every value |
| `variant-popover` | a Custom element with a popover inside | links or buttons inside the popover element |
| `variant-selector` | a Custom element around a Select field | the Select field: Smootify writes its options |

| Swatch part | Written as | `variant-swatches` | `variant-dropdown` | `variant-popover` | `variant-selector` |
|---|---|---|---|---|---|
| Color and image | `option="bg-color"`, `"image"` | yes | yes | yes | no |
| Name | `option="title"` | yes | yes | yes | yes, written by Smootify |
| Description | `option="description"` | yes | yes | yes | no |
| Other metaobject fields | `option-metafield="key"` | yes | yes | yes | no |
| Variant photo | `option-variant="image"` | yes | yes | yes | no |
| Price or difference | `smootify-price`, `option="price-difference"` | yes | yes | yes | in the text, with `data-format="{{value}} {{difference}}"` |

More in [the guide](https://www.smootify.io/docs/build/product-page#5-options).

## Where it can go

- **Inside** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product).
- **Not inside** `.w-condition-invisible`: a Webflow condition that hides the element takes it out.
- **Must contain** `.w-dropdown`, `.w-dropdown-link`.
- **Out of place,** Smootify removes it from the page: also when its option is missing or Default Title.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-option`, `data-option-name`, `avoid-option-update`.
- **Smootify writes** `role`, `aria-label` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Option buttons](https://www.smootify.io/docs/reference/attributes/option) | `option` | 14 |
| [Selected value](https://www.smootify.io/docs/reference/attributes/selected-option) | `selected-option` | 5 |
| [Option metafield](https://www.smootify.io/docs/reference/attributes/option-metafield) | `option-metafield` | 3 |

## Loading

Its code loads only on pages that have `variant-dropdown`.