# Collection banner

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FahDkW0wZ0aiuPavg6foB%2Fimage.png?alt=media&#x26;token=4c56ceb5-bb09-4c68-b40c-a6d030e43317" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), open the template selector.
2. Select **Collections**, then **Collection banner.**
3. On the left-sidebar, add **Collection banner.**
4. Make necessary changes > **Save.**
   {% endhint %}

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fix width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width:</strong> takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Desktop content position</td><td><p>3 options for the desktop content position</p><ul><li>Middle left</li><li>Middle center</li><li>Middle right</li></ul><p>-> Position is automatically optimized for mobile.</p></td></tr><tr><td>Show collection image</td><td><p>Display images of the collection.</p><p>Add a description or image by editing your collection. <a href="https://help.shopify.com/manual/products/collections/collection-layout">Learn more</a></p></td></tr><tr><td>Show breadcrumb</td><td>Display breadcrumb</td></tr><tr><td>Show collection description</td><td><p>Display description of the collection.</p><p>Add a description or image by editing your collection. <a href="https://help.shopify.com/manual/products/collections/collection-layout">Learn more</a></p></td></tr></tbody></table>

### Overlay image

<table data-full-width="false"><thead><tr><th width="139">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading overlay collection image</td><td>When enabled, the content will be displayed over banner image</td></tr><tr><td>Desktop height</td><td><p>3 options for the desktop height</p><ul><li>Adapt to image size</li><li>Based on content</li></ul></td></tr><tr><td>Image overlay opacity</td><td>Customize the image overlay opacity</td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section