How to Integrate Advanced Wishlist with Product Filter & Search Apps

When you install a third-party filter app on your store, the wishlist button does not always initialize automatically on pages that load dynamically or asynchronously. This guide shows you how to ensure the wishlist buttons appear correctly on product items within your filter and search results.

Integration Compatibility

• Our app works impeccably with the Cloud Search & Filter app.

• For other third-party filter apps, you may need to apply the manual theme code update below.

Step-by-Step Code Integration

Follow these steps to add the wishlist button code to your theme asset files:

Step 1: Open Your Theme Code Editor

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you would like to integrate with the app.

3. Click the Actions (⋯) button next to the theme and select Edit code.

Step 2: Locate the Custom Asset File

1. In the left-hand sidebar, open the Asset folder.

2. Search for your theme's custom code file. Depending on your theme and filter setup, this could be named:

   • custom.css.liquid

   • boost-sd-custom.js

   • Or any other theme-specific custom file.

Step 3: Paste the Snippet

1. Copy the code snippet below:
   {% render 'hulkapps-wishlist-collection-btn', productId: product.id, variantId: product.selected_or_first_available_variant.id %}

2. Paste the snippet into the file on a completely new line. Ensure it does not intervene with any existing code inside the file.

3. Click Save in the top-right corner.

Important Note

• Developer Support: You might have to contact your specific Filter & Search app developers to have them add the code snippet above directly into their application's rendering code.