Shopify App Block Filters & Facets

Introduction

Facets and filters help shoppers refine search results and pinpoint products on Nimstrata search results and collection pages. Merchants can create filters for most product catalog attributes imported to the Google Cloud Retail API.

App Block Filter Settings

The Retail Cloud Connect Shopify App configures which attributes are requested as storefront facets. New stores start from the common system filters and can add custom attributes from product metafields, product options, collections, tags, or tag prefixes.

Common system filters include:

• Brand
• Color and Color Family
• Gender and Age Group
• Size
• Material
• Pattern
• Price
• Product Type
• Availability

Price, Product Type, and Availability stay available as storefront filters with default labels even when there is not a saved row yet.

Changes to an attribute's data source, imported value, numeric indexing, or active state require a new full catalog sync and are marked in orange in the filter list. Storefront-only changes, such as the display label, switching between Filterable and Data Only, display style, or filter order, apply without marking the catalog for re-import.

Filter Display Styles

Open a filter row in Filters & Data to choose its storefront presentation:

Theme default keeps the active App Block theme's existing appearance. An explicit choice applies across themes. Shopify metafields with the number_integer, number_decimal, dimension, volume, or weight type are recognized as numeric; numeric tag-prefix fields can also use these styles when Numeric Field is enabled.

Layout and Behavior Settings

The App Block filter list is only part of the storefront filtering experience. Use Layout Settings to control filter position, quick filters, sort placement, counts, search-within-filters behavior, and View All limits on search and collection pages.

Search-within-filter inputs narrow the visible filter values as shoppers type, without requiring Enter or form submission.

Use Translations for filter display labels and Filter Value Translations for raw values, merged labels, and color family values.

Data Cleanup for Better Filters

When filters contain inconsistent raw values, use the Retail Cloud Connect Shopify App to normalize them before they reach the storefront:

• Color Families for raw color names
• Merged Filter Values for values such as Medium, M, and Med

Advanced JavaScript Filters

Use Custom and Default Filters only when a filter must be hidden from shoppers or rendered as a bespoke switch outside the normal facet list.

Filter Value Ordering

Storefront filter values use this order:

1. A custom window.Nimstrata.filterOrder[facetKey] comparator, when supplied
2. Count order, when the filter is configured to sort by count
3. Alphabetical order by the rendered translated label

Range filters keep the order returned by the API. The built-in size comparator orders recognized apparel sizes first, then numeric sizes and consecutive slash sizes by value. Numbered sizes come next, grouped by suffix (for example, all L sizes before all P sizes). Other values use a case-insensitive alphabetical fallback, with prefixed footwear sizes such as M4/W6 ordered by their first numeric size. A custom window.Nimstrata.filterOrder.sizes comparator still takes precedence. Color and color-family filters can show more values than the normal View All threshold so swatches remain useful.

Range Sliders

Use range sliders for numeric filters such as price, discount, or a numeric custom tag-prefix field.

Choose Range slider in the filter's Display style setting, then choose Range step: 1 (the default), 0.5, 0.1, or 0.01. The step is configured separately for price and each numeric custom filter, and is also available with Theme default. For example, a step of 0.5 allows 73, 73.5, and 74. Changing the step does not require a catalog re-import.

The available minimum rounds down and the maximum rounds up to the nearest step so the full range remains selectable. The storefront hides a range slider when the current result set collapses to a single value and clears the filter when the selected values return to the full available range. Price sliders show values in the active market currency with its symbol but without an ISO currency code; fractional steps retain cents in selected-filter labels. Existing saved filters remain unchanged until the shopper edits the control.

Dragging a slider updates its handle and numeric value immediately. Results wait until the shopper releases the handle or adjustment key, then pauses for 300 ms. Text fields let shoppers finish typing before changing the selected range. Pressing Enter or leaving a field rounds the value to the slider step and clamps it to the available bounds and the other handle; for example, entering 12 with an available minimum of 73 becomes 73. Nonnumeric edits are rejected, and empty or incomplete entries restore the previous value. Results use the same 300 ms delay after committing a text field. Adjusting either end again cancels the pending update so both bounds apply together after the shopper finishes.

Dynamic groups asks AI Commerce Search to calculate numeric intervals. If intervals are unavailable for the current field, Retail Cloud Connect retries that field as a range and uses the returned range for that result.

Range sliders include both selected endpoints: selecting 60–75 includes products with a value of exactly 75. Dynamic groups display plain labels such as 60 - 75, while retaining the search service's boundaries and matching counts. A group's upper endpoint may belong to the next group. Existing saved range links retain their original inclusive behavior.

The Studio style exposes four range controls on the app-block root:

.rcc-search[data-theme='studio'] {
  --rcc-studio-range-track-color: #d8d5cc;
  --rcc-studio-range-active-color: #151515;
  --rcc-studio-range-input-border-color: #d8d5cc;
  --rcc-studio-range-thumb-size: 20px;
}