⚠️ 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.
Turbo
When you enable this integration, a heart icon appears on Boost product cards across collection pages so shoppers can save items.
1. Install Swym Wishlist Plus and finish setup inside the Swym app.
2. In Boost AI Search & Discovery, go to Integration > Third-party integration.
3. Search for Swym Wishlist Plus and turn on the integration toggle.
4. Go to Integration > Shopify integration.
5. Select the theme where you want to show the wishlist icon, then click Customise.
6. In Product item settings, open Additional information.
7. Enable Show Wishlist icon.
8. Click Save.
Older versions
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 steps.
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
or
{{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) {
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 with the class selector (for example: .boost-pfs-filter-products) 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. In the Asset folder, locate a file named boost-sd-custom.js.
4. 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. Click Save and you're all set!
Need further assistance? You can always reach out to us at [email protected].
If you're already on our messenger, simply say "talk to an agent," and Fin will
connect you with a member of our team who can provide further assistance.