# Product tabs

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FwfweKk3ZhsiJJ5slndLf%2FFox-BG%20Light%20(52).jpg?alt=media&#x26;token=9cf8d41b-ad86-471c-b712-f91e9ae2b185" alt=""><figcaption></figcaption></figure>

You can display products from a selected collection in an engaging and attractive section.

## How to add a Product tabs section to your Shopify store

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Product tabs.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Product tabs section

### Section settings

#### :writing\_hand: Section header

{% tabs %}
{% tab title="Section header layout: Horizontal" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F48dHAb7EGOulgGmBenrM%2Fimage.png?alt=media&#x26;token=e52ef2d8-28c5-48c8-9515-70d4d6041f7f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Section header layout: Vertical" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FKgBnhZeFVKkdmhDadQP2%2Fimage.png?alt=media&#x26;token=e73be256-08d7-4be2-89c0-18668e5b4fe0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### ⚙️ Grid settings

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td>Choose to display the section header with the View all button in horizontal or vertical layout.</td></tr><tr><td><strong>Products to show</strong></td><td>Limit the number of products displayed.</td></tr><tr><td><strong>Number of columns on desktop</strong></td><td>Set how many products display per row (2–12 columns).</td></tr><tr><td><strong>Column / Row gap</strong></td><td>Control spacing between items in the grid.</td></tr></tbody></table>

#### 🎠 Carousel settings

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FgIbHgftHJW1RlVoPoo6W%2Fimage.png?alt=media&#x26;token=7251f86f-a9db-432b-a5d8-e32e0825469d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel on desktop</strong></td><td>Turns the static grid into a scrollable carousel (only if items > columns).</td></tr><tr><td><strong>Show navigation / pagination</strong></td><td>Adds arrows or page dots to the carousel.</td></tr></tbody></table>

#### :shopping\_bags: Product card settings

<table><thead><tr><th width="280">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image ratio</strong></td><td>Inherit global settings or choose a fixed ratio for product cards' image.</td></tr><tr><td><strong>Show vendor</strong></td><td>Toggle whether to display the product’s vendor name.</td></tr></tbody></table>

To set up other addons, such as badges, buttons, etc. to the product cards, check out this article:

{% content-ref url="../theme-settings/product-card" %}
[product-card](https://docs.foxecom.com/zest-theme/theme-settings/product-card)
{% endcontent-ref %}

#### 🔘 View all button

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show on heading section</strong></td><td>Enables the “View all” link next to your heading.</td></tr><tr><td><strong>Button label</strong></td><td>Customize the CTA.</td></tr></tbody></table>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F1FxJJa2HeBtHXtr37hhH%2Fimage.png?alt=media&#x26;token=75f952fc-5918-4c38-a39a-7a64b4741852" alt=""><figcaption></figcaption></figure>

#### 📱 Mobile layout

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable swipe on mobile</strong></td><td>Allow horizontal swipe navigation.</td></tr><tr><td><strong>Number of columns</strong></td><td>Choose 1 or 2 columns on mobile.</td></tr></tbody></table>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FWevH17X5eD42ChZgTmpv%2Fimage.png?alt=media&#x26;token=2ccaf191-9131-4f54-bf2c-317506d5b01b" alt=""><figcaption></figcaption></figure>

### Block settings

You can add multiple tabs to the section. In each tab:

* Give the **tab name**. Leave it blank to use the collection name.
* Select a **Collection**.&#x20;

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FS7pEWV6asKY2pUTQAZ1g%2Fimage.png?alt=media&#x26;token=ccbffe72-2c17-41e6-9ddb-0fece2673ce8" alt=""><figcaption></figcaption></figure>

## Best practices

✅ Keep tabs focused and minimal: Use **2–4 tabs maximum** to keep the interface clean and intuitive.

✅  **Avoid showing too many products** in each tab to avoid excessive DOM size. Instead, include the button to direct customers to the product listing page.

{% hint style="info" %}
You might be interested: [my-store-has-a-low-speed-score-how-can-i-improve-it](https://docs.foxecom.com/zest-theme/faqs/generic/my-store-has-a-low-speed-score-how-can-i-improve-it "mention")
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/product-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.