# Collection banner

{% hint style="success" %}
**Take the following steps:**

* Go to the **Customizer**
* Go to **Collections > Create template**
* Click on the "**Collection banner**" section
* Follow the given **screenshots -**
  {% endhint %}

<div><figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/jml73VbfpSWxrb9OvmiK/collection-1.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/f2zfbiZbI5457WRQcKoO/collection_page.png" alt=""><figcaption></figcaption></figure></div>

## Section settings

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/Gqy29zv2folp3kDphDdv/collection_banner_1.png" alt=""><figcaption></figcaption></figure>

| Settings                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page width**                      | <ul><li><strong>Boxed</strong>: With boxed width, page content can be displayed within the maximum width. <strong>The page width can be changed in Theme Settings > Layout.</strong></li></ul><ul><li><strong>Full width:</strong> With the "Full width" option, page content can be displayed in its entirety full-width. <strong>When you show content at full width, you can add padding to the left and right sides.</strong></li></ul> |
| **Disable Offset (left & right)**   | <p>It will work if you select the "<strong>Full width</strong>" of the page.<br><br>When you enable this option, the padding on the left and right sides will be removed.</p>                                                                                                                                                                                                                                                               |
| **Heading size**                    | <p>You can change the heading size by following the options -</p><ul><li>Large</li><li>Medium</li><li>Small </li></ul>                                                                                                                                                                                                                                                                                                                      |
| **Title transform**                 | <p></p><p>You can change the heading transform by following the options -</p><ul><li>Uppcarse</li><li>Lowercase</li><li>Capitalize</li><li>Default</li></ul>                                                                                                                                                                                                                                                                                |
| **Show breadcrumb navigation**      | You can show/hide the breadcrumb navigation.                                                                                                                                                                                                                                                                                                                                                                                                |
| **Show collection description**     | You can show/hide the collection description.                                                                                                                                                                                                                                                                                                                                                                                               |
| **Image**                           | <p><strong>You can add an image</strong> -</p><p></p><p><strong>Optional</strong>! Instead of the collection's image, the selected image will be displayed.</p>                                                                                                                                                                                                                                                                             |
| **Image height**                    | <p>You can change the image height by following the options -</p><ul><li><strong>Adapt to image</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul>                                                                                                                                                                                                                            |
| **Enable collection image overlay** | If you enable it, The image will be positioned as a background.                                                                                                                                                                                                                                                                                                                                                                             |
| **Overlay opacity on image**        | You can enable overlay on the image. The opacity range is, 0 to 100%                                                                                                                                                                                                                                                                                                                                                                        |
| **Desktop content alignment**       | You can change the content alignment for desktop devices.                                                                                                                                                                                                                                                                                                                                                                                   |
| **Round the corners of the box**    | You can add a border radius to the collection banner box.                                                                                                                                                                                                                                                                                                                                                                                   |
| **Colors**                          | You can change color of the section.                                                                                                                                                                                                                                                                                                                                                                                                        |

### Section padding

| Settings                    | Description                                                                                                                          |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Desktop**: Padding top    | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.**    |
| **Desktop**: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.** |
| **Mobile**: Padding top     | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.**     |
| **Mobile**: Padding bottom  | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.**     |

## Example demo

{% tabs %}
{% tab title="Background image" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/h1P8xUI8RRlvLQOY3Hvp/collection_banner_2.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Without image" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/xkgWB295zYSSHqnujD4m/without_image_collection.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Collection desciption" %}

<figure><img src="https://content.gitbook.com/content/bMGVnCsdnFPDX2dCTNWk/blobs/ova74ItRoB2kn0oRyJ4p/collection_description.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
