> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/pages/collection/collection-banner.md).

# Collection banner

Displays related image to each specific collection.

## Collection banner

*Shared Settings*:

* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Image</mark>](#image)
* [<mark style="color:$primary;">Colors</mark>](#colors)

*Blocks:*

> The collection title and description are displayed based on the settings in *Shopify admin -> Products -> Collections*.

* [<mark style="color:$primary;">Heading</mark>](#heading)
* [<mark style="color:$primary;">Description</mark>](#description)

***

**Show collection image**\
Enables the display of the collection image.

**Alignment**\
Set the collection title and description alignment to Left, Center, or Right.

***

#### Image

**Image**\
Upload or select an image to display.

**Image on mobile**\
Optional mobile version.

**Fit**\
Choose how images fit inside the container:

* **Full background** – Fills the space (may crop the image).
* **Contain** – Shows the full image (may leave empty space).

**Position / Position on mobile**\
Aligns the image vertically to Top, Center, or Bottom.

**Overlay opacity**\
Adjust transparency (0–100%).

* **0%** - Turns off the color overlay.
* **100%** - Completely covers an image with the color.

**Overlay color**\
Choose the overlay color.

***

#### Colors

**Text**\
Changes the collection title and description color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FNFi23Jr8eDW8BM4Clc8R%2Fcollection%20page_banner.png?alt=media&amp;token=534982e4-7262-4eb8-94be-b084d1625604" alt=""><figcaption></figcaption></figure>

***

### Heading

**Font size**\
Controls how large the title appears on desktop screens (20-54).

**Mobile font size**\
Adjusts the title size specifically for mobile devices (20-36).

***

### Description

**Limit words in description**\
Restricts the number of words shown in the description to keep the content shorter and more compact (20-200).