GemPages Integration Guide

GemPages helps build custom Landing Pages, Product Pages without coding skills. Here is our guide made for GemPages integration with Boost AI Search & Discovery app.

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

The current integration approach has some limitations:

On Shopify Theme Online Store 1.0, if the file  template/collection.liquid doesn't have the section/snippet file having our custom code, our automatic integration approach won't work and will require us to integrate manually. Kindly contact us for further assistance.

On  Shopify Theme Online Store 2.0, we have not integrated with GemPages app yet, however we can execute the integration manually, we are working on the automation and will have more info on this update soon. Kindly contact us if you need to integrate with Theme OS 2.0.

Because of some limitation of Gempages, the change of the integration will also affect the current live theme if the customers using Gempages on it.

Initial setup for integration (Automatic integration)

1

Go to the Tool menu > select Integration > Page builder tab.

2

Toggle ON GemPages Flexible Page Builder > click the Run theme integration button.

Page builder tab.

Integrate with Boost Product Filter & Search manually

Please continue following these steps only if you're using our app's V3 and just in case the automatic integration process does not work for your store after finishing the Initial setup for integration.
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: 
<div class="boost-sd__filter-block"></div>

<script>
	var boostPFSAppConfig = {
	    api: {
	    filterUrl: 'https://staging.bc-solutions.net/bc-sf-filter/filter',
	    searchUrl: 'https://staging.bc-solutions.net/bc-sf-filter/search',
	    suggestionUrl: 'https://staging.bc-solutions.net/bc-sf-filter/search/suggest',
	    productsUrl: 'https://staging.bc-solutions.net/bc-sf-filter/search/products',
	    analyticsUrl: 'https://lajhlox2el.execute-api.us-west-2.amazonaws.com/staging/e'
	    },
	    shop: {
	    name: '{{ shop.name | escape }}',
	    url: '{{ shop.url }}',
	    domain: '{{ shop.permanent_domain }}',
	    currency: '{{ shop.currency }}',
	    money_format: {{ shop.money_format | replace: "'", '"' | replace: "$", "$" | json }},
	    money_format_with_currency: {{ shop.money_with_currency_format | replace: "'", '"' | replace: "$", "$" | json }}
	    },
	    general: {
	    file_url: "{{ '' | file_url }}",
	    asset_url: "{{ 'boost-pfs.js' | asset_url }}",
	    collection_id: {{ collection.id | default: 0 }},
	    collection_handle: "{{ collection.handle }}",
	    collection_product_count: {{ collection.all_products_count | default: 0 }},
	    {% if template contains 'collection' and collection.handle %}
	    collection_count: {{ collection.products_count }},
	    {% endif %}
	    {% if request.page_type == 'product' %}
	    product_id: {{ product.id | default: 0 }},
	    {% endif %}
	    theme_id: {{ theme.id | default: 0 }},
	    collection_tags: {{ current_tags | json }},
	    current_tags: {{ current_tags | json }},
	    default_sort_by: "{{ collection.default_sort_by }}",
	    swatch_extension: "png",
	    no_image_url: "{{ 'boost-pfs-no-image.jpg' | asset_url }}",
	    search_term: "{{ search.terms | default: '' | url_encode }}",
	    template: "{{ template }}",
	    {%- comment -%} Get currencies {%- endcomment -%}
	    currencies: [
	        {%- for currency in shop.enabled_currencies -%}
	        {{- currency.iso_code | json -}}{%- if forloop.last != true -%},{%- endif -%}
	        {%- endfor -%}
	    ],
	    current_currency: {{- cart.currency.iso_code | json -}},
	    current_locale: {{- request.locale.iso_code | json -}},
	    isInitFilter: {{- boost_pfs_is_initfilter | json -}},
	    published_locales: {}
	    },
	    
	    {% if shop.metafields.bc-sf-filter.settings != blank %}
	    settings: {{ shop.metafields.bc-sf-filter.settings | strip_html }},
	    {% endif %}
	    
	    {% if shop.metafields.pfs-swatch-settings != blank %}
	    swatch_settings: {{ shop.metafields.pfs-swatch-settings | json | strip_html }},
	    {% endif %}
	    
	    {% if shop.metafields.boostpfs-settings.default-sort-order != blank %}
	    default_sort_order: {{ shop.metafields.boostpfs-settings.default-sort-order | json | strip_html }},
	    {% endif %}
	    
	    {% if block.settings.otherSettingsSearch != blank %}
	    searchV3: {{ block.settings.otherSettingsSearch }}
	    {% endif %}
	};

</script>
<script src="https://boost-cdn-staging.bc-solutions.net/theme/default/staging/vendor.js"></script>
<script src="https://boost-cdn-staging.bc-solutions.net/theme/default/staging/filter.js"></script>
4
Click Save.

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

If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at support@boostcommerce.net.

Related Articles