# Featured collection

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/ira/readme/theme-retirement).
{% endhint %}

The **Featured collection** section displays a grid of products from a selected collection. With [Quick shop](https://help.fluorescent.co/ira/theme-styles/quick-shop) enabled, customers can add these products directly to their cart.

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/ira/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/ira/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

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

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

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/ira/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Featured collection**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

### Select featured collection

Select a **Collection** to display its products in a grid with adjustable rows and columns.

<details>

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

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

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

   > We recommend collections with at least 4 products.
3. Click **Save**.

</details>

## Section content and layout

Add content with a section heading. Adjust the layout by changing the number of products per row and the shape (aspect ratio) of product images.

<details>

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

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

1. Click the **Featured collection** section to open the settings.
2. (*Optional.*) Change the **Heading** text that displays in the top-left of the section.

   > We recommend a short title of 2 to 3 words.
3. Use the sliders to set the number of **Products per row** and number of **rows** to change the layout.

   > On mobile, products are shown in a two-column row that customers can tap through as a carousel.
4. To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of each image.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
5. Click **Save**.

</details>

## Settings reference

Click the **Featured collection** section to find the following settings.

| Setting            | Description                                                                                                                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Select collection  | Select a collection from your store's existing collections.                                                                                                                                   |
| Heading            | Add text to show a main heading.                                                                                                                                                              |
| Products per row   | Change the amount of products shown per row. You can choose between 2 and 4 products per row. On mobile, products are shown in a two-column row that customers can tap through as a carousel. |
| Rows               | Change how many rows of products from the collection should be displayed. Choose between 1 and 3.                                                                                             |
| Image aspect ratio | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). |
| <p><br></p>        |                                                                                                                                                                                               |

***

> **Related links**\
> [Product listing settings](https://help.fluorescent.co/ira/products/product-listings)\
> [Collection pages](https://help.fluorescent.co/ira/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)