> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/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/unicorn-shopify-theme/page-categories/collections/collection-banner.md).

# Collection banner

The section is valuable for displaying a title, banner, and a collection description from your admin on collection pages.

{% hint style="success" %}
**Tip:** Drag and drop the section to the desired position on a page. If the section is unnecessary, you can hide it. Hover over a section title and click the eye icon to hide the section.
{% endhint %}

Before proceeding with customizing the section, ensure you have applied the required settings in *Shopify admin -> Products -> Collections*. Read more information in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/products/collections/collection-layout).

#### Content

**Show image**\
Enable the option to display the related settings.

**Use collection image**\
Enable this option to automatically use the featured image assigned to the collection in your Shopify admin.

**Image**\
Upload a custom image to display in the banner.\
This image is used when "Use collection image" is disabled.

**Image ratio**\
Use the option from the drop-down to adapt a media to the desired size. If an option includes additional settings, they will appear underneath the drop-down after selecting an option:

* **"Adapt to image"**. Displays an image in its original aspect ratio.
* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 80%\*.

\*The "Proportion" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "[<mark style="color:blue;">Mobile settings</mark>](#mobile-settings)" subsection.

**"Proportion"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

* **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.

**Text alignment**\
Set the collection title and description to "Left" or "Center". This option is designed to work on both desktop and mobile.

**Vertical alignment**\
Choose how the content is positioned vertically within the banner to "Top", "Center", or "Bottom".

#### Media overlay

**Enable**\
Turn on the option to display the corresponding settings.

**Opacity**\
Adjust the transparency of an image color overlay using the scale, which ranges from 0 to 100%.

**Type**\
In the picker, select one of the options: "Background" or "Gradient".

**Background**\
Select the option and change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.

**Gradient**\
Select the option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#image).

#### Mobile settings

**Enable mobile settings**\
Activates mobile settings. The options below take precedence on mobile devices.

**Image ratio**\
Change the image size using one of the options in the drop-down. The corresponding settings will be shown after selecting the relevant option:

* **"Adapt to image"**. Displays the image in its original aspect ratio.
* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 80%\*.

**"Proportion"** indicators:\
\*100% = Square image\
\*Less than 100% = Landscape\
\*More than 100% = Portrait\
16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

* **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 500 pixels.

#### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

***

### Title

Use the block to display the collection title.

**Color**\
Set the title color using the paint palette. The color settings are applied to all screen sizes.

***

### Description

Displays the collection description.

**Color**\
Changes the description color. The color settings are applied to all screen sizes.