Skip to main content

How to integrate Wishlist Plus with Boost AI Search & Discovery

Here is the guide for Wishlist Plus Integration with Boost AI Search & Discovery app.

Updated today

⚠️ 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

  1. Go to Boost AI Search & Discovery > Integration > Shopify Integration > Select your preferred theme > Edit code.
    ​

    image.png

  2. Locate the file customization.js and add the following code at the end of it:

    if (window.boostWidgetIntegration) { window.boostWidgetIntegration.integration = Object.assign( { wishlists: 'plus' }, window.boostWidgetIntegration.integration || {} ); }

  3. Find the file product-item/product-image.liquid and add the following code at the end of the file 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}}/products/{{ product.handle }}"> </button>

  4. Click Save and you're set!

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

  1. In the Asset folder, search for the file boost-pfs-custom.css.liquid.
    ​

  2. Copy this code snippet and paste it 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; }

  3. Next, go to the boost-pfs-filter.js file, locate this line of code: productGridItemHtml
    ​

  4. Copy and paste this code snippet to where you'd like to add your Wishlist:

    '{{itemWishlist}}' + //For boost-pfs-filter.js

    For 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

  5. In the boost-pfs-filter.js file, locate this line of code: ProductGridItem.prototype.compileTemplate
    ​

  6. Within the function ProductGridItem.prototype.compileTemplate, scroll down to locate this comment line: // Add main attribute
    ​

  7. 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);

  8. Continue to locate this line of code: ProductList.prototype.afterRender

  9. Copy and paste this code snippet into the function ProductList.prototype.afterRender:

    /** End Swym integration **/ document.dispatchEvent(new CustomEvent("swym:collections-loaded"));

  10. 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.
    ​

  11. 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.
    ​

  12. Click Save and you're set!

    You can find more details in the Swym document in the link below: https://swym.it/help/add-wishlist-button-to-your-collections-page-2/

V3

  1. In the Asset folder, locate a file named boost-sd-custom.js.
    ​

  2. 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 || {}); }

  3. 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.

Related Articles
Install and Configure Wishlist Plus App on your Shopify store
Comprehensive Wishlist Customization Guide
Klaviyo Integration Setup with Wishlist Plus
Integrating Swym Wishlist Plus with Omnisend for Triggered Alerts
Setting Up Wishlist Reminder Workflow with Omnisend
Did this answer your question?