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

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

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>

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