Skip to main content
GemPages Integration Guide

This article will help you learn how to integrate GemPages pagebuilder with Boost AI Search & Discovery.

Thomas Ta avatar
Written by Thomas Ta
Updated over a week ago

๐Ÿ“– This article will help you learn how to integrate GemPages pagebuilder with Boost AI Search & Discovery.


About GemPages

App Information

  • The app helps merchants create a store by simply dragging & dropping to design professional-looking & sales-boosting sites.

GemPages Integration Function

  • Easily create professional, responsive and code-free websites


How to integrate GemPages with Boost AI Search & Discovery

โš ๏ธ This feature only works with Boost AI Search & Discovery V2 and V3. To find out which version of our app your store's current theme is installed with, please follow this article.

Integrate with Boost AI Search & Discovery manually

1. Login to Gempages admin > Collection Pages > Click the Create new template button for collection page (or you can go to the existed Collection page that you'd like to have our app integrated).


โ€‹

2. In the page editor, add a Liquid element to the page (name it after our app for later check if needed)


โ€‹

3. Paste this code snippet into the Liquid's Template tab:

  • If you're using Boost AI Search & Discovery V2, please paste this snippet:

{& include 'boost-pfs-integration' %}

โš ๏ธ For V2 users, please go to your Theme's code editor and search for this file: boost-pfs-integration.

Only if this file exists, adding the code snippet above for integration will work. Else, don't hesitate to contact our support team for further assistance.

  • If you're using Boost AI Search & Discovery V3, please paste this snippet:

<div class="boost-sd__filter-block"></div> 
<!-- Paste your HTML Boost recommendation placeholder here -->

<script>
const themeInfo = window.boostSDAppConfig?.themeInfo || {
boostThemeLib: "default",
boostThemeLibVersion: "latest"
};
const theme = themeInfo.boostThemeLib || "default";
const version = themeInfo.boostThemeLibVersion;
const url = `${window.boostSDAppConfig?.api?.cdn}/theme/${theme}/${version}`;

const hasRecommendationBlock = !!document.querySelectorAll(`[id^='boost-sd-widget-']`);

const mainScript = document.createElement("script");
mainScript.setAttribute("defer", true);
mainScript.setAttribute("src", `${url}/main.js?v=${Date.now()}`);
mainScript.setAttribute("id", "boost-sd-main");
document.body.appendChild(mainScript);

const vendorScript = document.createElement("script");
vendorScript.setAttribute("defer", true);
vendorScript.setAttribute("src", `${url}/vendor.js?v=${Date.now()}`);
vendorScript.setAttribute("id", "boost-sd-vendor");
document.body.appendChild(vendorScript);

const searchScript = document.createElement("script");
searchScript.setAttribute("defer", true);
searchScript.setAttribute("src", `${url}/search.js?v=${Date.now()}`);
searchScript.setAttribute("id", "boost-sd-search");
document.body.appendChild(searchScript);

const filterScript = document.createElement("script");
filterScript.setAttribute("defer", true);
filterScript.setAttribute("src", `${url}/filter.js?v=${Date.now()}`);
filterScript.setAttribute("id", "boost-sd-filter");
document.body.appendChild(filterScript);

if (hasRecommendationBlock) {
const recommendationScript = document.createElement("script");
recommendationScript.setAttribute("defer", true);
recommendationScript.setAttribute("src", `${url}/recommendation.js?v=${Date.now()}`);
recommendationScript.setAttribute("id", "boost-sd-recommendation");
document.body.appendChild(recommendationScript);
}
</script>

4. Click Save.


โ€‹

5. Finally, hit Publish to start rendering your newly added code to your page.


Integrate Boost Recommendation with Gempages

After finishing integrating Gempages with Boost AI Search & Discovery, if you'd like to display your Boost Recommendation widget whilst using Gempages, follow the instructions below:

  • Step 1: Go to Boost AI Search & Discovery Dashboard > Recommendation > Manage Recommendations Widget.

  • Step 2: Find the widget you'd like to add, copy its widget ID. For example:

  • Step 3: Paste the widget ID into this code snippet replacing {{- widgetId -}}

<div id="boost-sd-widget-{{- widgetId -}}"></div>

For example:

<div id="boost-sd-widget-homepage-326800"></div>
  • Step 4:

    • Add it below this line of code

<div class="boost-sd__filter-block"></div>

For example, we will have it look like this:

<div class="boost-sd__filter-block"></div> <div id='boost-sd-widget-collectionpage-1123'></div>

Having troubles following the instructions? Don't hesitate to contact our support team at [email protected].

Did this answer your question?