Home > widget-integration > FilterRender > renderCollectionHeader

FilterRender.renderCollectionHeader() method

Renders the collection header with title, description, and metadata.

Dynamically generates the collection header HTML including the collection name, description, image, and product count. Handles both collection pages and collection-filtered search results.

Signature:

renderCollectionHeader(): Promise<void>;

Returns:

Promise<void>

Remarks

The header is rendered into the #boost-sd__collection-header element and includes the collection's body HTML if available. Override this method to customize header layout or add shop-specific information.

Example

Override to add custom header content:

async renderCollectionHeader() {
  await super.renderCollectionHeader();
  const header = document.querySelector('#boost-sd__collection-header');
  if (header && this.shouldShowPromo()) {
    header.insertAdjacentHTML('beforeend',
      '<div class="collection-promo">Special offer on this collection!</div>'
    );
  }
}