clerk.io

Omnisearch #

A single full-page window that serves your visitors with the results that are most likely to convert. Further information can be found in the main Omnisearch guide

For Single Page Applications (SPAs), an additional feature must be enabled to integrate Omnisearch. The feature, SPA Auto Detect Changes, can be activated by navigating to my.clerk.io > Settings > Features.

Instant Search & Search Page #

Clerk.io’s search function consists of two parts:

The Live-Search dropdown that is displayed when a customer starts typing.
The Search Page which displays all matching products on a full page.

From the main menu start by clicking on Getting Started:

1. Create Standard Designs and Content #

The first thing you need to do, is create Standard Designs and Content.

You can use the Setup guide entitled SEARCH under the Getting Started option, to quickly create Designs and Content that have the same color scheme and style as your webshop.

Start by creating a Design and Content for the Live Search :

Click Publish when you are happy with the styling.

And then create a Design and Content for the Search Page:

Click Publish when you are happy with the styling.

You can easily change your designs and content later, under Designs and Content in the left menu.

Change Design

Change Content

2 Configuration VTEX Search (Live search & Search page) #

On your store theme, Add clerkiopartnerdk.integration-vtex 1.x as a theme peerDependency in the manifest.json file:

"peerDependencies": {
    "clerkiopartnerdk.integration-vtex": "1.x"
}

Add the clerkio_searchpage block in the dedicated landing search page.

{
  "responsive-layout.desktop#searchpage": {
    "children": ["clerkio_searchpage"]
  }
}

The App will also create a dedicated search page route on /clerk-search?searchTerm=__QUERY__. This route already has the clerkio_searchpage block added in the body.

The App also creates a component search input field for use in your header: clerkio_searchinput. By default this input field takes you to the dedicated page route created by the app.

After enabling the features, you will be able to see Clerk.io’s SEARCH function on your webshop.