> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/products/featured-collection.md).

# Featured collection

**Featured collection** shows items from one collection as a row of product cards, complete with image, title, price, and whatever badges or quick add controls your theme settings enable. It is the workhorse of most homepages: the section that turns a visitor who arrived for the brand into someone looking at actual products. Shoppers meet it in the middle of the page, and a button beside the heading carries them through to the full collection when the row is not enough.

The list fills itself from the collection you select, so a new arrival added in your admin appears here without anyone touching the theme.

<figure><img src="/files/8Ks2BIgMet7j2QX9GbHj" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template where the products should appear, usually the homepage.
3. Click **Add section** and choose **Featured collection** from the **Products** group.
4. Under **Collection**, select which collection the products come from.
5. Set how many items appear and how many fit per row, then check the mobile preview.
   {% endhint %}

*Result:* the products appear as cards styled by **Theme settings > Product cards**, so they match the collection pages automatically.

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-settings" id="general-settings"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far the row of products spreads across the screen.</p><ul><li><strong>Stretch width</strong>: the cards run close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the cards line up with the page width set in <strong>Theme settings > Layout</strong>, which keeps them level with the sections above and below.</li><li><strong>Full width</strong>: the section fills the whole browser window and resizes with it.</li></ul> |
| **Color scheme**  | The background and text colours of the section. Schemes are defined in **Theme settings > Colors**, so alternating scheme between product rows stops a long homepage from blurring into one block.                                                                                                                                                                                                                                                                            |

#### Section header <a href="#section-header" id="section-header"></a>

| Setting                  | Description                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading**           | A short line above the title, often a label such as `New in` that tells shoppers what kind of products follow.                                                                                                                                                                                                                                                                |
| **Heading**              | The title shoppers read first, the line that says why these products are grouped together.                                                                                                                                                                                                                                                                                    |
| **Description**          | A sentence under the title, useful when the grouping needs justifying, for example a seasonal edit or a restock.                                                                                                                                                                                                                                                              |
| **Heading size**         | <p>How large the title is rendered.</p><ul><li><strong>Heading 1</strong>: the biggest, for the one row you most want noticed.</li><li><strong>Heading 2</strong>: a middle size that suits most product rows.</li><li><strong>Heading 3</strong>: the smallest, for a supporting row further down the page.</li></ul>                                                        |
| **Alignment**            | <p>Where the title and its supporting lines sit above the cards.</p><ul><li><strong>Left</strong>: lines up with the first card and reads naturally.</li><li><strong>Center</strong>: balanced over a full row, and the usual choice when the view all button sits beneath.</li><li><strong>Right</strong>: rarely needed, use it to mirror a neighbouring section.</li></ul> |
| **Show view all button** | Adds a button through to the whole collection, rather than the handful of items on show. Turn it on whenever the collection holds more than the row displays.                                                                                                                                                                                                                 |
| **Button label**         | The words on that button. Something specific such as `Shop all knitwear` sets a clearer expectation than a generic label.                                                                                                                                                                                                                                                     |

#### Collection <a href="#collection" id="collection"></a>

| Setting                      | Description                                                                                                                                                                                                                                                                                                                          |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Collection**               | Which collection the products come from. This is also where the view all button leads, so pick one that is stocked and worth browsing.                                                                                                                                                                                               |
| **Maximum items to show**    | How many products appear, from 2 to 12. Keep it to one or two rows, since shoppers who want more will use the view all button.                                                                                                                                                                                                       |
| **Items per row on desktop** | How many cards sit side by side on a wide screen, from 2 to 6. Fewer per row means larger images, more per row means more choice visible at once.                                                                                                                                                                                    |
| **Column gap**               | <p>The space between cards.</p><ul><li><strong>No gap</strong>: cards touch, for a dense, catalogue like grid.</li><li><strong>Small</strong> and <strong>Medium</strong>: keep the products separate without wasting width.</li><li><strong>Large</strong>: gives each product room, best with only two or three per row.</li></ul> |

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

| Setting                     | Description                                                                                                                                                              |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Enable carousel**         | Turns the grid into a swipeable row instead of wrapping cards onto more lines. Use it when you want twelve products available without twelve products of page height.    |
| **Show navigation**         | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the products off screen.                                     |
| **Navigation position**     | Where those arrows sit: **Default** keeps them with the row of cards, **Section header** moves them up beside the title, which suits pages that stack several carousels. |
| **Show pagination**         | Shows the dots under the row, which tell shoppers how many products are in the carousel and where they are in it.                                                        |
| **Reveal next slide**       | Leaves part of the following card peeking in at the edge, a visual hint that there is more to swipe to.                                                                  |
| **Items per row on mobile** | How many cards fit across a phone screen. One gives large images and readable prices; two lets shoppers compare but shrinks everything.                                  |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                          |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| **Top**    | Space added above the section. Increase it when the heading sits too close to the section before it. |
| **Bottom** | Space added below the section. Increase it when the next row of products crowds this one.            |

#### Section divider <a href="#section-divider" id="section-divider"></a>

| Setting          | Description                                                                                                                                                     |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin horizontal line at the section edge, which helps shoppers see where one product row ends and the next begins when both use the same colour scheme. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see products from the selected collection, presented exactly as they are on the collection pages, since both use **Theme settings > Product cards**.
* The row updates on its own as you add or remove products from that collection in your admin.
* If the collection holds fewer products than **Maximum items to show**, the row is simply shorter, it does not pull items from anywhere else.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Products](/velare/customize-your-pages/products.md): the group this section belongs to
* [Product tabs](/velare/customize-your-pages/products/product-tabs.md): the version that puts several collections behind tabs
* [Product cards](/velare/customize-your-pages/product-cards.md) and [Badges](/velare/customize-your-pages/badges.md): the store wide look of every card shown here
* [Quickview](/velare/customize-your-pages/overlay-group/quickview.md): the popup shoppers can open from these cards


---

# 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/products/featured-collection.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.