Getting Started with Search on JTL

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.

• The Facets will add faceted navigation so your customers can filter the results on the search 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.

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

Click Publish when you are happy with the styling.

B/ 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. You can also refer to this guide Template Design to use in Clerk for design templates to use.

Change Design:

Change Content:

2. Add Live Search

Now that you made your content and designs. This is how it should look:

Add the live search contents name into the fields like this:

Enable the live search, add the contents name under Clerk TemplateName and make sure to have the class selector for you input field. This will make sure the live search has a field it can render from.

Add Search Page

Now that you made your content and designs. Now add the live search contents name into the fields like this:

Enable the search page and add the contents name under Clerk TemplateName.

Add Facets

Here you will have to create a facet design:

• Create a design in Clerk (Clerk.io backend under Search → Designs)
• After creation, an ID must be stored in the plugin backend ( Plugins → Installed Plugins → S360 Clerk → click on gear → Settings → Facet Design ).