> 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/collection-tabs.md).
# Collection tabs
**Collection tabs** puts several collections behind a row of tabs, so a shopper can switch between categories and see what is inside each one without leaving the page. It suits catalogues where the categories are alternatives to each other, for example new in against best sellers, or one room against another. Shoppers meet it in the middle of the homepage or a landing page, where it does the work of three product rows in the height of one.
Because only the active tab is on screen, put the category you most want browsed first: it is the one most shoppers will ever see.
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the template where the tabs should appear, usually the homepage.
3. Click **Add section** and choose **Collection tabs** from the **Collections** group.
4. Add one block per tab and select the collection each tab shows.
5. Set how many items appear and how many fit per row, then check the mobile preview.
{% endhint %}
*Result:* the collections appear as tabs in the order of the blocks, with the first one open by default.
### Section settings
#### General settings
| Setting | Description |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** |
How far the tabs and their contents spread across the screen.
Stretch width: the content runs close to both screen edges whatever the screen size.
Fixed width: the content lines up with the page width set in Theme settings > Layout, so it matches the sections above and below.
Full width: the section fills the whole browser window and resizes with it.
|
| **Color scheme** | The background and text colours of the section, including the tabs themselves. Schemes are defined in **Theme settings > Colors**, so switching scheme is how you make the tab strip visible against the page. |
#### Section header
| Setting | Description |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading** | A short line above the title, often a label such as `Browse` that frames what the tabs are for. |
| **Heading** | The title shoppers read first, the line that explains what these categories have in common. |
| **Description** | A sentence under the title, useful when the choice between tabs is not obvious from their names alone. |
| **Highlight text** | A short phrase called out from the rest of the header, used to draw the eye to the one word that matters, such as a season or a discount. |
| **Heading size** |
How large the title is rendered.
Heading 1: the biggest, when the tabs are the main content of the page.
Heading 2: a middle size that suits most homepages.
Heading 3: the smallest, when the tabs support the content around them.
|
| **Alignment** |
Where the title and its supporting lines sit above the tabs.
Left: lines up with the first tab and reads naturally.
Center: balanced over a full width tab strip, the common choice.
Right: rarely needed, use it to mirror a neighbouring section.
|
| **Show view all button** | Adds a button that opens the whole of whichever collection is active, instead of the handful of items on show. Turn it on when each category holds far more than the tab displays. |
| **Button label** | The words on that button. Something specific such as `Shop the collection` sets a clearer expectation than a generic label. |
#### Carousel settings
| Setting | Description |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Maximum items to show** | How many items from the active collection appear, from 2 to 12. Keep it low enough that shoppers reach the next section rather than scrolling through a whole category. |
| **Items per row on desktop** | How many items sit side by side on a wide screen. More per row means smaller images and titles that wrap sooner. |
| **Column gap** |
The space between items.
No gap: items touch, for a dense, catalogue like grid.
Small and Medium: keep the items separate without wasting width.
Large: gives each item room, best with only two or three per row.
|
| **Show navigation** | Shows the previous and next arrows for moving through the items in the open tab. Keep them on for desktop, where shoppers have no swipe gesture. |
| **Navigation position** | Where those arrows sit: **Default** keeps them with the items, **Section header** moves them up beside the title so they stay in one place as shoppers switch tabs. |
| **Show pagination** | Shows the dots under the row, which tell shoppers how many items the open tab holds and where they are in the list. |
| **Reveal next slide** | Leaves part of the following item peeking in at the edge, a visual hint that there is more to swipe to. |
| **Items per row on mobile** | How many items fit across a phone screen. One gives large, readable cards; two lets shoppers compare but shrinks the images. |
#### 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 next section crowds the tabs. |
#### Section divider
| Setting | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin horizontal line at the section edge, useful when this section and its neighbour share a background colour and run into each other. |
### Block settings
Add one block per tab. The order of the blocks is the order of the tabs, and the first block is what shoppers see before they touch anything.
| Setting | Description |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Collection** | Which category this tab opens. Only stocked collections belong here, since an empty tab leaves shoppers looking at a blank panel. |
| **Image** | A picture used for this tab, which lets a category be recognised by its imagery rather than by its name alone. |
| **Title** | The wording on the tab. Keep it to one or two words, because long tab labels crowd each other and wrap badly on phones. |
### What changes on the storefront
* Shoppers see one tab open at a time and switch categories without the page reloading.
* Only the first tab is visible on arrival, so the order of the blocks decides which category most visitors actually browse.
* Long tab labels are what break this section on mobile, more often than the number of tabs itself.
### Related pages
* [Collections](/velare/customize-your-pages/collections.md): the group this section belongs to
* [Collection highlights](/velare/customize-your-pages/collections/collection-highlights.md): a similar switching panel that shows one large image per category
* [Product tabs](/velare/customize-your-pages/products/product-tabs.md): the same tabbed idea built around products, with a description per tab
* [Colors](/velare/set-up-your-store/colors.md) and [Product cards](/velare/customize-your-pages/product-cards.md): where the schemes and the look of each item 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/collection-tabs.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.