{"id":1734,"date":"2022-01-07T09:19:06","date_gmt":"2022-01-07T09:19:06","guid":{"rendered":"https:\/\/multisite.korebots.com\/SearchAssist\/?p=1734"},"modified":"2022-01-17T06:19:29","modified_gmt":"2022-01-17T06:19:29","slug":"how-to-customize-results-views","status":"publish","type":"post","link":"https:\/\/multisite.korebots.com\/SearchAssist\/design-search-experience\/how-to-customize-results-views\/","title":{"rendered":"How to Customize 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;\">Results Template Configuration<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To configure the Search Results Template, take the following steps:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">On the Templates page, by default, the Live Search tab is selected. Choose the search result you want to configure:\u00a0\u00a0<\/span>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Live Search <a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_Live_search.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1997 size-large\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_Live_search-1024x409.png\" alt=\"\" width=\"640\" height=\"256\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_Live_search-1024x409.png 1024w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_Live_search-300x120.png 300w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_Live_search.png 1902w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Conversational, or\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Full Page Results.<a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_results-templates3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1998 size-medium\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_results-templates3-248x300.png\" alt=\"\" width=\"248\" height=\"300\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_results-templates3-248x300.png 248w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_results-templates3.png 665w\" sizes=\"(max-width: 248px) 100vw, 248px\" \/><\/a><\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Note: You cannot customize the Conversational Search for a <\/span><i><span style=\"font-weight: 400;\">Search Bar\u00a0<\/span><\/i><span style=\"font-weight: 400;\">or top-down<\/span><span style=\"font-weight: 400;\"> search experience. It is applicable only for Assistant i.e., bottom-up conversational experience only.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can configure from scratch or <\/span><b>Copy Configuration<\/b><span style=\"font-weight: 400;\"> of a previous setting from the dropdown list.<a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_copy-config.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1999 size-medium\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_copy-config-300x149.png\" alt=\"\" width=\"300\" height=\"149\" srcset=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_copy-config-300x149.png 300w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/DSE_Results_template_copy-config.png 585w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Under the <\/span><b>Results Classification<\/b><span style=\"font-weight: 400;\"> section, you can choose some other field for result classification. Currently, It&#8217;s set to <\/span><i><span style=\"font-weight: 400;\">dataContentType<\/span><\/i><span style=\"font-weight: 400;\"> field and is non-editable.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Under the <\/span><b>Results Appearance<\/b><span style=\"font-weight: 400;\"> section, select an option:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Order based on relevance<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Custom order<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Next, you can customize the template. Hover over the sample template and click <\/span><b>Customize<\/b><span style=\"font-weight: 400;\">.<a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_results-apperance-hover-customize.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2000 size-medium\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/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\/01\/design-experience_results-apperance-hover-customize-300x230.png 300w, https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_results-apperance-hover-customize.png 907w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">On the Customize Template dialog box, select a template type from the <\/span><b>Template Type<\/b><span style=\"font-weight: 400;\"> dropdown list. For example, Grid or Carousel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Under the <\/span><b>Search Result Layout<\/b><span style=\"font-weight: 400;\"> section, select an option like Tile with Text, Tile with Image, Tile with Centered Content, and Tile with Header.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If applicable turn on the <\/span><b>Clickable <\/b><span style=\"font-weight: 400;\">option to search results clickable and map a field to the <\/span><b>URL<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Under the <\/span><b>Search Result Mapping<\/b><span style=\"font-weight: 400;\"> section, map the fields for <\/span><b>Heading, Description, Image<\/b><span style=\"font-weight: 400;\"> (where applicable).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can <\/span><b>Preview<\/b><span style=\"font-weight: 400;\"> the results templates.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For Grid and Carousel templates, you can set the <\/span><b>Text Alignment<\/b><span style=\"font-weight: 400;\"> to <\/span><b>Left Aligned <\/b><span style=\"font-weight: 400;\">or <\/span><b>Center Aligned<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click <\/span><b>Save<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For Full Page Result, you can configure the Facet. Under the <\/span><b>Facets<\/b><span style=\"font-weight: 400;\"> section,<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Enable or disable the facets, by turning on or off the toggle<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Once enabled you can set the position of the facet \u2013 left, right, or upper.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click <\/span><b>Save<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">If there are target URLs for each value in the field you are adding, then enable the <\/span><b>Clickable <\/b><span style=\"font-weight: 400;\">option and then add the corresponding field name here. <a ref=\"magnificPopup\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_result-templates_clickable-URL.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2001 size-full\" src=\"https:\/\/multisite.korebots.com\/SearchAssist\/wp-content\/uploads\/sites\/18\/2022\/01\/design-experience_result-templates_clickable-URL.png\" alt=\"\" width=\"258\" height=\"187\" \/><\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can perform the following main customizations for search results presentation:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Result Template<\/b><span style=\"font-weight: 400;\"> can be set to be displayed as a:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">List of cards (List Template 1)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Plain list (List Template 2)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Block of lists (List Template 3)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Grid, or<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Carousel.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For the selected template you can set the <\/span><b>Search Result Layout<\/b><span style=\"font-weight: 400;\"> to one of the following:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Tiled layout with just the Text,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Tiled layout with Image and text, you can specify the field for the image,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Tiled layout with Centered Content, or<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Tiled layout with Header.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For each layout, you can <\/span><b>map fields<\/b><span style=\"font-weight: 400;\"> to be displayed on the various areas applicable in the search result layout, like:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Header<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Description<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">URL, and<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Image<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The results can be static information or leading to a task or detailed pages, for this you can configure the results to be <\/span><b>clickable<\/b><span style=\"font-weight: 400;\"> or not:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">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.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">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.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Text alignment<\/b><span style=\"font-weight: 400;\"> for grid and carousel templates can be specified as left or right.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Results can be <\/span><b>classified<\/b><span style=\"font-weight: 400;\"> based 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.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Based on the category, the following layouts are set by default, which you can retain or modify:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">FAQ \u2013 Tile with Text<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Pages \u2013 Tile with Image<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Files \u2013 Tile with Header<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Structured data \u2013 default template is not defined, you have to set a template,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Bot Actions \u2013 Tile with Header, non-editable. Refer <\/span><a href=\"https:\/\/docs.google.com\/document\/d\/1LUOp5axLijlg5ssro1rRtMImFJkT3Fo3\/edit#heading=h.77vlm6rwsyt\"><span style=\"font-weight: 400;\">Customizing bot actions display<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The <\/span><b>order<\/b><span style=\"font-weight: 400;\"> in which the results are presented can be set to:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><i><span style=\"font-weight: 400;\">Based on relevance<\/span><\/i><span style=\"font-weight: 400;\"> of the top most search result in each category. <\/span><\/li>\n<li style=\"font-weight: 400;\" 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<p>&nbsp;<\/p>\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\/design-search-experience\/how-to-customize-search-experience\/\" title=\"How to Customize 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>How to Customize Search Experience<\/span><\/div><\/a><a class=\"post_navigation-item order_second to_next\" href=\"https:\/\/multisite.korebots.com\/SearchAssist\/concepts\/analyzing-performance-concepts\/how-to-get-user-engagement-metrics\/\" title=\"Getting User Engagement Metrics\"><div class=\"post_navigation-item-arrow\"><\/div><div class=\"post_navigation-item-meta\">Next Post<\/div><div class=\"post_navigation-item-title\"><span>Getting User Engagement Metrics<\/span><\/div><\/a><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Results Template Configuration To configure the Search Results Template, take the following steps: On the Templates page, by default, the Live Search tab is selected. Choose the search result you want to configure:\u00a0\u00a0 Live Search Conversational, or\u00a0 Full Page Results. Note: You cannot customize the Conversational Search for a Search Bar\u00a0or top-down search experience. It...","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/1734"}],"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=1734"}],"version-history":[{"count":6,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/1734\/revisions"}],"predecessor-version":[{"id":2547,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/1734\/revisions\/2547"}],"wp:attachment":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/media?parent=1734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/categories?post=1734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/tags?post=1734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}