For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
  • Overview
    • Quick Start
    • Sandboxes
    • Tools & SDKs
    • Support
  • Docs
      • Getting Started
        • Overview
          • Client
          • CLI
          • Testing
          • Wishlists
          • Security
    • Archive
    • Closed Beta Programs
Dev Portal
LogoLogo
On this page
  • Overview
  • Functionality
  • UX Behavior
  • Developer Notes
  • Key Code Paths
  • Account Pages
  • Public Wishlists
  • Shared & PDP Components
DocsStorefrontCatalystReference

Wishlists

Was this page helpful?
Previous

Testing

Next

Security

Built with

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

ScenarioBehavior
User adds a product with selected optionsThe selected options are added to the wishlist if they form a complete variant (SKU).
User is signed out and clicks wishlist buttonThey 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

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 & PDP Components

PathDescription
components/wishlist/Common/shared wishlist components used across both Account and Public views.
components/wishlist/share-button.tsxShare button used on both Account and Public wishlist pages.
app/[locale]/(default)/product/[slug]/_components/wishlist-buttonPDP-specific wishlist button component.