Setting up and configuring facets¶

A core feature of Elevate is faceted navigation, which improves the shopping experience by allowing customers to filter products by attributes like price, brand, color, and size.

Facets are filters that help users narrow down large product catalogs into relevant results. By enabling facets, an e-commerce site can provide dynamic, intuitive filters, making it easier for customers to find exactly what they’re looking for with minimal effort.

Facets in Elevate are highly customizable to meet the unique needs of any product catalog, delivering a seamless and efficient shopping experience. This not only enhances user satisfaction but also drives higher conversion rates by making product discovery faster and more relevant.

To use facets on your site you need to create and import a product feed, configure which attribute that should be facets and expose them on your site, on search and landing pages.

Create and import a product feed¶

The product feed is crucial since it contains all the product data that Elevate uses for facets.

• Creating the feed: Ensure the product feed includes all the required attributes as well as custom attributes that are relevant for your industry. The feed should be XML for Admin V3 or JSON for Admin V4.
• Importing the feed: Detailed instructions for how to upload the submission to Elevate are available in the Admin API.

Configure facets in the Experience app¶

Once the product feed has been uploaded, it is possible to configure facets.

Access Facet Settings¶

To manage default facets in the Elevate Experience app, follow these steps:

1. Open the Elevate Experience app.
2. Navigate to the Settings under the Pages menu.
3. Select Default Settings.

In this section, you can create and manage default facets for your product listings. Locate the Primary Product List section, where you can edit the facets.

To edit:

• Click Edit next to the fixed facets, which will open the Facet Configurator window.
• From here, you can add new facets based on any product attribute.
• Each added facet can be individually customized within the configurator.

Facet Types¶

Elevate supports various facet types, including:

• Boolean Facets: Used for e.g. stock availability.
• Size Facets: Handle product sizes with automatic size cleaning.
• Measurement Facets: Manage units for measurements like volume, weight or length.
• Value Facets: For predefined values like brand or custom attributes. These are visualised as individual values that shoppers select to refine the query selection.
• Range Facets: Numerical values like price or the number of items in a package, can be visualized as sliders. A shopper can select a range of values rather than select each individual value in a list.

Boolean, size, and measurement facets are automatically detected, as are value facets derived from text-based custom attributes. However, custom attributes with numerical values require manual configuration. These attributes can be set up as either Value or Range facets.

Sort Order and Special Configuration¶

Sorting options vary based on the facet type. For text-based value facets, you can choose between Alphabetical, Relevance, or Natural sorting. For numerical value facets, the options are Natural or Relevance. Certain predefined attributes, such as price, brand, size, and availability, offer additional sorting options based on their specific context. Measurement facets, like length or volume, are range sliders, where you define the measurement unit instead of the sort order.

Facet override¶

Facets configured at the global level can be customized for individual pages. To override facet settings for a specific page, follow these steps in the Experience app:

Navigate to Page/Category & Landing Pages and locate the page where you want to apply the overrides. Click on the page, then go to List Settings. In the popup window, find the Override Facets section. Activate the override feature, allowing you to modify the list of fixed facets. Once activated, you can edit the facets for this page and any sub-pages using the same method described earlier. This allows for flexible customization, ensuring each page can display the most relevant facets based on its specific content.

Search pages can be customized in the same way. To override search page settings, go to Pages/Settings and click the Edit button for Auto-complete & Search Settings. In the popup window, navigate to the Facet Override section and proceed as described previously.

Expose Facets on Site Pages¶

Facets should be exposed on landing pages using the Storefront API. Facets are populated in the query results and can be specified subsequent request as query parameters. Refer to the Facet Selections for detailed instructions on setting facet values for each type.

Testing and Optimization¶

• Test Facets: Use the preview feature to verify how facets perform with real product data.
• Optimize: Adjust facet order and types based on user interaction data and performance to ensure the best possible shopping experience.

Example: Setting up facets for an electronics site¶

Here’s an example of how to set up facets for an electronics site using Elevate. This includes creating a product feed, configuring various facets.

Create a product Feed¶

<!-- some attributes are omitted for brevity -->
<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_groups>

Configure facets¶

Once the product feed is imported, configure the following attributes as facets in the Experience app by selecting them from the fixed facet list:

• in stock - Automatically becomes a checkbox.
• price - Automatically becomes a range slider.
• refresh_rate_hz - Since it's a custom typed number it can be visualized as a range slider by selecting the Range option.
• brand - Set up with the sort order set to Alphabetic.
• screen_size, panel_type, adaptive_sync, and io_ports - Set up with the sort order set to Natural or Relevance.

Site integration¶

Below is an example of some of the, above mentioned, facets being returned in a Storefront API request. Facets have the same structure for landing- and search-page requests.

{
   // some fields are omitted for brevity
  "primaryList": {
    "totalHits": 5,
    "facets": [
      {
        "selected": false,
        "count": 5,
        "id": "onlyInStock",
        "label": "In stock",
        "type": "CHECKBOX"
      },
      {
        "values": [
          {
            "id": "Asus",
            "label": "Asus",
            "selected": false,
            "count": 3
          },
          {
            "id": "Dell",
            "label": "Dell",
            "selected": false,
            "count": 1
          },
          {
            "id": "Samsung",
            "label": "Samsung",
            "selected": false,
            "count": 1
          },
        ],
        "sort": "ALPHABETIC",
        "selectedCount": 0,
        "id": "Brand",
        "label": "Brand",
        "type": "TEXT"
      },
      {
        "min": 600,
        "max": 820,
        "id": "price",
        "label": "Price",
        "type": "RANGE"
      },
      {
        "min": 60,
        "max": 240,
        "id": "custom.refresh_rate_hz",
        "label": "Screen refresh rate (hz)",
        "type": "RANGE"
      },
      {
        "values": [
          {
            "id": "OLED",
            "label": "OLED",
            "selected": false,
            "count": 2
          },
          {
            "id": "TN",
            "label": "TN",
            "selected": false,
            "count": 1
          },
          {
            "id": "IPS",
            "label": "IPS",
            "selected": false,
            "count": 2
          },
        ],
        "sort": "RELEVANCE",
        "selectedCount": 0,
        "id": "custom.panel_type",
        "label": "Panel Type",
        "type": "TEXT"
      }
    ]
  }
}

Each selected facet should be included in the query parameter of a request to Elevate. The format for value, size and boolean facets is f.[id]=[value_id|value_id_2], where multiple selected values from one facet should be pipe separated. The format for range and measurement facets is f.[id].min=[min] and f.[id].max=[max]. Min or max can be omitted in a query, e.g., it is possible to set only the minimum value in a request.

The following is an example of a landing page query with facet parameters where:

• brand facet has the selected value Samsung, to get the screens from Samsung.
• custom.refresh_rate_hz has a min value selected but no max, filtering out screens with slower refresh rate.
• price has a max value, filtering out the most expensive screens.
• onlyInStock is set to true, to only see the screens that are available in stock.

The same syntax applies to search queries. Note that non-facet request parameters have been omitted for brevity.

#!/bin/bash
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'

      .
      .
      .
      {
        "min": 600,
        "max": 820,
        "maxSelected": 600,
        "id": "price",
        "label": "Price",
        "type": "RANGE"
      },
      {
        "min": 60,
        "max": 240,
        "minSelected": 120,
        "id": "custom.refresh_rate_hz",
        "label": "Screen refresh rate (hz)",
        "type": "RANGE"
      },
      .
      .
      .