# Collection banner

The **Collection Banner** section is designed to make your key collections stand out through bold imagery and striking typography. Perfect for seasonal campaigns or featured drops, it combines high-impact visuals with clear calls-to-action like *Shop Now* to drive attention and clicks. Each banner can highlight a collection’s story, mood, or design theme—creating a magazine-like showcase that connects style and emotion. This section helps transform every collection into an experience, not just a display.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FJMlCiZqvQkNIaiNaQj5J%2Fimage.png?alt=media&#x26;token=0f6c731e-d79b-4328-9c1f-a636fa7c9648" alt=""><figcaption></figcaption></figure>

## Section settings

### General setting

<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><em><strong>Stretch width</strong></em>: span the section width regardless of screen size.</li><li><em><strong>Fix width</strong></em>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><em><strong>Expand full width</strong></em>: 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>Heading</td><td>The title of the section</td></tr><tr><td>Description</td><td>The description of the section</td></tr><tr><td>Alignment</td><td><p>The position of the heading and description.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Heading size</td><td><p>Font size text customization:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr></tbody></table>

### Collection

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape</strong> - Crops the images to use a 4:3 ratio</li></ul></td></tr><tr><td>Content alignment</td><td><p>Choose the position of text and content within the section.</p><ul><li><strong>Left</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Items per row on desktop</td><td>Number of columns to display on desktop computers. Minimum: 2. Maximum: 4.</td></tr><tr><td>Column gap</td><td><p>4 options for column gap</p><ul><li>Small</li><li>No gap</li><li>Medium</li><li>Large</li></ul></td></tr></tbody></table>

### Settings for carousel

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show navigation</td><td>Display the next and back controls for the carousel</td></tr><tr><td>Show pagination</td><td>Display the pagination for the carousel</td></tr><tr><td>Show progress bar</td><td>Adds a progress bar animation that visually represents slide transitions. When enabled, navigation and pagination dots are automatically hidden for a cleaner look.</td></tr><tr><td>Reveal next slide</td><td>Displays a small portion of the upcoming slide in the carousel.</td></tr></tbody></table>

### Section padding

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

## Blocks settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td>Select the collection you want to display</td></tr><tr><td>Image</td><td>Upload desired image, or it will default to the collection's preset image</td></tr><tr><td>Subheading</td><td>Add a short line of text above the title (e.g., “Featured Collection”).</td></tr><tr><td>Timeline</td><td>Display a year or campaign period.</td></tr><tr><td>Collection title</td><td>Custom title selection; leave blank to use the collection's preset title</td></tr><tr><td>Description</td><td>Add supporting text to describe the collection.</td></tr><tr><td>First button label</td><td>Enter text for the button (e.g., “Shop Now”). Leaving it blank hides the button.</td></tr><tr><td>First button link</td><td>Add the URL or select a link for the button action.</td></tr><tr><td>Use outline button style</td><td>Enable to display the button with an outlined design instead of a solid fill.</td></tr></tbody></table>