> 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/collections/explore-collections.md).
# Explore collections
**Explore collections** shows a small, hand picked set of categories as image cards, so shoppers are pointed towards a few relevant places rather than the whole catalogue. It is the lighter cousin of [Collection list](/velare/customize-your-pages/collections/collection-list.md): the same card layout with fewer controls, meant for a suggested or seasonal grouping. Shoppers meet it partway down the homepage or a landing page, where it offers a next step to someone who has scrolled without clicking anything.
Because you choose the collections by hand, treat it as an editorial recommendation rather than a directory.
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the template where the suggestions should appear, for example the homepage.
3. Click **Add section** and choose **Explore collections** from the **Collections** group.
4. Add one block per category and select the collection in each block.
5. Set the image ratio and where the wording sits, then check the mobile preview.
{% endhint %}
*Result:* the chosen collections appear as cards in the order of the blocks, each linking to its collection page.
### Section settings
#### General settings
| Setting | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Section width** |
How far the row of cards spreads across the screen.
Stretch width: the cards run close to both screen edges whatever the screen size.
Fixed width: the cards line up with the page width set in Theme settings > Layout, keeping them level with the sections above.
Full width: the section fills the whole browser window and resizes with it.
|
| **Color scheme** | The background and text colours of the section. Schemes are defined in **Theme settings > Colors**, so a softer scheme here keeps a suggestion from competing with the main product rows. |
#### Section header
| Setting | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading** | The title shoppers read first, the line that says why these particular categories are being suggested, for example `You might also like`. |
| **Description** | A sentence under the title, useful when the reason for the suggestion is not obvious from the category names. |
| **Heading size** |
How large the title is rendered.
Heading 1: the biggest, when the suggestions are the main content of the page.
Heading 2: a middle size that suits most placements.
Heading 3: the smallest, which suits a quiet suggestion near the footer.
The shape every card image is cropped to, so categories with photos of different sizes still line up in a tidy row.
Adapt to image: keeps each picture as uploaded, nothing is cut off but the cards end up different heights.
Square (1:1): the most forgiving when pictures come from different sources.
Portrait (3:4): a tall crop that gives each suggestion more presence.
Landscape (4:3): a wide crop that keeps the row compact.
|
| **Content position** |
Where the category name sits in relation to its picture.
Overlay image: the name sits on the picture, which looks bolder but needs images with calm space in them.
Below image: the name sits under the picture, which stays readable whatever the photography looks like.
|
| **Content alignment** |
Where the category name starts within its card.
Left: reads naturally and lines the names up down the row.
Center: gives each card a more symmetrical, editorial look.
|
| **Show product count** | Adds the number of items in each category under its name. It reassures shoppers there is something to browse, and exposes categories that are nearly empty. |
| **Items per row on desktop** | How many cards sit side by side on a wide screen. Two or three keeps a suggestion feeling curated, more starts to read like a directory. |
| **Column gap** | The space between cards. Wider gaps make each suggestion feel deliberate, tighter gaps make the group read as one block. |
#### Overlay image settings
| Setting | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Text color** |
The colour of the category name where it sits on top of the picture. Check it against your darkest and lightest images, not just one of them.
Note: only applies when Content position is set to Overlay image.
|
#### Carousel settings
| Setting | Description |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation** | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the cards off screen. |
| **Show pagination** | Shows the dots under the row, which tell shoppers how many suggestions there are and where they are in the list. |
| **Items per row on mobile** | How many cards fit across a phone screen. One gives large, tappable cards; two lets shoppers compare suggestions at a glance. |
#### Section padding
| 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 footer or the next section crowds the cards. |
#### Section divider
| Setting | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin horizontal line at the section edge, useful when this row and its neighbour share a background colour and run into each other. |
### Block settings
Add one block per suggested category. The order of the blocks is the order shoppers see.
| Setting | Description |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Collection** | Which category this card opens. Suggest collections you actually want browsed, not everything you stock. |
| **Image** | The picture on this card. Setting it here overrides the image the collection carries in your admin, which is how you keep suggestions looking consistent. |
| **Title** | The wording on the card. Use it when the collection's own name is too long or too internal to show shoppers. |
### What changes on the storefront
* Shoppers see a short row of category cards, and clicking one opens that collection page.
* A block with no **Image** falls back to the collection's own image from the admin, so an unstyled card usually means the collection has no picture there either.
* Unlike [Collection list](/velare/customize-your-pages/collections/collection-list.md), this section has no view all button, so it is a set of suggestions rather than a route to the full catalogue.
### Related pages
* [Collections](/velare/customize-your-pages/collections.md): the group this section belongs to
* [Collection list](/velare/customize-your-pages/collections/collection-list.md): the fuller version, with a view all button and more carousel control
* [Collection page](/velare/customize-your-pages/collection-page.md): where every card leads
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the schemes and page width come from
---
# 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/collections/explore-collections.md?ask=&goal=
```
`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.