Skip to main content

Equate - Product Compare Integration Guide

Written by Thomas Ta

📖 Product Compare app will help your store visitors to become customers by clearing their doubts with the right choice of product among your collection of products. Here is our guide for Product Compare integration with Boost AI Search & Discovery app.

⚠️ IMPORTANT NOTICE

If you run into problems with this integration, first check that you have followed every step for your app version. If the comparison table itself still behaves unexpectedly, contact the Equate team directly. Visit the Equate - Product Compare app listing and click Get support.


How to integrate Product Compare with Boost AI Search & Discovery

⚠️ Important

  • This guide adds the Add to Compare button to your collection pages only. It does not add it to your search results page or your instant search widget.

  • The steps are different for each Boost version. To find out which version your store's current theme is installed with, follow Boost AI Search & Discovery app versions.

Step 1: Set up Equate

Do this first, whichever Boost version you are on.

  1. In the Equate app, go to Comparison Configuration.

  2. Turn on Activation for collection page.

  3. Tick Collection.

  4. Set the placement method to match your Boost version:

Your Boost version

Placement method

V2

Auto

TURBO

Manually

⚠️ Pick the setting that matches your version. On TURBO, leaving the placement method on Auto means Equate tries to place the button itself, and it does not appear on Boost product items.

Step 2: Enable the Equate app embed

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to integrate and click Customize.

  3. From the left sidebar, select App embeds.

  4. Find Equate: Product Compare and toggle it ON.

  5. Click Save.

⚠️ Do not skip this step. Without the Equate app embed enabled, Equate's script never loads on your storefront and nothing below will work.

What you do next depends on your Boost version. Select one of the options below:

V2 or TURBO.

TURBO

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

  2. Locate the file product-item/product-info.liquid and add the following code where you want the Add to Compare button to appear:

<div id="{{ product.id }}"
class="sp-compare-custom-collection"
product-handle="{{ product.handle }}"
data-no-redirect="true"></div>

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

// Render Equate's compare component on Boost product items
function initialEquateElement() {
if (typeof window.compareGridRender === 'function') {
window.compareGridRender();
}
}

window.addEventListener('load', initialEquateElement);

// Keep the checkbox in step with Equate's button label
document.addEventListener('click', function (e) {
const wrapper = e.target.closest('.sp-compare-custom-collection');
if (!wrapper) return;
const input = wrapper.querySelector('input[type="checkbox"]');
const label = wrapper.querySelector('label');
if (!input || !label) return;
setTimeout(() => {
input.checked = /added/i.test(label.textContent);
}, 0);
});

4. Click Save and you're set.

V2

  • You are done. On V2, Equate places the Add to Compare button on your Boost product items itself, so there is no code to add. Go to Check it worked to confirm it is showing on your storefront.


Check it worked

  1. Open a collection page on your storefront, in a private browsing window so you see it the way a shopper does.

  2. Check that an Add to Compare control appears on your product items.

  3. Click it on two products, then open Equate's comparison table and check both products are listed.

  4. Apply a filter, then check the Add to Compare control is still on your product items.

⚠️ If the button does not appear, check these in order:

  • The Equate app embed from Step 2 is enabled on the theme that is actually published.

  • The placement method in Equate is still set to Manually.

  • You edited the files for the Boost version your theme actually uses.


Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.

Did this answer your question?