Skip to main
Digital experience guide

Catalogue

Includes variations of the hero banner, listing page requirements, product details and more that can be changed to suit the campaign.
 
We have one catalogue [as of July 2026].

Catalogue hero image and title

Mandatory elements

  • Images  must be 2:1 ratio (landscape) and be a minimum size of 2400px × 1200px for both desktop and mobile.
  • Headings should be 18-42 characters.
  • Background color for the banner can be set to: digital navy, marine or TSA red.

Optional Elements

  • Summary should be between < 160 characters, if used.
  • A CTA button can be displayed beneath the heading/subheading elements that operates a popup explaining the catelogue.
    • Button/CTA text should be between 10-22.
Example

 

Alternate hero options

Instead of using the Catalogue-specific hero block (outlined above), this can be replaced with any of the standard page hero banners (image or video options).

Catalogue page settings

  • Filter Categories (reccomended 3+ categories for sorting products)
  • Page size (number of products displayed per page, max is 50)
  • No results message (if no products are found in filtered settings)
  • Cart Settings
    • Blackbaud Appeal code
    • Appeal type
    • Blackbaud Source code
    • Cart Name
    • Checkout page
    • Confirmation Page
  • Catalogue explainer tile (appears as first tile in product list, see example 2 below)
    • Heading < 42 characters
    • Option 1 text < 32 characters
    • Option 2 text < 32 characters
    • Option 3 text < 32 characters
    • Icon ratio is 1:1
    • Button text < 22 characters
  • Catalogue explainer popup (appears as popup overlay, see example 3 below)
    • Heading < 42 characters
    • Subheading < 60 characters
    • Image ratio is 3:4 (portrait), min 2400px x 3200px
    • Option 1 text < 32 characters
    • Option 1 summary < 60 characters
    • Option 1 icon ratio is 1:1
    • Option 2 text < 32 characters
    • Option 2 summary < 60 characters
    • Option 2 icon ratio is 1:1
    • Option 3 text < 32 characters
    • Option 3 summary < 60 characters
    • Option 3 icon ratio is 1:1
Example

Example 2: Catalogue explainer tile

Example 3: Catalogue explainer popup

Product details page

Mandatory elements

  • Category (for sorting on listing page)
  • Heading < 38 characters
  • Product info:
    • Product ID 
    • Product SKU (Code) 
    • Product desciptions 
    • Product price 

Optional elements

  • Summary < 160 characters
  • Image ratio is 1:1, minimum size 2400px x 2400px
  • Impact thumbnail ratio is 1:1, minimum size 2400px x 2400px
  • Impact statement < 50 characters
  • Badges < 14 characters
  • Related gift items, 1-4 selections
  • Product info:
    • Product card (PDF file)
Example

Checkout page

Mandatory elements

  • Heading

Optional elements

  • Additional help title
  • Additional help subtitle
  • Additional help amount
  • Additional help image
  • Gift Cards Field Enabled
  • Gift Cards Message Heading Label
  • Gift Cards Message Heading Tooltip
  • Gift Cards Print Cards Option Label
  • Gift Cards Send Cards Option Label
  • Gift Cards Send Cards Postage Label
  • Gift Cards Send Cards Postage Amount
  • Payment Error Message
  • Suggested Items Heading

Example

Upsell Block

Optional elements

  • Heading
  • Subheading
  • Items
  • Add button text
  • Skip button text

Example

Confirmation page

Optional elements

  • Heading
  • Summary
  • Image (Desktop and mobile)
  • Video
  • Download Receipt Link Text
  • Contact Us Button

Thank you email

Optional elements

  • Check with Leah