How to Show and Customize Icon or Button on Collection Page

This feature allows you to display a wishlist button or icon on product cards across collection pages, helping customers quickly save items they’re interested in. You can also customize the icon’s appearance and behavior to match your store’s design and user experience.

Follow the steps below to configure and customize the collection wishlist icon.

Steps to configure the Collection icon/Button : #

• Open the Shopify theme editor.
• Navigate to App Embeds.
• Ensure that Wishlist Guru is enabled.
• Turn on the toggle for “Collection Icons”
• Save changes.

• Go to the Dashboard page
• Click on the left navigation “Collection Settings“
• You will be directed to the desired Collection Settings page. Within this section, the following options are given, which are as shown in the image below:

Types of Icons #

You can change the style of your wishlist icon. Below is the heart icon as an example, but you can also choose a bookmark icon or a star icon, whichever suits your needs as mentioned below.

Styles #

Here you can choose a wishlist icon design. This selection will adopt the global colour scheme and icon settings configured in the app settings.

Position

Our floating collection buttons effortlessly overlay product images, seamlessly integrating with all current themes available in the official Shopify theme store as shown in the image below:

You can also change the color as well as the position of your wishlist icon as per your choice through the settings as shown in the image below:

Show/Hide count of product on collection page with Add To Wishlist icon/button

You can see here that how many users has added that particular product in the wishlist

Apps Compatibility #

Our app code is compatible with the apps mentioned below and also provides customization with the many other apps coming in the following weeks, which will be highly compatible with our code!

1. AI search, Filter Recommended by Boost
2. Sparq product Filter and Search
3. Searchanise search & filter

We provide a Custom Selector #

This allows you to manually add a collection page selector. If the selector is correctly added, a heart icon will appear on the collection page.