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.

Related Articles