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.

📖 Learn More About Facets & Filters
https://www.nimstrata.com/article/shopify-search-facets-and-filters
☁️ See Attributes in Google Cloud
https://console.cloud.google.com/ai/retail/catalogs/default_catalog/controls/site


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.


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.

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:


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. Size values use the storefront size comparator. 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.

Enable range behavior with the range: field prefix, for example range:attributes.wheel_size. The storefront hides a range slider when the current result set collapses to a single value, debounces value changes while shoppers drag, and clears the filter when the selected values return to the full available range.