Wishlists
Overview
Catalyst includes built-in support for wishlists, providing functionality similar to what’s available in Stencil. The implementation enables customers to save products to one or more wishlists directly from the Product Detail Page (PDP), manage those wishlists under their account, and optionally share them publicly.
This documentation outlines the key behaviors, caveats, and code structure so developers can understand or extend the wishlist functionality in Catalyst storefronts.
Functionality
- Users can add products to a wishlist directly from the PDP using the wishlist button.
- Users can manage multiple wishlists (view, create, rename, delete) from their account page.
- Wishlists can be shared publicly via unique URLs.
UX Behavior
| Scenario | Behavior |
|---|---|
| User adds a product with selected options | The selected options are added to the wishlist if they form a complete variant (SKU). |
| User is signed out and clicks wishlist button | They are prompted to sign in. After signing in, they are redirected back to the PDP to finish the action. |
Developer Notes
This feature is already implemented in Catalyst. Developers do not need to build wishlist functionality from scratch, but may want to:
-
Customize the UI/UX of wishlist modals or buttons
-
Integrate analytics/events
-
Modify backend logic for wishlist creation and updates
Key Code Paths
Here’s where to find and modify wishlist functionality in the Catalyst codebase:
Account Pages
| Path | Description |
|---|---|
app/[locale]/(default)/account/wishlists | Main 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/_actions | Server actions (GraphQL mutations for create, update, delete, rename). |
app/[locale]/(default)/account/wishlists/_components | Components related to the Account wishlist UI. |
app/[locale]/(default)/account/wishlists/modals.tsx | Defines wishlist modals, such as “Create a new wishlist.” |
Public Wishlists
| Path | Description |
|---|---|
app/[locale]/(default)/wishlist/[token] | Page route for publicly shared wishlists. |
Shared & PDP Components
| Path | Description |
|---|---|
components/wishlist/ | Common/shared wishlist components used across both Account and Public views. |
components/wishlist/share-button.tsx | Share button used on both Account and Public wishlist pages. |
app/[locale]/(default)/product/[slug]/_components/wishlist-button | PDP-specific wishlist button component. |