📖 Here is the guide for Wishlist Plus Integration with Boost AI Search & Discovery app.
About Wishlist Plus
App information
Wishlist Plus enables customers to bookmark their favorite products and pick up where they left off when they return.
App details: https://apps.shopify.com/swym-relay
Wishlist Plus Integration Function
Provide an Add to Wishlist button/icon on every page on product items while navigating the right product.
How to integrate Wishlist Plus 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.
V2
3. (V2)
In Asset folder, search for this file boost-pfs-custom.css.liquid.
4. (V2)
Copy this code snippet and paste into the file (make sure it doesn't interfere with any existing codes inside the file by pasting it into a new line)
// For boost-pfs-custom.css.liquid .boost-pfs-filter-products .swym-button.swym-add-to-wishlist-view-product:not(.swym-loaded){ display: none; }5. (V2)
Next, go to boost-pfs-filter.js file, 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 productGridItemlHtml 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:
/* Swym integration */
var itemWishlistHtml = '<button data-with-epi="true" class="swym-button swym-add-to-wishlist-view-product wishlist swym-button product_' + data.id +
'" data-swaction="addToWishlist" data-product-id="' + JSON.stringify(data.id) +
'" data-variant-id="' + data.variants[0].id +
'" data-product-url="' + boostPFSConfig.shop.url + Utils.buildProductItemUrl(data, false) + '"></button>';
itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);
10. (V2)
Continue to locate this line of code:
ProductList.prototype.afterRender
11. (V2)
Copy and paste this code snippet into the function ProductList.prototype.afterRender
/** End Swym integration **/ document.dispatchEvent(new CustomEvent("swym:collections-loaded"));12. (V2)
Create a Snippet called ‘swym-custom’ and add the following code (infinite / dynamic scrolling pages only):
<script defer> function swymCallbackFn(swat){ // your API calls go here document.addEventListener("swym:collections-loaded", function(){ swat.initializeActionButtons("<<Collections Product Grids Parent Selector>>"); }) } if(!window.SwymCallbacks){ window.SwymCallbacks = []; } window.SwymCallbacks.push(swymCallbackFn); </script>💡 Replace the <<Collections Product Grids Parent Selector>> from the code snippet above by locating the selector from your Store's front end of the collection's Product grids container:
You can locate it by going to your store's front end > Right click on the page > Inspect.
13. (V2)
Add the following include code to your theme.liquid file.
{%include 'swym-custom'%}We recommend that you add this just below the swym-snippet file as shown below.
14. (V2)
Click Save and you're set!
You can find more details in Swym document in the link below: https://swym.it/help/add-wishlist-button-to-your-collections-page-2/
V3
3. (V3)
In 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: 'plus' }, 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: 'plus' },
window.boostWidgetIntegration.integration || {}
);
}3. Find this file product-item/product-image.liquid & add the following code as below:
<button
data-no-redirect="true"
aria-label="Add to Wishlist"
data-with-epi="true"
class="swym-button swym-add-to-wishlist-view-product product_{{product.id}}"
data-swaction="addToWishlist"
data-product-id="{{product.id}}"
data-variant-id="{{product.variants[0].id}}"
data-product-url="https://{{request.shop}}/product/{{ product.handle }}">
</button>
4. 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].