Overview

Facets, also referred to as filters, are a very common and practical way to provide options for drilling down on a specific category, manufacturer or dimension of a product set. These facets are typically provided within the left hand navigation of the search results.

It's often helpful though to provide a facet navigation before getting to all of the products, especially if there are many products or facet options. It's also helpful to provide an image along with the facets for visibility. This visual facet approach can reside within the facet structure on the left:

These visual facets can also be presented on the top of the page even before the rest of the products are presented:

The examples above are for a "flat" navigation but there are also use cases where the facets are hierarchical - in that case you can check out the Hierarchical Navigation code samples in this guide. This section will provide examples and instructions for both use cases.

As with other sections in the sandbox playground, you can start with the QuickStart data we've provided and this section is assuming you have gone through an indexing process already.

Visual Facet Type

HawkSearch has a type of facet that supports using images or even hexadecimal values for a visual facet navigation. The field type is called "swatch" and it is an option when creating a facet. For this demonstration we'll use the category field/facet in the QuickStart data, but it's helpful to start with a new copy of both of those to focus on this one feature.

Begin by copying the field called "category" and name it "visual_category." Then copy the category facet and call it "Visual Facet." Change the Facet Type to "Swatch" and point it to the associated field "visual_category."

You'll see that you can add images at the bottom of this page:

The images are listed within the facet:

Config Option	Description
Value	This is critical - it is the value that will be passed in the search request. For example if the image is a Jacket to represent a facet value for Jacket, the value would be "Jacket." Note that by default, Rapid UI expects that each value in your indexed data has a visual representation, otherwise it will not know what to use visually for the facet value.
Is default	One of visual facets must be set to "Is default" - it does not impact the initial results.
Input type	This is either an image or a hexadecimal value which can be entered or picked from a color picker
Image source	If the input type is Image upload then you can either upload it and and HawkSearch will host the image or you can enter the URL to the image.
Image	This is the option to upload the image if you can not host it and provide a URL.

API Option

You can also pass in the values for the visual facet by API:

{
    "Name": "Visual Facet",
    "FacetType": "swatch",
    "FieldType": "string",
    "DisplayType": "scrolling",
    "MaxCount": 100,
    "SortBy": "Score",
    "Field": "visual_category",
    "ExpandSelection": "TRUE",
    "IsCurrency": "FALSE",
    "IsNumeric": "FALSE",
    "IsSearch": "FALSE",
    "IsVisible": "TRUE",
    "IsCollapsible": "TRUE",
    "IsCollapsedDefault": "FALSE",
    "MinHitCount": 1,
    "ScrollHeight": 150,
    "ScrollThreshold": 10,
    "TruncateThreshold": 0,
    "SearchThreshold": 0,
    "SortOrder": 1,
    "ShowSliderInputs": "TRUE",
    "SwatchData": "[{\"Value\": \"Backpacks\",\"AssetName\": \"\",\"AssetUrl\": \"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/ALEIA_32_JAIDEN_GREEN.jpg\",\"IsDefault\": true,\"Color\": \"\"},{\"Value\": \"Hats\",\"AssetName\": \"\",\"AssetUrl\": \"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/TNF-Youth-Standard-Issue-Beanie-Black-Grey.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Jackets\",\"AssetName\": \"\",\"AssetUrl\": \"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/BOYS-GLACIER-14-ZIP-Medium-Grey-heather.jpg\",\"IsDefault\": false,\"Color\": \"\"}, {\"Value\": \"Pants\",\"AssetName\": \"\",\"AssetUrl\": \"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/Rockaway-Pants_Asphalt-Grey.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Shirts\",\"AssetName\": \"\",\"AssetUrl\": \"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/WOMENS-LONG-SLEEVE-REAXION-AMP-TEE-RADIANT-ORANGE-WHITE-MULTI.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Gloves\",\"AssetName\": \"\",\"AssetUrl\": \"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/YOUTH-REVELSTOKE-ETIP-GLOVES-TNF-Black.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Kayaks\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Mamba_8.6_solar11.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Footwear\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Womens-Around-Town-Thong_Blue.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Socks\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/womens-goodhew-dotty-black-474907_1000_45.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Water Bottles\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Insulated-Wide-20oz-Brushed-Stainless.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Gloves & Mittens\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Kombi-Hustle-Mitt-White_Gunmetal.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Accessories\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/rfidsafe_v200_10565100_black_main.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Insect Repellent\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/BENS-30-125OZ-PUMP.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Luggage\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Pack-It-Specter-Starter-Set-Brillant-Blue.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Kids\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Patagonia-Baby-Pita-Pocket-Mittens-Deep-Sea-Blue.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Casual Shirts\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/THISTLETOWN-PARK-POLO-II--Surplus-Green.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Shorts\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/WOMENS-PILSNER-PEAK-SHORT-Pulse.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Action Cameras\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/AHDWH-301_newmain1.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Hats & Headware\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Pistil-maven-cap-Camel.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Cookware\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Alpine_Fry_Pan.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"First Aid\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/EK-3.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Headgear\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/main_jr_thick_n_thin_headliner_prints-Peace.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Helmet and Goggle Accessories\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Zipquix-Zipper-Pulls-20190.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Boots\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Kamik-Solstice-Navy.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Air Mattresses\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/BaseCamp_AF.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Chairs\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/BeachChair_SwedishBlue_2-zm.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Coffee & Tea\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Grinder.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Compasses\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Guide-426-Orange.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Freeze-Dried Food\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/50119_Beef_Stroganoff_with_Noodles_(1)_540x675.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Goggles\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Daredevil-RC36-Cobalt.jpg\",\"IsDefault\": false,\"Color\": \"\"},{\"Value\": \"Shoes\",\"AssetName\": \"\",\"AssetUrl\": \"https://dev.hawksearch.net/assets/1/14/DimThumbnail/Nohea-Lace-Mesh_RockRock1.jpg\",\"IsDefault\": false,\"Color\": \"\"}]"
}

📘
Important Note
If you add or remove facet options - for example a new category, then on your next index, you must delete the facet and recreate it with the new values for the swatch.

Hierarchical Visual Facets

If you are using the Hierarchy API you can add a custom field for the image URL. In this case the value is already covered in the existing payload.

POST https://indexing-dev.hawksearch.net/api/hierarchy/upsert

{ 
  "IndexName": "name.xxx.xxx",
  "Hierarchies": [
  {
  "HierarchyId":"30",
	"Name":"Jackets",
	"ParentHierarchyId":"20",
	"IsActive":true,
  "SortOrder":3,
  "Custom":"https://hawksearch-sales.demos.hawksearch.com/products/sandbox/BOYS-GLACIER-14-ZIP-Medium-Grey-heather.jpg"
  }
  ]
}

Visual Facets - Image Based Facet Navigation

Overview

Visual Facet Type

API Option

📘
Important Note

Hierarchical Visual Facets

Overview

Visual Facet Type

API Option

📘Important Note

Hierarchical Visual Facets

📘
Important Note