# Featured collection

Source: <https://docs.ictsviluppo.example/dossier/sections/section-featured-collection/>

Featured collection shows a set of products in a scrolling row or in a grid, with a heading and a “View all” link. Use it for new arrivals or best sellers on the home page, for suggestions below the cart, or for a few products on the page not found. You can add it to any page.

## Choose which products appear

**Product source** decides where the products come from:

- **Collection**: the first products of the collection you pick in **Collection**, in the order you set for that collection in **Products > Collections** in your Shopify admin. **Maximum products to show** limits how many appear, and the “View all” link opens the whole collection.
- **Product list**: the products you pick one by one in **Products**, in the order you arrange them, up to 16. There is no “View all” link, because the products don’t share a collection page.

Only the picker that matches the source is used; the other one is ignored even if it has a value.

Until you choose a collection or some products, the section is hidden in your store. In the theme editor it shows sample cards so you can arrange the page. A collection with no products is hidden too, and the theme editor tells you why.

## Pick a row or a grid

With **Layout** set to **Carousel**, the products sit in a single row that customers scroll sideways, with the next card peeking in to show there is more. On computers with a mouse or trackpad, arrows appear next to the heading when the row is longer than the screen; each click moves by a full screen of cards. On phones customers swipe.

With **Grid**, all products are visible at once: two per row on phones, and as many as **Products per row on desktop** on large screens. In the row, the same setting decides how many cards fit on a large screen.

**Use full page width** lets the products run to the edges of the window instead of the page’s usual width.

## Change how the product cards look

The section sets only the shape of the photos (**Image ratio**) and whether the brand appears above the name (**Show vendor**). Everything else on the card, such as the second image on hover, color swatches, quick add, badges and ratings, is shared by every product card in the store: set it in [Theme settings](https://docs.ictsviluppo.example/dossier/theme-settings) > **Product cards** (see [Customize product cards](https://docs.ictsviluppo.example/dossier/theme-settings#customize-product-cards)).

## Show it only between two dates

Turn on **Schedule visibility** and set a start, an end, or both. This is handy for a seasonal edit or a sale collection. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling).

## Settings

| Setting | Type | Default | Options |
| - | - | - | - |
| **Heading** | Text | New arrivals | — |
| **Product source** | Drop-down | Collection | Collection, Product list |
| **Collection** — Used when the product source is Collection. | Collection | — | — |
| **Maximum products to show** — Shown when *Product source* is *Collection* | Slider | 8 | 2–16, step 1 |
| **Show "View all" link** — Shown when *Product source* is *Collection* | Checkbox | On | — |
| **Products** — Used when the product source is Product list. | Products | — | — |
| **Layout** | | | |
| **Layout** | Drop-down | Carousel | Carousel, Grid |
| **Products per row on desktop** | Slider | 4 | 3–5, step 1 |
| **Use full page width** | Checkbox | On | — |
| **Vertical spacing** | Drop-down | Regular | Compact, Regular, Spacious |
| **Color scheme** | Color scheme | scheme-1 | — |
| **Product card** | | | |
| **Image ratio** | Drop-down | Portrait | Portrait, Tall, Square |
| **Show vendor** | Checkbox | Off | — |
| **Schedule** | | | |
| **Schedule visibility** | Checkbox | Off | — |
| **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — |
| **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — |