📖 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.
App details: https://apps.shopify.com/gempages
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].