ProductArchiveBanner

Archive/listing of Shopify products, optionally with filters.

Includes the common banner props.

Product archive

Props

id●

string

required

CMS id.

hideFilters●

boolean

required

If true, filter controls are hidden while the archive list remains visible.

query●

Array<QueryFilter>

required

CMS default filters applied on first render (depending on URL precedence rules).

Common filter origins

SHOP_COLLECTION (collection id)
SHOP_TAG (product tag)
SHOP_IN_STOCK (1 for in-stock only)
PRICE_MIN / PRICE_MAX

URL filtering behavior

With hideFilters = false, URL filter state has priority over CMS defaults.
CMS defaults are used only when URL contains no filter state.
With hideFilters = true, URL filter state is ignored and CMS defaults are enforced.

Sort options

Use the serialized enum values from @haendlerapp/types/src/enums/SortOption.ts and OrderOption.ts when configuring CMS query params.

Neueste sort=CREATED_AT&order=DESC
Älteste sort=CREATED_AT&order=ASC
Preis: Aufsteigend sort=OPRICE&order=ASC
Preis: Absteigend sort=OPRICE&order=DESC
Name (A–Z) sort=NAME&order=ASC
Name (Z–A) sort=NAME&order=DESC

Example

const banner: ProductArchiveBanner = {
  typename: BannerTypename.ProductArchiveBanner,
  id: 'b_123',
  title: 'Products',
  titleTag: 'h2',
  titleAlign: 'left',
  cssId: null,
  cssClasses: null,
  hideFilters: false,
  query: [
    { origin: FilterOption.ShopifyCollection, value: 'gid://shopify/Collection/123' },
    { origin: FilterOption.ShopifyInStock, value: '1' }
  ]
};

Overview CollectionArchiveBanner