> 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.md).

# Products

**Products** is the group of sections that put individual items in front of shoppers outside the collection pages. These are the rows that do the selling on a homepage or a landing page: a featured collection, a slider built around one hero product at a time, tabs that switch between ranges, and a shoppable outfit. Shoppers meet them in the middle of the page, after a banner has set the scene and before the story sections at the bottom.

Set the collections up in your Shopify admin first. Every section here draws from what is already there, so a thin collection produces a thin row however it is styled.

### 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**.
4. Open the **Products** group and choose the section you need.
5. Select the collection or products, then drag the section into position.
   {% endhint %}

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

### Sections in this group <a href="#sections-in-this-group" id="sections-in-this-group"></a>

| Section                                                                                     | What it does                                                                                        | Use it when                                                             |
| ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| [Featured collection](/velare/customize-your-pages/products/featured-collection.md)         | Shows items from one collection as a grid or carousel, with a button through to the full collection | You want a straightforward product row, the workhorse of most homepages |
| [Product tabs](/velare/customize-your-pages/products/product-tabs.md)                       | Puts several collections behind tabs, each with its own title and description                       | Your ranges are alternatives shoppers should compare in one place       |
| [Featured product slider](/velare/customize-your-pages/products/featured-product-slider.md) | Gives each product a full slide with its own promotional image and wording                          | A few hero products deserve a story rather than a card                  |
| [Shop by outfit](/velare/customize-your-pages/products/shop-by-outfit.md)                   | Pairs a look, as a photo or video, with the products that make it up                                | You sell things that are bought together, such as clothing or interiors |

### Suggested reading order <a href="#suggested-reading-order" id="suggested-reading-order"></a>

1. Start with [Featured collection](/velare/customize-your-pages/products/featured-collection.md). Its collection, carousel, and padding settings repeat almost unchanged across the rest of this group.
2. Read [Product tabs](/velare/customize-your-pages/products/product-tabs.md) next if one row is not enough, keeping in mind that only the first tab is seen by most visitors.
3. Read [Featured product slider](/velare/customize-your-pages/products/featured-product-slider.md) and [Shop by outfit](/velare/customize-your-pages/products/shop-by-outfit.md) last. Both need custom photography per block, so budget the images before you build them.
4. Review [Product cards](/velare/customize-your-pages/product-cards.md) and [Badges](/velare/customize-your-pages/badges.md) once, since those settings control how every product in every section here is presented.

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

* [Collections](/velare/customize-your-pages/collections.md): the sections that point shoppers at categories rather than items
* [Shopables](/velare/customize-your-pages/shopables.md): media sections where shoppers buy from the image or video itself
* [Product cards](/velare/customize-your-pages/product-cards.md) and [Badges](/velare/customize-your-pages/badges.md): the store wide look of every product shown here
* [Product page](/velare/customize-your-pages/product-page.md): where every product card leads


---

# 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.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.