{"id":3113,"date":"2022-02-15T09:49:32","date_gmt":"2022-02-15T09:49:32","guid":{"rendered":"https:\/\/multisite.korebots.com\/SearchAssist\/?p=3113"},"modified":"2022-02-23T09:06:02","modified_gmt":"2022-02-23T09:06:02","slug":"customizing-results-views","status":"publish","type":"post","link":"https:\/\/multisite.korebots.com\/SearchAssist\/concepts\/designing-search-experience\/customizing-results-views\/","title":{"rendered":"Designing Results Views"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_grid cols_1 laptops-cols_inherit tablets-cols_inherit mobiles-cols_1 valign_top type_default stacking_default\"><div class=\"wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p><span style=\"font-weight: 400;\">SearchAssist allows you to configure <\/span>the Result display layouts with the Templates <span style=\"font-weight: 400;\">from a host of Results Templates <\/span> and the way in which the results should be displayed in more purposeful ways.<\/p>\n<p>You can configure the Result template for the following result types:<\/p>\n<ul>\n<li><b>Live Search<\/b> displays the results as the user is typing the query<\/li>\n<li><b>Conversational Search<\/b> displays the results in the chatbot with a link to view the full page results. This option is available only for the bottom-up search experience<\/li>\n<li><b>Full Page Results<\/b> display the complete results, on the main page in case of top-down search experience or as a slide-out page when the user selects the option in case of bottom-up search experience<\/li>\n<\/ul>\n<p>SearchAssist offers the following off-the-shelf Templates ready for deployment:<\/p>\n<ol>\n<li>List Template<\/li>\n<li>List Template with Images<\/li>\n<li>Grid Template<\/li>\n<li>Carousel Template<\/li>\n<\/ol>\n<h3 class=\"w-post-elm post_title entry-title\"><span class=\"ez-toc-section\" id=\"Configuring_Results_Views\"><\/span><span id=\"Customizing_Results_Views\" class=\"ez-toc-section\">Configuring Results Views<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w-post-elm post_content\">\n<section class=\"l-section wpb_row height_auto width_full\">\n<div class=\"l-section-h i-cf\">\n<div class=\"g-cols vc_row type_default valign_top\">\n<div class=\"vc_col-sm-12 wpb_column vc_column_container\">\n<div class=\"vc_column-inner\">\n<div class=\"wpb_wrapper\">\n<div class=\"wpb_text_column \">\n<div class=\"wpb_wrapper\">\n<p>SearchAssist allows you to choose a Results Template\u00a0 from a host of views and configuration the settings within each template.<\/p>\n<p>To configure the Search Results Template, take the following steps:<\/p>\n<ol>\n<li aria-level=\"1\">On the Templates page, by default, the Live Search tab is selected. Choose the search result you want to configure:\n<ul>\n<li aria-level=\"2\">Live Search <a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_Live_search1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3385 size-large\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_Live_search1-1-1024x409.png\" alt=\"\" width=\"640\" height=\"256\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_Live_search1-1-1024x409.png 1024w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_Live_search1-1-300x120.png 300w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_Live_search1-1.png 1902w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li aria-level=\"2\">Conversational, or<\/li>\n<li aria-level=\"2\">Full Page Results<a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-templates3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3386 size-medium\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-templates3-248x300.png\" alt=\"\" width=\"248\" height=\"300\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-templates3-248x300.png 248w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-templates3.png 665w\" sizes=\"(max-width: 248px) 100vw, 248px\" \/><\/a>Note: You cannot customize the Conversational Search for a\u00a0<i>Search Bar\u00a0<\/i>or top-down\u00a0search experience. It is applicable only for Assistant i.e., bottom-up conversational experience only.<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">You can configure from scratch or\u00a0<b>Copy Configuration<\/b>\u00a0of a previous setting from the dropdown list.<img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-3388 aligncenter\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_copy-config-1-300x149.png\" alt=\"\" width=\"300\" height=\"149\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_copy-config-1-300x149.png 300w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/DSE_Results_template_copy-config-1.png 585w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/li>\n<li aria-level=\"1\">Under the\u00a0<b>Results Classification<\/b>\u00a0section, you can choose some other field for result classification. Currently, It\u2019s set to\u00a0<i>dataContentType<\/i>\u00a0field and is non-editable.<\/li>\n<li aria-level=\"1\">Under the\u00a0<b>Results Appearance<\/b>\u00a0section, select an option:\n<ul>\n<li aria-level=\"2\">Order based on relevance<\/li>\n<li aria-level=\"2\">Custom order<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">Next, you can customize the template. Hover over the sample template and click\u00a0<b><b>Customize<\/b><\/b><a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-apperance-hover-customize.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3389 size-medium\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-apperance-hover-customize-300x230.png\" alt=\"\" width=\"300\" height=\"230\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-apperance-hover-customize-300x230.png 300w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_results-apperance-hover-customize.png 907w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\n<li aria-level=\"1\">On the Customize Template dialog box, select a template type from the\u00a0<b>Template Type<\/b>\u00a0dropdown list. For example, Grid or Carousel.<\/li>\n<li aria-level=\"1\">Under the\u00a0<b>Search Result Layout<\/b>\u00a0section, select an option like Tile with Text, Tile with Image, Tile with Centered Content, and Tile with Header.<\/li>\n<li aria-level=\"1\">If applicable turn on the\u00a0<b>Clickable\u00a0<\/b>option to search results clickable and map a field to the\u00a0<b>URL<\/b>.<\/li>\n<li aria-level=\"1\">Under the\u00a0<b>Search Result Mapping<\/b>\u00a0section, map the fields for\u00a0<b>Heading, Description, Image<\/b>\u00a0(where applicable).<\/li>\n<li aria-level=\"1\">You can\u00a0<b>Preview<\/b>\u00a0the results templates.<\/li>\n<li aria-level=\"1\">For Grid and Carousel templates, you can set the\u00a0<b>Text Alignment<\/b>\u00a0to\u00a0<b>Left Aligned\u00a0<\/b>or\u00a0<b>Center Aligned<\/b>.<\/li>\n<li aria-level=\"1\">Click\u00a0<b>Save<\/b>.<\/li>\n<li aria-level=\"1\">For Full Page Result, you can configure the Facet. Under the\u00a0<b>Facets<\/b>\u00a0section,\n<ul>\n<li aria-level=\"2\">Enable or disable the facets, by turning on or off the toggle<\/li>\n<li aria-level=\"2\">Once enabled you can set the position of the facet \u2013 left, right, or upper<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">Click\u00a0<b>Save<\/b>.<\/li>\n<\/ol>\n<p>If there are target URLs for each value in the field you are adding, then enable the\u00a0<b>Clickable\u00a0<\/b>option and then add the corresponding field name here.<\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_result-templates_clickable-URL.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3390 size-full\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/02\/design-experience_result-templates_clickable-URL.png\" alt=\"\" width=\"259\" height=\"186\" \/><\/a><br \/>\nYou can perform the following main customizations for search results presentation:<\/p>\n<ol>\n<li aria-level=\"1\"><b>Result Template<\/b>\u00a0can be set to be displayed as a:\n<ul>\n<li aria-level=\"2\">List of cards (List Template 1)<\/li>\n<li aria-level=\"2\">Plain list (List Template 2)<\/li>\n<li aria-level=\"2\">Block of lists (List Template 3)<\/li>\n<li aria-level=\"2\">Grid, or<\/li>\n<li aria-level=\"2\">Carousel<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">For the selected template you can set the\u00a0<b>Search Result Layout<\/b>\u00a0to one of the following:\n<ul>\n<li aria-level=\"2\">Tiled layout with just the Text<\/li>\n<li aria-level=\"2\">Tiled layout with Image and text, you can specify the field for the image<\/li>\n<li aria-level=\"2\">Tiled layout with Centered Content, or<\/li>\n<li aria-level=\"2\">Tiled layout with Header<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">For each layout, you can\u00a0<b>map fields<\/b>\u00a0to be displayed on the various areas applicable in the search result layout, like:\n<ul>\n<li aria-level=\"2\">Header<\/li>\n<li aria-level=\"2\">Description<\/li>\n<li aria-level=\"2\">URL, and<\/li>\n<li aria-level=\"2\">Image<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">The results can be static information or leading to a task or detailed pages, for this you can configure the results to be\u00a0<b>clickable<\/b>\u00a0or not:\n<ul>\n<li aria-level=\"2\">If results are set to be clickable, the results will act as a link to the value in the field that is mapped to the URL. This is the default option for Grid and Carousel templates and is non-editable<\/li>\n<li aria-level=\"2\">Results can be set to be non-clickable for list templates. In such cases, the results will be presented in an expanded\/collapsed state depending on the content in the response<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\"><b>Text alignment<\/b>\u00a0for grid and carousel templates can be specified as left or right.<\/li>\n<li aria-level=\"1\">Results can be\u00a0<b>classified<\/b>\u00a0based on a field. By default, the classification field is set to SourceType i.e the results will be categorized and displayed into Pages, FAQs, Actions, Structured Data, and Files. Currently, the classification field is non-editable.<\/li>\n<li aria-level=\"1\">Based on the category, the following layouts are set by default, which you can retain or modify:\n<ul>\n<li aria-level=\"2\">FAQ \u2013 Tile with Text<\/li>\n<li aria-level=\"2\">Pages \u2013 Tile with Image<\/li>\n<li aria-level=\"2\">Files \u2013 Tile with Header<\/li>\n<li aria-level=\"2\">Structured data \u2013 default template is not defined, you have to set a template,<\/li>\n<li aria-level=\"2\">Virtual Assistant Actions \u2013 Tile with Header, non-editable<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\">The\u00a0<b>order<\/b>\u00a0in which the results are presented can be set to:\n<ul>\n<li aria-level=\"2\"><i>Based on relevance<\/i> of the top most search result in each category<\/li>\n<li aria-level=\"2\"><i>Custom<\/i> \u2013 You can drag and drop the categories in any preferred order<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/section><section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_grid cols_1 laptops-cols_inherit tablets-cols_inherit mobiles-cols_1 valign_top type_default stacking_default\"><div class=\"wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"w-post-elm post_navigation layout_simple inv_false\"><a class=\"post_navigation-item order_first to_prev\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/concepts\/managing-relevance\/customizing-search-experience\/\" title=\"Designing Search Experience\"><div class=\"post_navigation-item-arrow\"><\/div><div class=\"post_navigation-item-meta\">Previous Post<\/div><div class=\"post_navigation-item-title\"><span>Designing Search Experience<\/span><\/div><\/a><a class=\"post_navigation-item order_second to_next\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/concepts\/experimenting-variants\/adding-experiments\/\" title=\"Adding Experiments\"><div class=\"post_navigation-item-arrow\"><\/div><div class=\"post_navigation-item-meta\">Next Post<\/div><div class=\"post_navigation-item-title\"><span>Adding Experiments<\/span><\/div><\/a><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"SearchAssist allows you to configure the Result display layouts with the Templates from a host of Results Templates and the way in which the results should be displayed in more purposeful ways. You can configure the Result template for the following result types: Live Search displays the results as the user is typing the query...","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[79],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/3113"}],"collection":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/comments?post=3113"}],"version-history":[{"count":14,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/3113\/revisions"}],"predecessor-version":[{"id":3576,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/3113\/revisions\/3576"}],"wp:attachment":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/media?parent=3113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/categories?post=3113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/tags?post=3113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}