> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop-theme/sections/featured-collection.md).

# Featured collection

Display products from a selected collection in a customizable grid or carousel with product card options.

## How to access

1. **Go to** Shopify Admin → Online Store → Themes.
2. **Click** Customize on your active theme.
3. Click **Add section** on the page and choose **Featured collection**.

## Section Settings

<div><figure><img src="/files/GQEl8jsFQWehJhM0h3Ak" alt=""><figcaption></figcaption></figure> <figure><img src="/files/qSAgrtOriPYHowEf4qyO" alt=""><figcaption></figcaption></figure> <figure><img src="/files/xLHw564FJJVwFAegRJ1b" alt=""><figcaption></figcaption></figure></div>

<table><thead><tr><th width="322.888916015625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td>Selects the collection to display in this section.</td></tr><tr><td>Tab style</td><td>Sets how customers switch between collections when multiple collections are available. Choose from Tabs or Dropdown.</td></tr><tr><td>Layout</td><td></td></tr><tr><td>Expand to full width</td><td>Extends the section to the full browser width.</td></tr><tr><td>Color scheme</td><td>Sets the background and text colors.</td></tr><tr><td>Background opacity</td><td>Controls the background opacity.</td></tr><tr><td>Content</td><td></td></tr><tr><td>Heading</td><td>Sets the section heading text.</td></tr><tr><td>Heading size</td><td>Controls the size of the heading.</td></tr><tr><td>Text</td><td>Adds supporting text to the section.</td></tr><tr><td>Text position</td><td>Shows the text above or below the heading.</td></tr><tr><td>Desktop content alignment</td><td>Aligns the section content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.</td></tr><tr><td>Product card</td><td></td></tr><tr><td>Show vendor</td><td>Displays the product vendor on each product card.</td></tr><tr><td>Show description</td><td>Displays the product description on each product card.</td></tr><tr><td>Show card swatch</td><td>Displays color or variant swatches on the product card.</td></tr><tr><td>Show secondary image on hover</td><td>Displays the second product image when customers hover over the product card.</td></tr><tr><td>Show quick add option</td><td>Displays a quick add button on the product card.</td></tr><tr><td>Column alignment</td><td>Aligns the product card content. Choose from Left, Center, or Right.</td></tr><tr><td>Aspect ratio</td><td>Sets the image proportions for product cards. Choose from Portrait, Square, or Adapt to image.</td></tr><tr><td>Column settings</td><td></td></tr><tr><td>Maximum products to show</td><td>Sets the maximum number of products displayed from the selected collection.</td></tr><tr><td>Desktop columns</td><td>Sets the number of products displayed per row on desktop. Choose from 3, 4, 5, or 6.</td></tr><tr><td>Mobile columns</td><td>Sets the number of products displayed per row on mobile. Choose from 1 or 2.</td></tr><tr><td>Carousel settings</td><td></td></tr><tr><td>Enable carousel</td><td>Displays the products in a carousel layout.</td></tr><tr><td>Change slides every</td><td>Sets the delay between automatic slide transitions. Enter 0 to disable autoplay.</td></tr><tr><td>Gap</td><td>Controls the spacing between product cards.</td></tr><tr><td>Pagination</td><td>Sets the carousel navigation style. Choose from Dots, Arrows, or None.</td></tr><tr><td>Pagination style</td><td>Sets the appearance of the carousel navigation. Choose from the available pagination styles.</td></tr><tr><td>Section padding</td><td></td></tr><tr><td>Top side</td><td>Sets the space above the section.</td></tr><tr><td>Bottom side</td><td>Sets the space below the section.</td></tr><tr><td>Section divider</td><td></td></tr><tr><td>Shapes</td><td>Adds a decorative divider to the section. Choose from Curve top, Curve bottom, Curve both, None, Border top, Border bottom, or Both border.</td></tr></tbody></table>

## Common Questions

<details>

<summary>How do I display a different collection?</summary>

Select the **Collection** setting and choose the collection you want to display.

</details>

<details>

<summary>How can I display products as a carousel?</summary>

Enable **Enable carousel** under **Carousel settings**. You can also configure autoplay, pagination, and spacing.

</details>