GemPages Integration Guide
📖 This article will help you learn how to integrate GemPages pagebuilder with Boost AI Search & Discovery.
On this page
About GemPages
1
App Information
- The app helps merchants create a store by simply dragging & dropping to design professional-looking & sales-boosting sites.
- App details: https://apps.shopify.com/gempages
2
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 above. 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


- 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");
const mainScriptSrc = `${url}/main.js?v=${Date.now()}`;
mainScript.setAttribute("defer", true);
mainScript.setAttribute("src", mainScriptSrc);
mainScript.setAttribute("id", "boost-sd-main");
document.body.appendChild(mainScript);
const vendorScript = document.createElement("script");
const vendorScriptSrc = `${url}/vendor.js?v=${Date.now()}`;
vendorScript.setAttribute("defer", true);
vendorScript.setAttribute("src", vendorScriptSrc);
vendorScript.setAttribute("id", "boost-sd-vendor");
document.body.appendChild(vendorScript);
const searchScript = document.createElement("script");
const searchScriptSrc = `${url}/search.js?v=${Date.now()}`;
searchScript.setAttribute("defer", true);
searchScript.setAttribute("src", searchScriptSrc);
searchScript.setAttribute("id", "boost-sd-search");
document.body.appendChild(searchScript);
const filterScript = document.createElement("script");
const filterScriptSrc = `${url}/filter.js?v=${Date.now()}`;
filterScript.setAttribute("defer", true);
filterScript.setAttribute("src", filterScriptSrc);
filterScript.setAttribute("id", "boost-sd-filter");
document.body.appendChild(filterScript);
if (hasRecommendationBlock) {
const recommendationScript = document.createElement("script");
const recommendationScriptSrc = `${url}/recommendation.js?v=${Date.now()}`;
recommendationScript.setAttribute("defer", true);
recommendationScript.setAttribute("src", recommendationScriptSrc);
recommendationScript.setAttribute("id", "boost-sd-recommendation");
}
</script>


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 support@boostcommerce.net.