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.
A/ Start by creating a Design and Content for the Live Search :
Once you finish creating your design, click **Publish.**
B/ And then create a Design and Content for the Search Page:
Once you finish creating your design, click Use This Design.
You can easily change your designs and content later, under Designs and Content in the left menu.
Change Design
[_
Change Content
2. Activate the Live-Search and Search Page #
The next steps will guide you through the steps needed to activate the Live Search and the Search-Page Functions:
Please bare in mind even if the next steps are already checked with a green icon as if they were installed - they are not - you still need to click and follow the steps:
A/ Install the Live-Search and Search Page
In the WooCommerce module both Live-Search and Search Page are enabled under the same steps, therefore you can click either on:
- Install your auto-complete search
- Install your search page
Follow all the Steps under the section: Enable search and live-search
8. You can also choose various settings for the live-search, including choosing a custom class or ID of an input field to attach the live-search to. This is done in Live Search Input Selector
- To identify your webshop’s Live Search Input Selector, Inspect the search box the website, and find the ID and/or class associated with the input. In the example below, the Input Selector class is " search-field".
An ID will be marked with a “#” symbol before the ID, and a class will be marked with “.” before the class. Be sure to include this notation before the ID/class like the example above with “.search-field”.
Once you’ve identified the ID or class for your search box, insert this in “Live Search Input Selector” within the Clerk plugin in WooCommerce.
9. Click Save Settings.
After enabling the features, you will be able to see Clerk.io’s SEARCH function on your webshop.
Facets #
With faceted search, you can create filters on your Clerk Search Page that make it easier for your customers to navigate through search results.
Make sure to update to the latest version of the Clerk plugin before following this guide.
First, go to the Clerk plugin settings:
Next, scroll down to the headline called Faceted Navigation and customize your filters:
Attributes: The names of the attributes of the products you send to Clerk as they are written (exactly).
Title: A title which you choose freely. This is shown as a header on the filter.
Position: Regulate which filters are shown first.
Show: Activate and deactivate the filter with this tick-box.
To make the changes take effect, scroll to the bottom of the page and press Save:
