Smart Search and Instant Search

In this article, we will walk you through the several steps that require non-technical knowledge to integrate Smart Search and Instant Search into GemPages.

Install the app from the Shopify app store

Step 1: Install the app from the Shopify app store.

Step 2: Click the Install app button in the appearing window.

Step 3: Configure Smart navigation in app settings by following its instructions. Read more about it here.

Filter on collections (Smart navigation) is only available for plans starting from $18/month. To enable this feature, you need to choose the Navigating through embedding HTML code into the Shopify template. After “Apply changes“, on each collection page, you will be able to filter only products in the corresponding collection.

Step 4: From the app dashboard, click Force re-indexation to index your collections. If the status is Up-to-date, it should work appropriately.

Step 5: In the Dashboard section, copy the API key.

Add the element in GemPages

Version 6

Step 1: Access the Library, by clicking on the Library button on the Toolbar of the editor page.

Step 2: In the pop-up window, under the Elements tab of the Third-party item, enter Smart Search and Instant Search on the Search box.

Toggle on the switch to add the element to your Editor.

Version 7

In Editor version 7, there’s no need to go through the above steps. You’ll find the Smart Search & Instant Search element conveniently located within the left sidebar of your editor, under the Shopify Apps category. To quickly find the app, you can utilize the search bar and locate it in minutes.

Set up Smart Search and Instant Search

Step 1: After the element is configured (usually in a few seconds), you should see it on the left sidebar. Then simply drag and drop the element to your page.

Please be well advised that currently, this app is applicable on collection pages only.

Step 2: Paste the API key that you copied earlier in the Your API key box of the left sidebar.

Step 3 (optional): If you wish to customize the variant’s content element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.

Step 4: Click Save and Preview, then Publish when all is set up. Click here to see an example of a Smart Search and Instant Search

That’s it! Smart Search and Instant Search will integrate with GemPages right away. If you’re interested in exploring more third-party apps that directly integrate with Gempages, you can check out this link. Otherwise, you can always integrate other apps into Gempages with our Liquid element.