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

# Featured collection

Use the **Featured collection** section to display products from a selected collection as a single-row **slider.**

{% hint style="info" %}
Add a [Promotion tile](#add-promotion-tile) with featured image or autoplay video (without sound).
{% endhint %}

<figure><img src="/files/3jNTH9bNddxSXmoS9Jgr" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Featured collection**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to add a **section header** and change **section styles** for colors and spacing.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr></tbody></table>

## Select feature collection

***

Select a **Collection** from your Shopify admin to display its products.

&#x20;

`Click Featured collection section to find settings`

<table><thead><tr><th width="167">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Collection</mark></td><td>Select a collection to display its products.<br><br>Collections are created and edited in your Shopify admin.</td></tr></tbody></table>

## Change layout

***

Adjust the layout by changing the number of columns for desktop and mobile.

&#x20;

`Click Featured collection section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Maximum number of products</mark></td><td>Set the maximum number of products that should be displayed from the collection.</td><td><strong>1-12</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of products per row on desktop screens.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>4</strong></td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of products per row on mobile screens.</td><td><strong>1</strong><br><strong>2</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Show slider scrollbar</mark></td><td>When checked, the scrollbar appears below the products and allows visitors to move through the slider.</td><td></td></tr></tbody></table>

## Add promotion tile

***

Add a **promotion tile** with an image or autoplay video, promotional text, and link to other pages.

### Add image or autoplay video

***

Add an image or autoplay video (without sound) as the promotion tile's background.

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

`Click Promotion tile block to find settings`

<table><thead><tr><th width="191">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image for the promotion tile.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image for mobile devices.</td></tr><tr><td><mark style="color:blue;">Video</mark></td><td>Add a short autoplay video (without sound) to replace the image.</td></tr></tbody></table>

### Add image overlay

***

The image **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

* Choose a **Color scheme** for the overlay and overlay text
* Change the **Opacity** to make the overlay more or less transparent

{% hint style="info" %}

#### Use overlay for solid color slide

You can set the **Overlay opacity** to 100% to show solid color tile.
{% endhint %}

&#x20;

`Click Promotion tile block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Adjust the transparency of the color overlay on the promotion tile.</td><td><strong>0 - 100</strong> %<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20</mark></td></tr></tbody></table>

### Add text

***

`Click Promotion tile block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="321">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add a title for the promotion tile.</td><td><mark style="background-color:yellow;">Default: Promotion</mark></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add descriptive text for the promotion.</td><td></td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Set the position of the text content within the promotion tile.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr></tbody></table>

### Add link and button

***

You can make the promotion tile a clickable link or add a button to redirect visitors to another page.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link URL</mark></td><td>Enter the URL that you want the promotion tile to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter the text to display on the button.</td><td><mark style="background-color:yellow;">Default: Shop now</mark></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Choose the visual style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Button placement</mark></td><td>Select where to position the button within the promotion tile.</td><td><strong>Standard</strong><br><strong>Bottom-anchored</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr></tbody></table>