> ## Documentation Index
> Fetch the complete documentation index at: https://product-discovery.developer.voyado.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Setting up and configuring facets
> Configure facets in Elevate from product feed attributes, using the Facet Configurator, Default Settings, page overrides, and Storefront API filtering.
Faceted navigation is a core capability of Elevate, designed to improve product discovery and streamline the shopping experience. It allows shoppers to filter products by attributes such as price, brand, color, size, and more — helping them quickly narrow their choices and find relevant items faster.
Facets act as filters that reduce friction in the customer journey and create a more intuitive, user-friendly interface. What distinguishes Elevate is the **extensive customization** it offers. Retailers can tailor filters to align with the complexity and structure of their catalogs, resulting in faster, more relevant experiences — and ultimately, **higher conversion rates and customer satisfaction.**
## Prerequisites
Facets are derived from the attributes defined in your product feed. This includes both standard and custom fields.
Ensure your feed includes all relevant data you want to expose as facets. Refer to the [Admin API](/elevate/docs/api/admin/overview) and [catalog import](/elevate/docs/integration/catalog-imports/catalog-imports) documentation for detailed steps on importing and formatting your product feed.
## Facet Configurator access
All facet configurations are edited in the Elevate app. All users can access the Facet Configurator to view existing settings. However, only users with the correct permissions can make edits in the view.
To enable editing rights for a user in the application:
Go to the **Admin** tab and select the desired user.
In the user profile, navigate to the **Experience** section.
Enable the **Can edit global facet configuration** permission.
Click **Save** to confirm changes.
**Refresh the application** for the updated permission to take effect.
## Facet workflow overview
A typical facet configuration in Elevate follows a layered and centralized approach:
Defines all available facets across **all markets** and sets default properties such as display type, sort order, and units.
These are **market-specific** and apply to all pages with a primary product list and the search results page, forming the base configuration.
All pages — whether individual pages with primary lists or the search results page — will use the Default Settings by default.
Overrides can be separately applied to:
* **Individual Pages with Primary Lists**
* **Autocomplete & Search Settings**
Overrides can also be applied within the Default Settings, but only at the individual facet level — for example, to change the sort order of values for a specific facet.
When used, overrides take precedence in their specific context — allowing for **flexibility** while maintaining **overall consistency**.
## Facet Configurator
**Location:** Experience → Pages → Settings → Facet Settings
**Access:** See the [Facet Configurator access](#facet-configurator-access) section above.
This is the source of truth for facet definitions across the application.
You can override settings for specific product areas as needed, without impacting the facets configured in the Facet Configurator.
### Behavior
* **Save & Publish** applies changes to all markets.
* **Modifications** (for example, display type, sort, unit) update all non-overridden instances.
* **Removing a facet** deletes it from the entire application. This action will impact:
* Default Settings
* Individual Pages with Primary Lists
* Autocomplete & Search Settings
* **Adding a facet** makes it available across the entire application.
### Understanding facet usage
The Used column shows how many times a facet is currently configured across the system. This includes:
* **Default settings**
* **Autocomplete & Search Settings**
* Individual pages with overrides
It helps you understand how widely a facet is used before making changes like editing or deleting it.
## Facet availability
Facet availability is determined by the attributes present in your product feed.
If a facet is marked as **Missing**, it means the corresponding attribute was previously configured but is no longer available in the current feed. Should the attribute reappear, the facet will automatically return to an **Active** state within the Facet Configurator.
Missing facets can be deleted if they are no longer needed.
Make sure to add and configure only relevant attributes that merchandisers are likely to use as facets when working with Pages, Slices, and other features.
## Facet types and properties
For full configuration options, refer to the [catalog import schema documentation](/elevate/docs/api/admin/v4/import/catalog).
| Type | Display As | Sort | Unit | Attributes |
| ----------- | ---------- | --------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Boolean | Checkbox | n/a | n/a | in stock |
| Measurement | Range | n/a | mm, cm, dm, m, in, ft, yd, ml, cl, dl, l, oz, gal, mg, g, hg, kg, lb | length, width, height, depth, volume, weight, customLengths |
| Value | Values | Alphabetic, Relevance | n/a | brand, department, pattern, name, series, gender, age, customLabels |
| Range | Range | n/a | n/a | price, items, rating, customNumbers |
| Color | Color | n/a | n/a | color (for example, red, blue, green) |
| Size | Size | Alphabetic | n/a | size (for example, S, M, L, 36, 38, 40) with automatic size cleaning |
## Facet usage contexts
### Default Settings
**Location:** Experience → Pages → Settings → Default Settings → Primary product list → Facets
Defines default facets used across all primary list pages and the search result page — unless specifically overridden.
### Autocomplete & Search
**Location:** Experience → Pages → Settings → Autocomplete & Search → Search Result Page → Override Facets
Overrides default facets for search results only. Use to provide more relevant filters based on user intent.
### Per page primary list
**Location:** Experience → Pages → Category & Landing pages → \[Page] → Primary List Settings → Override Facets
Provides fine-grained control by overriding facets for individual pages.
## Making facets visible on-site
Facets will only appear on the frontend after proper configuration:
1. Add the facet in the **Facet Configurator**
2. Include it in either **Default Settings** or page-specific overrides
3. Confirm inclusion in the **Storefront API** response
4. Render facets using frontend code based on API data
## Integration with Storefront API
The Storefront API holds facet data and supports filtering through query parameters. Shopper-selected facets must be passed in all subsequent requests. The query parameter formats are:
```txt title="Boolean, Value, Color & Size Facets" icon="code" theme={null}
f.[facet_id]=value1|value2
```
You can set either a minimum value, a maximum value, or both.
```txt icon="code" theme={null}
f.[facet_id].min=10
f.[facet_id].max=100
```
## Preview & testing
Use the **preview feature** in Elevate to validate facet functionality with real product data before launching live.
## Example: setting up facets for an electronics site
This example demonstrates how to set up product facets in Elevate for an electronics store — from importing product data to configuring and integrating facets.
### Step 1: create a product feed
Import a feed that includes all relevant attributes for filtering.
```json title="Example product feed" icon="code" expandable theme={null}
{
"replace": {
"key": "1001",
"productGroup": {
"products": {
"1001-100": {
"markets": [
"TEST"
],
"defaults": {
"url": "/products/1001-100",
"title": "ROG Swift PG27AQDM",
"brand": "Asus",
"customLabels": {
"panel_type": "OLED",
"adaptive_sync": ["NVIDIA G-SYNC", "AMD FreeSync Premium"],
"io_ports": ["DisplayPort 1.4", "HDMI", "USB 3.2 Gen 1 Type-A", "Earphone jack"]
},
"customLengths": {
"screen_size": {
"amount": 26.5,
"unit": "in"
}
},
"customNumbers": {
"refresh_rate_hz": "240"
}
},
"variants": {
"1001-100-1": {
"defaults": {
"stock": 3,
"sellingPrice": 820,
"listPrice": 820
}
}
}
}
}
}
}
}
```
### Step 2: configure facets
In the Experience app, set up the following attributes as facets:
* **in\_stock** — Becomes a checkbox automatically.
* **price** — Auto-configured as a range slider.
* **refresh\_rate\_hz** — Custom numeric; configure as a range slider.
* **brand** — Use Alphabetic sort.
* **screen\_size**, **panel\_type**, **adaptive\_sync**, **io\_ports** — Use Natural or Relevance sort.
### Step 3: site integration
Facets are returned by the Storefront API in a consistent format for both landing and search pages.
```json title="Example response" icon="code" expandable theme={null}
{
"facets": [
{
"id": "onlyInStock",
"label": "In stock",
"type": "CHECKBOX",
"count": 5
},
{
"id": "Brand",
"label": "Brand",
"type": "TEXT",
"sort": "ALPHABETIC",
"values": [
{ "id": "Asus", "count": 3 },
{ "id": "Dell", "count": 1 },
{ "id": "Samsung", "count": 1 }
]
},
{
"id": "price",
"label": "Price",
"type": "RANGE",
"min": 600,
"max": 820
},
{
"id": "custom.refresh_rate_hz",
"label": "Screen refresh rate (hz)",
"type": "RANGE",
"min": 60,
"max": 240
}
]
}
```
## Querying with facets
Include selected facets in query parameters:
**Value/Boolean**
```bash icon="terminal" theme={null}
f.brand=Samsung|Dell
```
**Range**
You can set either a minimum value, a maximum value, or both.
```bash icon="terminal" theme={null}
f.price.max=600
f.custom.refresh_rate_hz.min=120
```
Query example:
```bash icon="terminal" theme={null}
curl -X GET \
'https://{cluster-id}.elevate-api.cloud/api/storefront/v3/queries/landing-page?f.brand=Samsung&f.custom.refresh_rate_hz.min=120&f.price.max=600&f.onlyInStock=true'
```
The API response reflects selected filters:
```json title="Example response" icon="code" expandable theme={null}
{
"id": "price",
"min": 600,
"max": 820,
"maxSelected": 600
},
{
"id": "custom.refresh_rate_hz",
"min": 60,
"max": 240,
"minSelected": 120
}
```