# Product tabs

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(52)_GIfTqjqI.jpg)

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 type="success">

Steps

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

</Hint>

## How to edit a Product tabs section

### Section settings

#### ✍ Section header

<Tabs>
<Tab title="Section header layout: Horizontal">

![image](https://docs-assets.foxecom.app/zest-theme/image_hYnRdwkC.png)

</Tab>

<Tab title="Section header layout: Vertical">

![image](https://docs-assets.foxecom.app/zest-theme/image_ZFXhMjEe.png)

</Tab>
</Tabs>

#### ⚙️ Grid settings

<Table widths="280,auto">

| Setting | Description |
| --- | --- |
| **Layout** | Choose to display the section header with the View all button in horizontal or vertical layout. |
| **Products to show** | Limit the number of products displayed. |
| **Number of columns on desktop** | Set how many products display per row (2–12 columns). |
| **Column / Row gap** | Control spacing between items in the grid. |

</Table>

#### 🎠 Carousel settings

![image](https://docs-assets.foxecom.app/zest-theme/image_84R9wYze.png)

<Table widths="280,auto">

| Setting | Description |
| --- | --- |
| **Enable carousel on desktop** | Turns the static grid into a scrollable carousel (only if items > columns). |
| **Show navigation / pagination** | Adds arrows or page dots to the carousel. |

</Table>

#### 🛍️ Product card settings

<Table widths="280,auto">

| Setting | Description |
| --- | --- |
| **Image ratio** | Inherit global settings or choose a fixed ratio for product cards' image. |
| **Show vendor** | Toggle whether to display the product’s vendor name. |

</Table>

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

<PageLink href="https://docs.foxecom.com/zest-theme/theme-settings/product-card">Product card</PageLink>

#### 🔘 View all button

<Table widths="250,auto">

| Setting | Description |
| --- | --- |
| **Show on heading section** | Enables the “View all” link next to your heading. |
| **Button label** | Customize the CTA. |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_pqmJWWjE.png)

#### 📱 Mobile layout

<Table widths="250,auto">

| Setting | Description |
| --- | --- |
| **Enable swipe on mobile** | Allow horizontal swipe navigation. |
| **Number of columns** | Choose 1 or 2 columns on mobile. |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_hdaHnr7l.png)

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

![image](https://docs-assets.foxecom.app/zest-theme/image_1pXRSYnL.png)

## 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 type="info">

You might be interested: [My store has a low speed score - How can I improve it?](/zest-theme/faqs/generic/my-store-has-a-low-speed-score-how-can-i-improve-it)

</Hint>