# Featured collection with media

Use the **Featured collection with media section** to display products from a selected collection with a promotional image or video.

* Select a collection to feature its products
* Add either a [featured image](#featured-image-block) or [featured video](#featured-video-block) block
* Display products as a grid or single-row slider
* Change the layout for both desktop and mobile

{% hint style="info" %}
Check out the [Featured collection](https://help.fluorescent.co/cornerstone/pages/theme-sections/featured-collection) section for an alternate style
{% endhint %}

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FyuygS3ieqctfrIy7VJrq%2Ffeatured-collection-media-barista.jpg?alt=media&#x26;token=ac5afc80-514b-4160-b943-9fbe873e5f2a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

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

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Select featured collection

***

Select a **Collection** to display with adjustable rows and columns. Select how many columns and products to display, and choose to show products in a **Grid** or single-row **Slider**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured collection with media** section to open the settings.
2. Use the **Select collection** button find the collection you want to feature.

   > We recommend collections with at least 4 products.
3. Use the slider to set the **Maximum number of products** to display from your collection. Between **3** and **6**.

   > The products will display in the sort order as set in your Shopify admin settings. Learn more about admin settings for your [collection pages layout](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection).
4. Select the **Number of columns on desktop** to show per row on desktop screens: either **2** or **3** columns.

   > Product image sizes will change according to the number of columns. On smaller browser sizes, the product grid may show fewer columns to adapt to the window width.
5. Choose to **Enable slider** on desktop and mobile to show a single-row of products that rotates, instead of a grid.
6. Click **Save**.

</details>

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Maximum number of products</mark></td><td>Set the maximum number of products to display within in the section: between <strong>3</strong> and <strong>6</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many products to show per row on desktop screens: either <strong>2</strong> or <strong>3</strong> columns.</td></tr><tr><td><mark style="color:blue;">Enable slider</mark></td><td>For desktop or mobile, display products in a single-row carousel that visitors can click through to view more.</td></tr></tbody></table>

## Set up featured media block

***

The featured media appears beside the collection products. Add a **Featured image** block or a **Featured video** block instead.

### Change media layout

***

Select the **position** of the featured media, and change the media **height** and **width**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured collection with media** section to open the settings.
2. Select the **Desktop position** to display the featured media either to the **Left of products** or **Right of products**.
3. Change the **Desktop width** of the featured media as a percentage of the section width: between `25%` and `50%`.
4. Set the minimum **Desktop height** of the featured media: between `300` and `500` pixels.
5. Select the **Mobile position** to display the featured media either **Above products** or **Below products** on mobile devices.
6. Change the minimum **Mobile height** of the featured media: between `300` and `500` pixels.
7. Click **Save**.

</details>

<table><thead><tr><th width="159">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop position</mark></td><td>Display the featured media either <strong>Left of products</strong> or <strong>Right of products</strong>.</td></tr><tr><td><mark style="color:blue;">Desktop width</mark></td><td>Change the width of the featured media as a percentage of the section width: between 25% and 50%.</td></tr><tr><td><mark style="color:blue;">Desktop height</mark></td><td>Set the minimum height of the media: between 300 and 500 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile position</mark></td><td>Display the featured media either <strong>Above products</strong> or <strong>Below products</strong>.</td></tr><tr><td><mark style="color:blue;">Mobile height</mark></td><td>Set the height of the featured media: between 300 and 500 pixels.</td></tr></tbody></table>

### Add image block

***

Upload images for both desktop and mobile, add an image overlay, and add headings and a button.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Featured collection with media**, click **Featured image** block to open the settings.
2. Select an **Image**

   > There are no required images dimensions. We simply recommend images have a minimum width of **`2500px`** for optimal quality across all devices.
3. (*Optional*.) Upload a **Mobile image** to show only on mobile devices.\
   You can use an alternate image to accommodate for re-sizing, cropping, and overlay text on mobile screens. For example, you might use an image with a portrait orientation instead of landscape.
4. For the **Media fit**, choose to **Fill** the entire block with your image or **Contain** the image within the block to display its original shape.

   > The **Fill** option may crop the edges of your image to show it full-sized. The **Contain** option avoids any cropping by re-sizing the image to fit within the block.
5. If the media fit is set to **Fill**, select an **Image focal point** to specify the main focus of your image and avoid unwanted cropping when the section adapts to different screen sizes.

   > Select **From image** to use the focal point set for the image when used anywhere on your store. To change the focal point, click the **Edit** button on the preview of the uploaded **Image**. To set the focal point of the image for only this section, select **Center**, **Top**, **Bottom**, **Left**, or **Right**.
6. Choose to add a **Background link** to make the entire image a clickable link that points to a different page.
7. In the section settings, you can change the position, height, and width of the featured media.
8. Click **Save**.

</details>

### Add video block

***

Display an autoplay video (without audio) as the section media. Add the **Featured image** block, set the **Video focal point**, and choose to add a **Background link** to the entire video.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Featured collection with media**, click the delete button (trash can) to remove the **Featured image** block.
2. Click **(+) Add block** and select **Featured video**.
3. Click the **Featured video** block to open the settings.
4. Under **Shopify video**, click **Select video**.

   > Select a .mp4 video, or click Add videos to upload a .mp4 video file.
5. Select a **Video focal point** to specify the main focus of your images. The focal point will remain centered and within frame when your site adapts to different screen sizes.
6. Choose to add a **Background link** to make the entire video a clickable link that points to a different page.
7. In the section settings, you can change the position, height, and width of the featured media.
8. Click **Save**.

</details>

{% 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 Featured video block to find settings`

<table><thead><tr><th width="181">Setting</th><th width="465">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select or upload a video that autoplays (without sound).</td><td></td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>Specify the main focus of the video for desktop and mobile. The focal point will remain centered and within frame to avoid unwanted cropping.</td><td><p><strong>Center</strong><br><strong>Top</strong><br><strong>Bottom</strong></p><p><strong>Left</strong><br><strong>Right</strong></p></td></tr><tr><td><mark style="color:blue;">Background link</mark></td><td>Select a page or URL to make the entire video a clickable link.</td><td></td></tr></tbody></table>

### Add overlay

***

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

* Change the **opacity** to make the overlay more or less transparent
* Use a **solid** or **gradient overlay**
* Use **custom colors**

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured video** or **Featured image** block to open the settings.
2. Under **Image overlay**, use the **Tint opacity** slider to change the transparency of the overlay.

   > Set the opacity to `0%` to turn off the overlay color. If set to `100%`, the overlay will be opaque and the featured media will not be visible.
3. For the **Tint style**, choose to use a **Solid** overlay color or **Gradient** overlay for the tint.

   > The gradient style fades across a range of hues. Select one of four options to change the angle and direction of the gradient.
4. Select the **Override with custom colors** option to change the **Text** and **Tint** colors to be different from the overlay colors in your theme settings.
5. Click **Save**.

</details>

`Click Featured media block to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tint opacity</mark></td><td>Use the slider to change the transparency of the overlay.<br><br>Set the opacity to 0% to turn off the overlay.</td></tr><tr><td><mark style="color:blue;">Tint style</mark></td><td>Choose to use a <strong>Solid</strong> overlay color or <strong>Gradient</strong> overlay for the tint. The gradient style fades across a range of hues. You can select the angle and direction of the gradient.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td><p>Check this option to use custom overlay colors for the tint.</p><p><br>These colors will override the overlay colors selected in your theme settings.</p></td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for the headings and text.</td></tr><tr><td><mark style="color:blue;">Tint color</mark></td><td>Select a custom overlay text color for the tint.</td></tr></tbody></table>

### Add headings and button

***

Add heading text to overlay the media block, and add a button to link to another page.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured video** or **Featured image** block to open the settings.
2. Set **Maximum text width** between `150` and `500` pixels.

   > Use this setting to control the line breaks of your headings and text.
3. Add **Accent** text to show a small heading above the main section heading.

   > Select **Show accent divider** to add a border line under the accent heading. Select an **Accent divider color** to use the Theme color (as selected in the theme settings) or the Current color (as selected in the section settings)color in the theme settings.
4. Add **Heading** text to display as the section title.

   > Change the **Heading size** from small (1) to large (8).
5. Add **Text** to display below the section heading.

   > Change the **Text size** from small (1) to large (8).
6. Select or paste a URL for the **Button link** and enter text for the **Button label**.

   > Select a **Button style**: Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
7. Click **Save**.

</details>

## Section header

***

The **Section header** appears above the section. Add a **heading**, **subheading**, and optional **button**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured collection with media** section to open the settings.
2. Enter **Accent** text to display a small label above the heading.
3. Enter **Heading** text to display a section title.
4. Enter **Subheading** text to display below the heading.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
5. Set **Maximum text width** between `400` and `1000` pixels.

   > Use this setting to control the line breaks of your headings and text.
6. Select or paste a URL for the **Button link** and enter text for the **Button label**.

   > Select a **Button style**: Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
7. Click **Save**.

</details>

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F9cVIYc3gbO6gwicK3IKJ%2Ffeatured-collection-media-glow.jpg?alt=media&#x26;token=7ecc6643-94ba-49a7-8cb1-bb38290fcc6e" alt="" width="563"><figcaption></figcaption></figure>

`Click section to find settings`

<table><thead><tr><th width="216">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add a small heading label above section heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>And text below the main heading.</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between <strong>400</strong> and <strong>1000</strong> <strong>px</strong>.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label.<br><br>The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

\\

***

> **Related links**
>
> [Featured collection](https://help.fluorescent.co/cornerstone/pages/theme-sections/featured-collection)\
> [Product listing settings](https://help.fluorescent.co/cornerstone/products/product-listings)\
> [Collection pages](https://help.fluorescent.co/cornerstone/collection-pages/collection-pages)\
> [Shopify collections guide](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection)