How to Add Favorite/Wishlist Function to Individual CMS Pages

Finsweet Components Favorite
1

I’ve successfully implemented a favorite/wishlist feature (with heart icons) on my Collection page, allowing users to mark items as favorites. However, I’m struggling to extend this same functionality to individual CMS pages (the detail/product pages).

The heart icon toggle works perfectly on the collection listing, but when users navigate to a single CMS page item, the favorite functionality doesn’t work. Unfortunately, I can’t find any documentation covering how to implement this on detail pages.

Is there a specific approach or workaround for adding the favorite feature to individual CMS pages? Any guidance would be greatly appreciated!

Regards, Maurice

2

:white_check_mark: SOLVED
I figured it out! Here’s the workaround for anyone struggling with the same issue:

Add a Collection List directly on your CMS page and filter it to show only the current item. This allows you to embed the entire Favorite instance within that filtered collection list.

Step-by-step:

  1. Insert a Collection List on your CMS template page
  2. Set the Source to your collection (e.g., “Pferde” / your CMS collection)
  3. Add a Filter: [Your Item] = Current [Your Item] (see screenshot 2)
  4. Inside this filtered list, add your complete fs-favorite-2_instance structure
  5. The favorite functionality now works perfectly on individual CMS pages! :tada:

This way, the favorite heart toggle is embedded within a collection context even on detail pages, making it function exactly like it does on your main collection page.

Screenshots attached showing the element structure and collection list settings. Hope this helps someone!

image
image554×724 42.3 KB

image
image510×866 45.3 KB

3

Hey @tracking_ghc!

Great to hear you’ve solved the issue, and thank you for sharing the detailed steps!

Add a Collection List directly on your CMS page and filter it to show only the current item. This allows you to embed the entire Favorite instance within that filtered collection list.

Step-by-step:

  1. Insert a Collection List on your CMS template page
  2. Set the Source to your collection (e.g., “Pferde” / your CMS collection)
  3. Add a Filter: [Your Item] = Current [Your Item] (see screenshot 2)
  4. Inside this filtered list, add your complete fs-favorite-2_instance structure
  5. The favorite functionality now works perfectly on individual CMS pages! :tada:

Let me know if you face any other issues!