# addon-popover

> Popover listing the nested product's variants as add-ons.

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

## At a glance

| Picker | Built with | What it adds, and how to choose no add-on |
|---|---|---|
| `addon-checkbox` | a Webflow Checkbox | the add-on's current variant, while checked. The label text stays as you write it |
| `addon-select` | a Select field | the variant chosen in the select. Smootify writes one option per variant; an option you add without a value, such as "No thanks", means no add-on |
| `addon-dropdown` | a Webflow Dropdown | the variant chosen in the dropdown. The first Dropdown link is the template; `show-price` adds the price after each name. With `allow-unselect`, a "None" entry comes first; without it, the first variant is chosen from the start |
| `addon-popover` | an element with a popover | the variant chosen in the popover. The first link or button in the popover is the template; `show-price` and `allow-unselect` work as in the dropdown |
| `addon-swatches` | Custom elements with the tag `button` | the value or variant of the chosen button, which gets the class `is-active`. The first button is the template: one button per value for a product with one option, one per variant for more. A click on the chosen button removes the add-on; `allow-unselect="false"` prevents that and chooses the first value from the start |

More in [the guide](https://www.smootify.io/docs/features/add-ons).

## Where it can go

- **Inside** `smootify-add-to-cart smootify-product`. A selector with a space is a chain: `a b` is `b` inside `a`.
- **Not inside** `.w-condition-invisible`: a Webflow condition that hides the element takes it out.
- **Must contain one of** `[popover] a`, `[popover] button:not([popovertarget])`.
- **Out of place,** Smootify removes it from the page.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `addon-type`, `show-price`, `allow-unselect`, `id`.

## Loading

Its code loads only on pages that have `addon-popover`.