Add a Facet Filter to a SuiteCommerce Product Listing

Add a custom item field as a filter on a SuiteCommerce product listing: index it in Facet Fields on the website record, then name it and set its behavior in SuiteCommerce Configuration.

The quick answer

A SuiteCommerce filter, or facet, is set up in two places: the website record and SuiteCommerce Configuration. First, go to Commerce > Websites > Website List, edit the website, open Search Index > Facet Fields, add the item field, and save. That indexes the field for filtering and starts a search index update. Then go to Commerce > Websites > Configuration, select the website and domain, click Configure, and on Shopping Catalog > Facets add a line with the field ID, the heading shoppers should see, and a behavior such as multi for checkboxes. Skip the first step and nothing shows up. Skip the second and the filter works but is headed with the raw field ID.

The screenshots show sample data. Person and company names are fictional. Use your own site, field, and values when following the steps.

Before you start

In this example, Larkspur Industrial Supply runs a SuiteCommerce web store called Larkspur Supply on the domain shop.larkspursupply.example. The Shop page lists 8 products from three brands: Ashgrove, Corriden, and Tollan. Every item already has a List/Record custom item field called Brand, with ID custitem_web_brand. The site administrator uses the Administrator role.

You need a SuiteCommerce website, a role that can edit the website record and SuiteCommerce Configuration, and an item field with controlled values to filter by. A List/Record custom item field works well. Free-form text fields can't be facets, and a field with a different value on almost every item, like a SKU, makes a poor one. The field also needs values on the items you sell. The field doesn't have to be in a field set; field sets only control which item data the storefront displays.

Labels, templates, and facet options can differ by SuiteCommerce release and theme, and SuiteCommerce Advanced sites can override facet behavior in code. The steps below follow the standard SuiteCommerce Configuration record.

01. Check the Shop page first

Open the web store and click Shop. The listing shows 8 Products, and each product name starts with its brand. The Narrow By column offers only Price. A shopper who wants one brand has to read every card.

Before: 8 Products, and Price is the only filter under Narrow By.

02. Open the Facet Fields sublist

In NetSuite, go to Commerce > Websites > Website List.

Commerce > Websites > Website List.

The list has one site, Larkspur Supply, with Type SuiteCommerce. Click Edit on its row.

Click Edit on the website you want to change.

On the website record, click the Search Index subtab, then Facet Fields. Search Index has three sublists. Search Fields decide what the search bar matches and how results rank. Facet Fields decide which item fields shoppers can filter by. Sort Fields decide which fields shoppers can sort by. In this example, Facet Fields has one line, Online Price with Field ID pricelevel5. That line is the Price filter on the Shop page.

Facet Fields starts with one line: Online Price, the Price filter.

03. Add the field as a facet field

In the empty line, open Facet Field Name and select your field. Custom fields are marked (Custom), so here it's Brand (Custom). The list shows only the fields your account can use as facets.

Custom fields show (Custom) after their name.

Field ID fills in as custitem_web_brand. Click Add, then Save. Saving a change to Facet Fields starts a search index update.

Brand (Custom) selected. The Field ID fills in from your choice.

04. Check the storefront after indexing

Wait for the index update to finish. There's no fixed duration; it depends on how many items and fields you have. The field isn't filterable until the update is done. Then reload the Shop page. A new facet appears under Price, listing Ashgrove, Corriden, and Tollan. It filters by brand, but it's headed custitem_web_brand and the values are plain links. The site has no presentation settings for this facet yet, so it falls back to the field ID and the default facet styling, which in the base theme is a list of links.

The facet works, but its heading is the field ID, custitem_web_brand.

05. Name the facet in SuiteCommerce Configuration

Go to Commerce > Websites > Configuration. Configuration is set per website and domain. In Select Website choose Larkspur Supply, in Select Domain choose shop.larkspursupply.example, and click Configure.

Select the website and the domain, then click Configure.

Click the Shopping Catalog tab, then the Facets subtab. The grid has one line: Item Field ID pricelevel5, Name Price, Behavior range.

The Facets grid starts with only the Price facet.

In the new line, enter these values:

  • Item Field ID: custitem_web_brand. This links the line to the indexed field. Use the field ID, or the facet's URL component if you set one.
  • Name: Brand. This is the heading shoppers see. It doesn't rename the NetSuite field.
  • Behavior: multi. Shoppers can pick several values, and with the standard facet template the base theme shows checkboxes. single allows one value at a time, and range is for a start and end value, like the Price slider.
  • Show Heading: checked.
The Brand line before Add, with Show Heading checked.

Click Add, then Save. The grid now has the Brand line under Price, with Show Heading Yes. Configuration changes don't need a new index, but they can take a few minutes to reach the site.

Saved: custitem_web_brand, Name Brand, Behavior multi, Show Heading Yes.

06. Filter the Shop page by brand

Reload the Shop page. The facet is now headed Brand, with a checkbox for Ashgrove, Corriden, and Tollan.

The heading reads Brand, and each value is a checkbox.

Check Corriden. The listing narrows to 3 Products and shows Narrowed By: Corriden. All three cards are Corriden products. Clear All removes the filter and brings back all 8.

Corriden checked: 3 Products, all from Corriden.

Check the result

  1. Facet Fields on the website record lists Brand (Custom) with Field ID custitem_web_brand under Online Price.
  2. The SuiteCommerce Configuration Facets grid has a custitem_web_brand line named Brand, with Behavior multi.
  3. The Shop page shows a facet headed Brand, with a checkbox for each brand.
  4. Checking Corriden shows 3 Products and Narrowed By: Corriden, and every card is a Corriden product.

When the filter is missing or looks wrong

Most facet problems come from doing one of the two records but not the other. The website record's Facet Fields decide whether a field can be filtered at all. SuiteCommerce Configuration decides how the facet looks and behaves.

If the facet doesn't appear, check that the field is on Facet Fields and that the search index update has finished. Also check that the items in your results actually have values for it. A facet lists only values that the current results have. Items with no brand don't appear under any brand, and a keyword search, a category, or another facet can remove values from the list.

If the heading still shows the field ID, check that the Item Field ID on the Facets line matches the indexed field and that you configured the same website and domain the shopper is visiting. Try a fresh session. If the domain uses the CDN cache and the old heading persists, a cache invalidation request clears it.

Themes and SuiteCommerce Advanced customizations can change facet templates and URL behavior, so test on your own site.

Common questions

Where do I set up facets in SuiteCommerce?

In two places. Add the item field on the website record under Commerce > Websites > Website List, Edit, Search Index > Facet Fields. Then set its heading and behavior in Commerce > Websites > Configuration, on Shopping Catalog > Facets, for the right website and domain.

What's the difference between Facet Fields and the Facets subtab?

Facet Fields on the website record decides which item fields are indexed for filtering. The Facets subtab in SuiteCommerce Configuration decides how each facet looks and behaves: its heading, selection behavior, template, and whether the heading shows. Without the first, nothing appears. Without the second, the filter works but uses defaults.

Why does my facet show custitem_something instead of a proper name?

The facet has no line in the Facets grid yet, so SuiteCommerce falls back to the field ID for the heading. Add a line on Shopping Catalog > Facets with the matching Item Field ID, such as custitem_web_brand, and put the heading you want in Name. Name only changes what shoppers see; the NetSuite field keeps its name.

How do I make a facet show checkboxes instead of links?

Set Behavior to multi on the facet's line in the Facets grid. With the standard facet template, the base theme shows each value as a checkbox. A custom theme or template can render it differently.

What do single, multi, and range mean for a SuiteCommerce facet?

single lets a shopper pick one value at a time. multi lets them pick several values from the same facet. range is for a start and end value, like price, and usually shows as a slider with the range template.

Why doesn't my new facet show up on the storefront?

Check that the field is on Facet Fields and that the search index update has finished. Then check that the items in the listing have values for the field, because a facet only lists values the current results have. Also confirm you're testing the same website and domain you configured, and that a theme or customization isn't hiding facets.

Can I use a free-form text custom field as a facet?

No. Free-form text fields can't be facets. Use a field with controlled values, like a List/Record custom item field.

Do I need to add the field to a field set, or rebuild the index after changing facets?

The field doesn't need to be in a field set to work as a facet. Field sets control which item data the storefront displays, so add it to one only if you also want to show the value on product pages. Changing Facet Fields on the website record starts a search index update. Changing a facet's name, behavior, or heading in SuiteCommerce Configuration doesn't, but it can take a few minutes to reach the site.