> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/product-tabs.md).

# Product tabs

<figure><img src="/files/GIfTqjqIYFbvsGQcJ0Lw" 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="/files/hYnRdwkCbjTvUIfyb0DO" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/ZFXhMjEewpccST0pYPqv" 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="/files/84R9wYzexnyRq8NXexLz" 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="/pages/VRViDTCDEUgZDny5PXGM" %}
[Product card](/zest-theme/theme-settings/product-card.md)
{% 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="/files/pqmJWWjEKsQxnWgiDnl1" 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="/files/hdaHnr7lfCtgnXLrPF2X" 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="/files/1pXRSYnL6w4A3f6ksPAb" 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?](/zest-theme/faqs/generic/my-store-has-a-low-speed-score-how-can-i-improve-it.md)
{% endhint %}