📖 Wishlist King helps you to add your favorite products or share the wishlist with your friends. Here is our guide for Wishlist King integration with Boost AI Search & Discovery app.
About Wishlist King
App Information
Wishlist King save the favorite products across all devices for later purchase.
App details: https://apps.shopify.com/wishlist-king
Wishlist King Integration Function
Display wishlist heart icon in product item when filtering out the product listing.
How to integrate Wishlist King with Boost AI Search & Discovery
This feature only works with Boost AI Search & Discovery V2 and above. To find out which version of our app your store's current theme is installed with, please follow this article.
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code.
Select one of the Versions below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out): V2 or V3 or Turbo. Then follow its corresponding Step 3.
3. Go to Wishlist King app > Settings > select your preferred theme.
4. Click Devlopers > Setup assistant to start setting up your file.
V2
5. (V2)
In Asset folder, search for this file boost-pfs-filter.js. Then locate this line of code:
productGridItemHtml
6. (V2)
Copy and paste this code snippet to where you'd like to add your wishlist:
'{{itemWishlist}}' + // For boost-pfs-filter.jsFor example, under the product thumbnail:
If the variable productGridItemHtml does not exist in boost-pfs-filter.js, please find it in the file boost-pfs-filter-html.liquid and paste this code snippet instead:
[[itemWishlist]] // For boost-pfs-filter-html.liquid
7. (V2)
In boost-pfs-filter.js file, locate this line of code:
ProductGridItem.prototype.compileTemplate
8. (V2)
Within the function ProductGridItem.prototype.compileTemplate, scroll down to locate this comment line:
// Add main attribute
9. (V2)
Copy and paste this code snippet above the comment line:
var itemWishlistHtml = "<!-- include 'wishlist-button-collection' with '" + data.id + "' -->";itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);
10. (V2)
Click Save and you're set!
V3
5. (V3)
In Asset folder, locate a file named boost-sd-custom.js.
6. (V3)
Add the code snippet below to the boost-sd-custom.js file:
if (window.boostSDAppConfig) { window.boostSDAppConfig.integration = Object.assign({ wishlists: 'king' }, window.boostSDAppConfig.integration || {}); }7. (V3)
Click Save and you're all set!
Turbo
1. From your Shopify admin, go to Online Store > Themes > find the theme you prefer > Customize.
2. In the editor, go to App embeds > enable Wishlist King > select the preferred theme for integration.
3. Find the Collection Buttons app embed, make sure it's enabled.
4. In Search & filter app preset option, select: AI Search, Filter & Recommend by Boost
5. Click Save and you're set!
If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at [email protected].