Setting up and configuring facets¶

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.

Getting Started: Prerequisites¶

Requirement: Import a Product Feed.
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 documentation for detailed steps on importing and formatting your product feed.

Facet Configurator Access¶

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:

1. Go to the Admin tab and select the desired user.
2. In the user profile, navigate to the Experience section.
3. Enable the Can edit global facet configuration permission.
4. Click Save to confirm changes.
5. 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:

1. Facet Configurator
   Defines all available facets across all markets and sets default properties such as display type, sort order, and units.

2. Default Settings
   These are market-specific and apply to all pages with a primary product list and the search results page, forming the base configuration.

3. Pages
   All pages — whether individual pages with primary lists or the search results page — will use the Default Settings by default.

4. Overrides
   Overrides can be applied to:

5. Individual Pages with Primary Lists
6. 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 section above.

This is the source of truth for facet definitions across the application.

Note: 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 (e.g., 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 & Properties¶

For full configuration options, refer to the Schema Documentation.

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.

Query Parameter Formats¶

• Boolean, Value, Color & Size Facets:
  f.[facet_id]=value1|value2

• Range/Measurement Facets: You can set either a minimum value, a maximum value, or both.
  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.

<product_group key="1001">
  <brand>Asus</brand>
  <products>
    <product key="1001-100">
      <title>ROG Swift PG27AQDM</title>
      <custom_attributes>
        <screen_size>26.5"</screen_size>
        <panel_type>OLED</panel_type>
        <adaptive_sync>NVIDIA G-SYNC|AMD FreeSync Premium</adaptive_sync>
        <io_ports>DisplayPort 1.4|HDMI|USB 3.2 Gen 1 Type-A|Earphone jack</io_ports>
      </custom_attributes>
      <custom>
        <numbers>
          <refresh_rate_hz>240</refresh_rate_hz>
        </numbers>
      </custom>
      <variants>
        <variant key="1001-100-1">
          <list_price>820</list_price>
          <selling_price>820</selling_price>
        </variant>
      </variants>
    </product>
  </products>
</product_group>

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. Example response:

{
  "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:
  f.brand=Samsung|Dell
• Range:
  f.price.max=600
f.custom.refresh_rate_hz.min=120

curl -X GET \
'https://{cluster-id}.api.esales.apptus.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:

{
  "id": "price",
  "min": 600,
  "max": 820,
  "maxSelected": 600
},
{
  "id": "custom.refresh_rate_hz",
  "min": 60,
  "max": 240,
  "minSelected": 120
}