Wishlist

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.

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:

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.

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:

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.

Inside the card, everything a product card can show works: see 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. 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:

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:

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.

What you type is a placeholder until the list is read. The full list of parts is in wishlist-toggle, wishlist-share, the wishlist cards and wishlist attributes.

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.

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.

Before you publish