# Featured collection

The **Featured collection** section spotlights key product groupings, promoting sales, enhancing organization, engaging users, and reinforcing your brand identity, ultimately improving the overall shopping experience on your website.<br>

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F79ZJACX8He3djObTWj7U%2Fimage.png?alt=media&#x26;token=f6970ea8-c7cf-41f8-b67a-4b1d53102246" alt=""><figcaption></figcaption></figure>

## 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>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: 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>Content 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>Show view all button</td><td>When enabled, it will display a button with a link to the collection page</td></tr><tr><td>Collection</td><td>The products collection will be displayed</td></tr><tr><td>Maximum items to show</td><td>Limit the display of the number of posts. Minimum: 2. Maximum: 25</td></tr><tr><td>Items per row on desktop</td><td>Number of columns to display on desktop computers. Minimum: 2. Maximum: 5.</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>Enable carousel</td><td>When enabled, the section will be displayed in carousel format</td></tr><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></tbody></table>

### Section padding

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

## Theme block

### Banner

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FhJGSJDyuq5QWU5Fgk3o8%2Fimage.png?alt=media&#x26;token=45a6c398-4a98-43ea-82cf-e0cb71747d10" alt=""><figcaption></figcaption></figure>

#### Heading, Subheading, Description

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading, Subheading, Description</td><td>Custom content block</td></tr><tr><td>Size</td><td>The size of content block</td></tr><tr><td>Spacing bottom</td><td>Spacing between the content and the next component</td></tr></tbody></table>

#### Button

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Button label</td><td>Custom button name, if left empty, the button will be hidden</td></tr><tr><td>Button link</td><td>The URL you want to attach to this button</td></tr><tr><td>Use outline button style</td><td>Change the primary button layout into outline layout</td></tr><tr><td>Spacing bottom</td><td>Spacing between the content and the next component</td></tr></tbody></table>

#### Text with button

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text #1</td><td>Define the left side content</td></tr><tr><td>Text #2</td><td>Define the right side content</td></tr><tr><td>Size</td><td>The size of content block</td></tr><tr><td>Enable letter spacing</td><td>Enable the preset letter-spacing of Agile theme</td></tr><tr><td>Button label</td><td>Custom button name, if left empty, the button will be hidden</td></tr><tr><td>Button link</td><td>The URL you want to attach to this button</td></tr><tr><td>Use outline button style</td><td>Change the primary button layout into outline layout</td></tr><tr><td>Show border top</td><td>Show a border on top of the content block</td></tr></tbody></table>
