# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/featured-collection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.