> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a title banner to collection and page templates

> Set up Facet's page banner for collections, pages, blogs, articles and search: title, description, picture, height and transparent header.

The Facet page banner opens a page with its title, an optional description and an optional picture. It reads the title and description from the page it sits on, so one banner on a template works for every collection or page that uses it. It also has its own transparent header option. This page covers where the banner can go, its text, picture and height settings, and the blocks you can add.

![The Page banner section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/page-banner/page-banner-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=27da41ccf1ab8f8d60a44379c9281de8)

## What this section controls

* Whether the page title and description show, or your own text instead.
* The alignment and vertical position of the text.
* A picture above, behind, left or right of the text, with a color overlay.
* The banner height.
* A transparent header over the banner.

> [!NOTE]
>
> The page banner can only be added to these templates: collection, page, blog, article, search and the collection list page. It doesn't appear in the **Add section** menu on other templates, such as the home page or product pages.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open a supported template**

Use the page selector at the top of the editor to open a collection, page, blog, article, search or collection list template. The collection template already includes a page banner.

**3. Add or select the section**

In the **Sections** panel, click **Page banner**, or click **Add section** and choose **Page banner**.

**4. Choose a picture and height**

Pick an **Image**, set **Image position**, and choose a **Banner height**.

![The theme editor with the Page banner section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/page-banner/page-banner-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=9cbb8e7c2dfee510eea894a7bb3faff1)

## Section settings

### Text

![Theme editor sidebar showing the Page banner section settings: Show page title, Custom title, Show description, Custom description, Alignment, Vertical position, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/page-banner/page-banner-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=72a59ebcf3d97f460e032648a70a8a37)

> [accordion] Show page title and Custom title
>
> **Show page title** is on by default and shows the title of the page the banner sits on. **Custom title** replaces it with your own text. Leave it blank to use the page's title. **Custom title** appears only when **Show page title** is on.
>
> | Template | Title shown |
> | - | - |
> | Collection | The collection title |
> | Page | The page title |
> | Blog | The blog title |
> | Article | The article title |
> | Search | "Search" |
> | Collection list | "Collections" |

> [accordion] Show description and Custom description
>
> **Show description** is on by default. On a collection, it shows the collection description. On an article, it shows the article's excerpt, if the article has one. Pages, blogs, search and the collection list have no description to read, so there the banner shows one only when you type a **Custom description**. **Custom description** replaces the page's own description and appears only when **Show description** is on.

> [accordion] Alignment and Vertical position
>
> **Alignment**: **Left**, **Center** (default) or **Right**. **Vertical position**: **Top**, **Middle** (default) or **Bottom**. Vertical position matters when the banner is taller than its text, for example with a picture behind it or a tall **Banner height**.

> [!NOTE]
>
> A **Custom title** or **Custom description** shows on every page that uses the template. To give one collection or page its own text, create a separate template for it.

### Image

![Theme editor sidebar showing the Page banner section settings (part 2, scrolled): Image, Mobile image, Image overlay color, Image overlay strength, Image position, Banner height, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/page-banner/page-banner-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=70b6c7c9491415847cd93c7e965b2107)

![Theme editor sidebar showing the Page banner section settings (part 3, scrolled): Enable transparent header, Header color scheme over this banner, Common settings, Color scheme.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/page-banner/page-banner-settings-3.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=6faee88b32422cb99a6d85fbb582d371)

> [accordion] Image and Mobile image
>
> **Image** is the banner picture. **Mobile image** is an optional picture for phones. Without one, phones show **Image**. Without an **Image**, the banner shows only text, whatever **Image position** says.

> [accordion] Image overlay color and Image overlay strength
>
> A tint over the picture. **Image overlay color**: default black. **Image overlay strength**: from 0 to 90%. Default: 0, which leaves the picture as it is.

> [accordion] Image position
>
> * **Above the text**: the picture sits above the title.
> * **Behind the text** (default): the picture fills the banner and the text sits on top.
> * **Left of the text** or **Right of the text**: on screens 750 pixels wide and larger, the picture sits beside the text.

> [accordion] Banner height
>
> * **Normal** (default): the banner fits its content. With the picture behind the text, it stands 410 pixels tall.
> * **Half the screen**, **Three quarters of the screen** or **Full screen**: sets a minimum height, measured against the screen below the header.

> [accordion] Enable transparent header
>
> Off by default. Lets the banner's picture continue up behind the header, so the header sits on top of it. This only works when all of these are true:
>
> * The banner is the first section on the page.
> * **Image position** is **Behind the text**, and an **Image** is chosen.
> * **Enable transparent header** is on in the header's own settings.
>
> **Banner height** still measures the part that shows below the header. Keep **Top padding** at **None** so the picture reaches the top.

> [accordion] Header color scheme over this banner
>
> Used while the header is transparent over this banner: the header links and icons take this scheme's text color so they stay readable over the picture. Appears only when **Enable transparent header** is on.

### Common settings

![Theme editor sidebar showing the Page banner section settings (part 4, scrolled): Common settings, Color scheme, Top padding, Bottom padding, Page width, Custom CSS.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/page-banner/page-banner-settings-4.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=34e19d10f00b54d5ef847af0169f8fed)

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the colors of the banner and its text.
* **Top padding** and **Bottom padding**: None (default), Small, Medium, Large or Extra large.
* **Page width**: Narrow, Narrower, Fluid or Full (default).

## Blocks

### Heading, text, button and image

Add **Heading**, **Text**, **Button** and **Image** blocks under the title and description, for example a button that links to a sale. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

## Best practices

* **Add an overlay for white text.** With the picture behind the text, an **Image overlay strength** of 20 to 40% keeps a light title readable on any picture.
* **Keep collection descriptions short.** The full description shows in the banner. Two or three sentences keep the products close to the top of the page.
* **Turn on both transparent header settings.** The banner's **Enable transparent header** does nothing until the header's own setting is on too.

## Related guides

> [card] [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md)
>
> Turn on the header's transparent setting.

> [card] [Collection page](https://docs.shopify.lightsout.agency/themes/facet/collections/collection-page.md)
>
> Set up the rest of the collection template.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.