> 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/stiletto/sections/theme-sections/featured-collection-grid.md).

# Featured collection grid

The **Featured collection grid** section displays a grid of products from one of your collections. With Quick View enabled, customers can buy your products without leaving the page.

> See the [Featured collection slider](/stiletto/sections/theme-sections/featured-collection-slider.md) to display your products as a single-row carousel.

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

### <mark style="color:$primary;">Select featured collection</mark>

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 on the **Collection** block nested under the 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>

### <mark style="color:$primary;">Product list layout</mark>

Change the number of columns and rows, the shape of your product images, and set how many products to display from your collection.

<details>

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

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

1. Click on the **Featured collection grid** and scroll down to the **Product list** settings.
2. Use the slider to set the **Maximum number of products** to display from your collection. Between **3** and **15**.

   > 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).
3. Select the **Number of columns** to display for both *desktop* and *mobile*.

   > The size of the product images will change according to the number of columns.
4. Click on the **Theme settings** tab to select an **Image aspect ratio**. This setting applies to all sections that display products.

   > Crop all images to **Square**, **Landscape**, or **Portrait**. The default **Natural** setting will display the original orientation of each image.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
5. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<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>15</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>3</strong>, <strong>4</strong>, or <strong>5</strong> columns.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose how many collections to show per row on mobile screens: either <strong>1</strong> or <strong>2</strong> columns.</td></tr></tbody></table>

***

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/stiletto/sections/theme-sections/featured-collection-grid.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.