The plugin is ready to use with the block editor. When creating a new post or page, you can find the YITH blocks: Classic search and Overlay search. You can add them to your page with a simple click.
Classic search
When selecting Classic search, you can choose the input size from Small and Large. This block includes 3 other blocks that we will analyze as follows:
Input block
This is the block that manages the search field.
By selecting this block, you will be able to configure the following settings:
- Placeholder: enter the text for the placeholder of the search field;
- Border size: define the size (in px) for the search field border;
- Border radius: define the border radius (in px) for the search field;
- Color settings: choose the colors for the placeholder, text, background, background focus, border, and border focus;
- Submit search style: choose the style from Icon, Text, or Icon + text;
- Search icon: (available if Icon is selected) choose where to show the icon from right or left;
- Submit color settings: choose the colors for the icon, icon hover, background, background hover, border, and border hover;
- Submit button label: (available if Text or Icon + text is selected): enter the text to show as the submit button;
- Submit border radius: set the border radius (in px) for the submit button;
- Submit color settings: choose the colors for the text (and icon), text (and icon) hover, background, background hover, border, and border hover.
Icon + text example
Filled state block
This is the block that manages the search results shown when found.
By selecting this block, you will find 3 additional blocks (Related categories block, Product results block, and Related posts block) to configure the following settings:
- Label: enter the text to show for the related categories;
- Max related categories: set the maximum number of categories to show.
Related categories example
2. Products results block: this is the block that shows the products found as search results through which you can set:
- Max results to show: enter the maximum number of products to show;
- Layout: choose the layout from List or Grid;
- Info to show: enable/disable the product info to show in the results:
- Name: the name of products;
- Product title color: set the color for the product name;
- Price: the price of products;
- Price label: enter the text to show for the price;
- Image: the image of products;
- Image position: (only available with List layout) choose whether to show the product image on the left or on the right;
- Image size: set the size (in px) for the product images;
- Categories: the categories to which products belong;
- Stock: the stock status;
- SKU: the products SKU;
- Summary: the products summary;
- Limit summary length on/off: enable to set a limit for the summary length;
- Summary max words: set the maximum number of words to show for the product summary;
- Add to cart: the Add to cart button;
- No results text: enter the text to show when there are no results for the search;
- Show “View all results” link: the link to view all products;
- “View all results” text: enter the text to show for the link. To show the number of results, you can use the available placeholder: {total};
- Show “On Sale” badge: enable to show the on-sale badge;
- Show “Out of stock” badge: enable to show the out-of-stock badge;
- Show “Featured” badge: enable to show the featured badge;
- Hide “Featured” badge if the product is on sale: enable to hide the featured badge on on-sale products.
Info to show example
- Label: enter the text to show for the related posts;
- Max related posts: set the maximum number of posts to show;
- Background color: set the color for the background.
Related posts example
Empty state block
This is the block that manages the search field when still empty.
By selecting this block, you will find 2 additional blocks (Search history and Popular searches block) to configure the following settings:
- Search history: this is the block that shows the latest searches made by the user through which you can configure the following settings:
- Label: enter the text to show for the search history;
- Max latest search items: set the maximum number of results to show for the latest searches.
Please note: the search is registered only if the user visits the product page.
2. Popular searches block: this is the block that shows the most popular searches made by all the users through which you can configure the following settings:
- Label: enter the text to show for the popular searches;
- Searches to show: set the maximum number of results to show for the popular searches.
Popular searches example
Overlay search
When selecting Overlay search, you will be able to set 2 additional blocks to manage the settings of the search icon and overlay content.
Icon trigger block
This block adds the search icon that will trigger the overlay when clicking on it. You can set the color and color hover of the icon through the related options.
Icon on the frontend
Overlay content
This block allows managing the overlay when users click on the search icon. It includes 3 other blocks that we will analyze as follows:
- Input block
- Filled state block
- Empty state block
Input block
This is the block that manages the search field.
- Placeholder: enter the text for the placeholder of the search field;
- Border size: define the size (in px) for the search field border;
- Border radius: define the border radius (in px) for the search field;
- Color settings: choose the colors for the placeholder, text, background, background focus, border, and border focus.
Example
Filled state block
This is the block that manages the search results shown when found.
By selecting this block, you will find 3 additional blocks (Related categories block, Related posts block, and Overlay product results) to configure the following settings:
- Related categories block: this is the block that shows the related categories through which you can set:
- Label: enter the text to show for the related categories;
- Max related categories: set the maximum number of categories to show.
Example
2. Related posts block: this is the block that shows the related posts through which you can set the following options:
- Label: enter the text to show for the related posts;
- Show results related to: select Post and/or Pages;
- Max related posts: set the maximum number of posts to show;
- Background color: set the color for the background.
Example
3. Overlay products results block: this is the block that shows the products found as search results through which you can set:
- Grid layout: here you can set the number of columns and rows to show;
- No results text: enter the text to show when there are no results for the search;
- Content: enable/disable the info to show in the results:
- name
- price
- image
- Add to cart
Example
Empty state block
This is the block that manages the search field when still empty.
By selecting this block, you will find 2 additional blocks (Search history and Popular searches block).
- Search history: this is the block that shows the latest searches made by the user through which you can configure the following settings:
- Label: enter the text to show for the search history;
- Max latest search items: set the maximum number of results to show for the latest searches.
Please note: the search is registered only if the user visits the product page.
2. Popular searches block: this is the block that shows the most popular searches made by all the users through which you can configure the following settings:
- Label: enter the text to show for the popular searches;
- Searches to show: set the maximum number of results to show for the popular searches.
Examples
