ProductArchiveBanner

Archive/listing of Shopify products, optionally with filters.

Includes the common banner props.

Props

Common filter origins

• ID (product id or Shopify gid)
• SHOP_COLLECTION (collection id)
• SHOP_TAG (product tag)
• SHOP_IN_STOCK (1 for in-stock only)
• PRICE_MIN / PRICE_MAX

ID precedence

• ID is repeatable.
• You can pass raw Shopify product ids or full gids.
• If at least one ID is present, all other archive filters are ignored.
• sort, order, and page still apply.

URL filtering behavior

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

CMS price mode default

Product archives support a CMS-only price display default. In the banner’s Query field, add a query-param row with the key PRICE_MODE and the value NET or GROSS.

PRICE_MODE=NET
PRICE_MODE=GROSS

The value is case-insensitive and controls the initial price mode used for the archive request, price filtering and rendered product prices. It is not an interactive product filter and should not be added to the URL filter state.

The user can still switch between net and gross prices with the available price-mode switch. That user choice then replaces the CMS default for the current interaction. If PRICE_MODE is omitted, the shared default is gross.

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' }
  ]
};