# wishlist-toggle

> Adds or removes the product, or its current variant (data-use-variants), from the wishlist; inside a card of the wishlist page it works on the entry the card shows, product or variant.

Status: Ready (Smootify 2.0)  
Add-on: Wishlist  
URL: https://www.smootify.io/docs/reference/elements/wishlist-toggle  
Updated: 2026-10-13

## At a glance

| State | What changes |
|---|---|
| A product not saved | the toggle has no class; when a product is removed, a Rive element inside plays the animation named in `data-animation-off` (`off` by default) |
| A product saved | the toggle has the class `is-in-wishlist`; a `button` inside it gets `is-active` and screen readers hear it as pressed; a Rive element plays the animation named in `data-animation-on` (`on` by default) |

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

## Where it can go

- **Inside any of:** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product), [`smootify-variant[data-product-id="wishlist"]`](https://www.smootify.io/docs/reference/elements/smootify-variant-data-product-id-wishlist).
- **Out of place,** Smootify removes it from the page.

## What it requires

- The **Wishlist** extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.

## Attributes on the element

- **It reads** `data-use-variants`, `data-animation-on`, `data-animation-off`.

## Loading

Its code loads only on pages that have `wishlist-toggle`.