# Wishlist
> A button that saves products for later, a wishlist page, a counter and a link to share the list, kept in the visitor's browser and, for logged-in customers, in their account.
Status: Ready (Smootify 2.0)
Add-on: Wishlist
1.x page: https://docs.smootify.io/docs/ecommerce/add-ons
URL: https://www.smootify.io/docs/features/wishlist
Updated: 2026-10-10
A wishlist lets visitors save products, or single variants, to buy later. Smootify gives you four parts: a toggle that saves or removes an item, a list of the saved items for a wishlist page, a counter for the navbar, and a button that shares the list with a link. Each part works on its own, so you use only the ones your design needs.
> [!NOTE]
> Turn on **Wishlist** in the Smootify dashboard. It is free on every plan. On your `.webflow.io` address it works for testing before you turn it on; on your own domain, `wishlist-toggle` and `wishlist-share` do nothing until it is on. Only turning it on adds the customer metafield **Wishlist Data** (`custom.wishlist_data`) to Shopify, where the list of a logged-in customer is saved. In Shopify, under **Settings > Custom data > Customers**, check that this definition has **Customer accounts access** set to **Read and write**: Smootify creates it that way, but a definition that already existed keeps its own setting.
## How it fits together
- **`wishlist-toggle`** goes inside a `smootify-product`: on the product page or in a product card. A click saves the product, a second click removes it.
- **`smootify-product` with `data-id="wishlist"`**, or **`smootify-variant` with `data-product-id="wishlist"`**, is the card template of the wishlist page. Smootify repeats it once per saved item.
- **`wishlist="count"`** shows how many items are saved, anywhere on the page.
- **`wishlist-share`** shares a link to the wishlist page with the saved items, anywhere on the page.
**Where the list is kept.** It depends on whether the visitor is logged in with [customer accounts](https://www.smootify.io/docs/build/account):
| Who | Where the list is kept | On another device |
|---|---|---|
| A visitor | in their browser | not there |
| A customer logged in with customer accounts | in their browser and in their account, in the customer metafield **Wishlist Data** (`custom.wishlist_data`, with Read and write customer accounts access) | the same list |
| A customer who logs in | Smootify keeps the list that changed last, the one in the browser or the one in the account | the two lists are not merged |
## 1. Add the toggle
Add a Custom element with the tag `wishlist-toggle` inside `smootify-product`. Put what the visitor clicks inside it, such as a heart icon or a Custom element with the tag `button`. The whole toggle is the click area.
```html
```
Outside a `smootify-product`, the toggle is removed. The cards of the wishlist page are the exception: see below.
**Show the state.** Style the toggle’s class as a combo class, for example to fill the heart. To animate it, put a Webflow Rive element inside the toggle: Smootify plays its animations by name, from the toggle’s `data-animation-on` and `data-animation-off` custom attributes. The two states:
| 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) |
**Save the variant.** With `data-use-variants` on the toggle, the click saves the selected variant instead of the product, such as the hoodie in Blue / M. Saved variants count in `wishlist="count"` and show on the wishlist page, like saved products.
## 2. Build the wishlist page
On a page of its own, add a Div block for the grid, and inside it a `smootify-product` with the custom attribute `data-id="wishlist"`. Design it as one product card: Smootify copies it once per saved product, and the copies go next to it, in the same Div block. Only the first `smootify-product` with `data-id="wishlist"` on the page is used.
```html
Product
$0.00
Your wishlist is empty
```
Inside the card, everything a product card can show works: see [Product cards](https://www.smootify.io/docs/build/product-cards). The cards follow the order in which the items were saved. A `wishlist-toggle` in a card removes the item that card shows, product or variant, and the card goes away.
**Cards for the saved variants.** To show saved variants as variant cards, add a `smootify-variant` with the custom attribute `data-product-id="wishlist"` and design it like a [variant card](https://www.smootify.io/docs/build/variants-list). Smootify copies it once per saved variant, and only the first one on the page is used. You can use one template or both, and nothing saved is left out:
| Templates on the page | A saved product shows as | A saved variant shows as |
|---|---|---|
| only `smootify-product` with `data-id="wishlist"` | its product card | the card of its product, with that variant selected |
| only `smootify-variant` with `data-product-id="wishlist"` | the card of its first variant that can be bought (or its first variant) | its variant card |
| both | a card of the `smootify-product` template | a card of the `smootify-variant` template |
```html
Product
Blue / M
$0.00
```
Here the toggle works inside the variant card too, without a `smootify-product` around it.
**Empty or not.** Two conditions work anywhere on the page, for these two states:
| State | What changes |
|---|---|
| A wishlist with items | `condition="has-items-in-wishlist"` shows, anywhere on the page; the body has the class `has-wishlist`; each card has the class `is-wishlist-item` |
| An empty wishlist | `condition="no-items-in-wishlist"` shows, anywhere on the page |
## 3. Show the count
Add `wishlist="count"` to a text element, anywhere on the page, such as next to a wishlist link in the navbar. It shows the number of saved items and updates on each click.
```html
```
What you type is a placeholder until the list is read. The full list of parts is in [`wishlist-toggle`](https://www.smootify.io/docs/reference/elements/wishlist-toggle), [`wishlist-share`](https://www.smootify.io/docs/reference/elements/wishlist-share), [the wishlist cards](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-wishlist) and [wishlist attributes](https://www.smootify.io/docs/reference/attributes/wishlist).
## 4. Share the list
`wishlist-share` sends a friend, a partner or a colleague a link to the wishlist page with the visitor’s saved items, for gift ideas or a choice to approve. Whoever opens the link needs no account.
1. Add a Custom element with the tag `wishlist-share`, with a Custom element with the tag `button` inside, anywhere: on the wishlist page, in the navbar or in the account.
2. Give it the custom attribute `data-page` with the path of your wishlist page, such as `/wishlist`. Without it, the link opens the page it is on.
```html
```
A click opens the device’s share sheet, on phones, or copies the link. With `data-copy` it always copies the link. `data-title` is the title of the share, by default the page’s title. Style the moments with combo classes: `is-copied` or `is-shared` for two seconds after the click, and `is-empty`, with its button disabled, while the list is empty.
**The shared page.** The link opens your wishlist page with the shared items in place of the visitor’s own, with the same card templates and `wishlist="count"`. The visitor’s own list is not touched: on a shared list, the toggles in the cards save to the visitor’s own wishlist, “add it to mine too”. Two conditions tell the two lists apart in the design:
- `condition="shared-wishlist"` shows an element only on a shared list, for a heading such as “A list for you”;
- `condition="own-wishlist"` shows it only on the visitor’s own list, for the share button itself.
The link is a snapshot: it holds the items saved when it was shared, up to 100. Items saved later need a new link, and products that are no longer sold in the visitor’s market do not show.
## Coming from 1.x
- **`data-use-variants` now saves the variant.** In 1.x the attribute did nothing and the toggle always saved the product. Remove it to keep the 1.x behaviour.
- **The events have new names.** Scripts that listen to the wishlist should use `smootify:wishlist:changed_product` and the other `smootify:wishlist:…` names. The 1.x names `smootify_wishlist:…` are still sent until 3.0. See [Events](https://www.smootify.io/docs/developers/events).
## Before you publish
> [!STUCK]
> - **The toggle disappears.** It is not inside a `smootify-product`, or, on the wishlist page, inside a card of a wishlist template.
> - **Nothing happens on the live site.** Wishlist is not turned on in the Smootify dashboard.
> - **The list does not follow the customer to another device.** The customer is not logged in with customer accounts, or the **Wishlist Data** metafield does not have **Read and write** customer accounts access in Shopify.
> - **After logging in, the list is different.** The browser list and the account list are not merged: the one changed last is kept.
> - **The shared link shows the visitor's own list.** The page it opens has no wishlist card template. Set `data-page` on `wishlist-share` to the page that has one.