Wishlists

Catalyst includes built-in wishlists, similar to those in Stencil. Customers can save products to one or more wishlists from the product detail page (PDP), manage those wishlists in their account, and optionally share them publicly. This page covers how wishlists behave and where their code lives, so you can customize or extend them.

Functionality

  • Customers add products to a wishlist from the PDP with the wishlist button.
  • Customers manage multiple wishlists (view, create, rename, and delete) from their account page.
  • Customers can share a wishlist publicly with a unique URL.

Behavior

ScenarioBehavior
A customer adds a product with selected optionsThe selected options are added to the wishlist if they form a complete variant (SKU).
A signed-out shopper clicks the wishlist buttonThey’re prompted to sign in, then redirected back to the PDP to finish the action.

Customize wishlists

Wishlists work out of the box, so you don’t need to build them. You can customize them, for example to:

  • Change the UI of the wishlist modals or buttons
  • Add analytics events
  • Modify the server logic for creating and updating wishlists

Key code paths

Wishlist code lives in the following paths in your Catalyst project.

Account pages

PathDescription
app/[locale]/(default)/account/wishlistsMain Wishlists page inside the customer’s account dashboard.
app/[locale]/(default)/account/wishlists/[id]Wishlist details page (shows products within a specific wishlist).
app/[locale]/(default)/account/wishlists/_actionsServer actions (GraphQL mutations for create, update, delete, rename).
app/[locale]/(default)/account/wishlists/_componentsComponents related to the Account wishlist UI.
app/[locale]/(default)/account/wishlists/modals.tsxDefines wishlist modals, such as “Create a new wishlist.”

Public wishlists

PathDescription
app/[locale]/(default)/wishlist/[token]Page route for publicly shared wishlists.

Shared and PDP components

PathDescription
components/wishlist/Shared wishlist components used in both the account and public views.
components/wishlist/share-button.tsxShare button used on both the account and public wishlist pages.
app/[locale]/(default)/product/[slug]/_components/wishlist-buttonPDP-specific wishlist button component.