> 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/product-tabs.md).

# Product tabs

**Product tabs** lets you build a row of tabs, each tied to a collection and each with its own title and description, so shoppers can move between ranges without the page reloading. It does the work of several product rows in the height of one, which is why it suits homepages where new in, best sellers, and sale all want the same spot. Shoppers meet it in the middle of the page and switch tabs to see a different set of products in place.

Only the first tab is open when the page loads, so put the range you most want browsed at the front.

<figure><img src="/files/UwwE7WRxcI5N4gCpMxS1" 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 tabs should appear, usually the homepage.
3. Click **Add section** and choose **Product tabs** from the **Products** group.
4. Add one block per tab, select its collection, and give it a short title.
5. Set how many products appear and how many fit per row, then check the mobile preview.
   {% endhint %}

*Result:* the tabs appear in the order of the blocks, with the products of the first one shown by default.

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

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the tabs and their products spread across the screen.</p><ul><li><strong>Stretch width</strong>: the content runs close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the content lines up with the page width set in <strong>Theme settings > Layout</strong>, keeping it 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></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colours of the section, including the tab strip. Schemes are defined in <strong>Theme settings > Colors</strong>, so switching scheme is how you make the tabs visible against the page.</td></tr></tbody></table>

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

| Setting          | Description                                                                                                                                                                                                                                                                                                                     |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading**   | A short line above the title, often a label such as `Browse the range` that frames what the tabs are for.                                                                                                                                                                                                                       |
| **Heading**      | The title shoppers read first, the line that says what the tabs have in common.                                                                                                                                                                                                                                                 |
| **Description**  | A sentence under the title, useful when the choice between tabs is not obvious from their names alone.                                                                                                                                                                                                                          |
| **Heading size** | <p>How large the title is rendered.</p><ul><li><strong>Heading 1</strong>: the biggest, when the tabs are the main content of the page.</li><li><strong>Heading 2</strong>: a middle size that suits most homepages.</li><li><strong>Heading 3</strong>: the smallest, when the tabs support the content around them.</li></ul> |
| **Alignment**    | <p>Where the title and its supporting lines sit above the tab strip.</p><ul><li><strong>Left</strong>: lines up with the first tab and reads naturally.</li><li><strong>Right</strong>: pushes the heading to the far side, useful when the tabs themselves sit left and you want the two separated.</li></ul>                  |

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

| Setting                      | Description                                                                                                                                                                                                                                                                                                                          |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Maximum items to show**    | How many products from the open tab appear, from 2 to 12. Keep it low enough that shoppers still reach the section below.                                                                                                                                                                                                            |
| **Items per row on desktop** | How many cards sit side by side on a wide screen. Fewer per row means larger images, more per row means more choice at a glance.                                                                                                                                                                                                     |
| **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> |
| **Show navigation**          | Shows the previous and next arrows for moving through the products in the open tab. Keep them on for desktop, where shoppers have no swipe gesture.                                                                                                                                                                                  |
| **Show pagination**          | Shows the dots under the row, which tell shoppers how many products the open tab holds and where they are in the list.                                                                                                                                                                                                               |
| **Reveal next slide**        | Leaves part of the following card peeking in at the edge, a visual hint that there is more to swipe to.                                                                                                                                                                                                                              |

#### Mobile options <a href="#mobile-options" id="mobile-options"></a>

| Setting                     | Description                                                                                                                             |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **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. |

#### Block setting <a href="#block-setting" id="block-setting"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show view all button</strong></td><td>Adds a button through to the whole collection behind the open tab, rather than the few products on show. Turn it on when each range holds far more than the row displays.</td></tr><tr><td><strong>Hide tab description on mobile</strong></td><td>Drops the per tab sentence on phones, so shoppers reach the products without scrolling past a paragraph on every tab they try.</td></tr></tbody></table>

#### 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 section crowds the products.                |

### Block settings <a href="#block-settings" id="block-settings"></a>

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 collection this tab shows products from. Avoid empty collections, since an empty tab leaves shoppers looking at a blank panel.                    |
| **Title**       | The wording on the tab itself. Keep it to one or two words, because long labels crowd each other and wrap badly on phones.                              |
| **Description** | A sentence shown when this tab is open, for saying what makes this range different. It can be hidden on phones with **Hide tab description on mobile**. |

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

* Shoppers see one tab open at a time and switch ranges without the page reloading.
* Only the first tab is visible on arrival, so the order of the blocks decides which range most visitors actually browse.
* The products themselves are drawn from the collections, so the tabs stay current as you edit those collections in your admin.

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

* [Products](/velare/customize-your-pages/products.md): the group this section belongs to
* [Featured collection](/velare/customize-your-pages/products/featured-collection.md): a single collection row, when one range is enough
* [Collection tabs](/velare/customize-your-pages/collections/collection-tabs.md): the same tabbed idea aimed at categories rather than products
* [Product cards](/velare/customize-your-pages/product-cards.md): the store wide look of every card shown here


---

# 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/product-tabs.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.