# Featured collection

Allows you to showcase products from a selected collection with optional promotional blocks and rich customization. This section supports grid and carousel layouts, responsive settings, highlighted text styles, and optional promotional content.

> Note: The mobile view of this section is always a grid unless the mobile slider option is enabled.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FdDOEXnIyHGuWa8XCmq7c%2Ffeatured-collection-section-settings.gif?alt=media&#x26;token=7af98537-0853-4f3b-a314-c6396213536c" alt=""><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="235.8076171875">Settings</th><th width="126.73223876953125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Selects the collection to feature in the section.</td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Chooses how products are displayed: <code>Grid</code> or <code>Carousel</code>.</td></tr><tr><td>Products</td><td align="center"><code>range</code></td><td>Sets the number of products to display.</td></tr><tr><td>Products per row on desktop</td><td align="center"><code>range</code></td><td>Determines how many products appear per row on desktop. Applies to both grid and carousel layouts.</td></tr><tr><td>Products per row on mobile</td><td align="center"><code>select</code></td><td>Controls product layout on mobile (1 or 2 per row).</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Sets alignment for the heading and text: <code>Left</code>, <code>Center</code>, or <code>Right</code>.</td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Displays the main heading. Italicized words can be styled using the highlight settings.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjusts heading font size as a percentage of the base size.</td></tr><tr><td><strong>Highlight</strong></td><td align="center"></td><td></td></tr><tr><td>Type</td><td align="center"><code>select</code></td><td>Selects the visual style to apply to highlighted (italicized) words in the heading.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Sets the background or underline color for highlighted text.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Sets the color of highlighted words (if applicable).</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Displays descriptive content about the collection.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjusts text font size as a percentage of the base size.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Button position</td><td align="center"><code>select</code></td><td>Positions the button at the <code>Top</code> or <code>Bottom</code>.</td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Text label for the call-to-action button.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Sets the button’s color style. Options include <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Visual styling for the button: <code>Solid</code>, <code>Outline</code>, <code>Soft</code>, and  etc.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Sets the size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td><strong>Mobile layout</strong></td><td align="center"></td><td></td></tr><tr><td>Enable slider</td><td align="center"><code>checkbox</code></td><td>Enables horizontal sliding on mobile layout.</td></tr><tr><td><strong>Section spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Sets section width: <code>Page width</code> or <code>Full width padded</code>.</td></tr><tr><td>Padding top and bottom </td><td align="center"><code>range</code></td><td>Controls top and bottom spacing in pixels.</td></tr></tbody></table>
