📖 Smart Wishlist is the next generation wishlist for Shopify Stores, which is really simple to use and the wishlist can be created with one-click. Here is our guide for integration between Smart Wishlist and 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.
About Smart Wishlist
App Information
Smart Wishlist enables your customers to create a wishlist without user registration or login.
App details: https://apps.shopify.com/smart-wishlist
Smart Wishlist Integration Benefit
Navigating to the exact product and bookmark it anytime with the wishlist heart icon on product items.
How to integrate Smart Wishlist with Boost AI Search & Discovery
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. Then follow its corresponding Step 3.
V2
3. (V2) In Asset folder, search for this file boost-pfs-filter.js. Then locate this line of code:
ProductList.prototype.afterRender
4. (V2) Copy this code snippet and paste into the function(make sure it doesn't intervene with any existing codes inside function by pasting it into a new line)
if (data.event_type != 'init' && typeof ReloadSmartWishlist !== 'undefined') {
ReloadSmartWishlist();
}After completing Step 4, if the Smart Wishlist does not show up, please follow the next steps below:
5. (V2) In the same folder and file, locate these lines of code:
ProductGridItem.prototype.compileTemplate
&
ProductListItem.prototype.compileTemplate
6. (V2) Copy this code snippet and paste into each function (make sure it doesn't intervene with any existing codes inside function by pasting it into a new line)
var wishListHtml = '<span class="smartwishlist" data-product="' + data.id + '" data-variant="' + data.variants[0].id + '"></span>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, wishListHtml);
7. (V2) Go to folder Snippets > Look for this file boost-pfs-filter-html.liquid 8 (V2) Locate this function
productGridItemHtml
9. (V2) Add this line of code into the function:
{{itemWishlist}}
10. (V2) Click Save and you're set!
V3
3. (V3) In the Asset folder, locate a file named boost-sd-custom.js.
4. (V3) Add the code snippet below to the boost-sd-custom.js file:
if (window.boostSDAppConfig) { window.boostSDAppConfig.integration = Object.assign({ wishlists: 'smart' }, window.boostSDAppConfig.integration || {}); }5 (V3). Click Save and you're all set!
Turbo
1. Go to Boost AI Search & Discovery > Integration > Shopify Integration > Select your preferred theme > Edit code.
2. Locate this file customization.js & add the following code at the end of it:
if (window.boostWidgetIntegration) {
window.boostWidgetIntegration.integration = Object.assign(
{ wishlists: 'smart' },
window.boostWidgetIntegration.integration || {}
);
}3. Find the file product-item/product-image.liquid & add the following code like the image below:
<span class="smartwishlist"
data-product="{{ product.id }}"
data-variant="{{ product.variants[0].id }}">
</span>
⚠️ Please note that the position of wishlist button might need to be modified; in that case, please contact Smart Wishlist team for further assistance.
If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at [email protected].