# Product tabs

<div data-full-width="true"><figure><img src="/files/dHaPBf9wiTvRsPXBrcnP" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=foxecom&#x26;utm_medium=help_center_foxify_product_tabs&#x26;utm_campaign=anchor-text&#x26;utm_term=explore_foxecom_affiliate_program_perks_now">Explore FoxEcom Affiliate program perks now</a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

Product tabs can be a great way to showcase your highlighted collections in one section.

## Content settings

Click **Add tab** to add a new tab to your **Product tabs** section.

<figure><img src="/files/ZH0BDIHJLPSVR2FPNWQO" alt=""><figcaption></figcaption></figure>

To each of the tabs, select your Collection and add the **Tab title** if needed.&#x20;

<figure><img src="/files/txT3abULmCqfiVoyLDfp" alt=""><figcaption></figcaption></figure>

Then, select your **Tabs header style** to your liking and the number of products to show on each tab.

<figure><img src="/files/SThpJxTVDtlOcj8QMtAl" alt=""><figcaption></figcaption></figure>

* Tabs header style:

{% tabs %}
{% tab title="Inline style 1" %}

<figure><img src="/files/rjtJMhpbBJREwJyBKJpN" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Inline style 2" %}

<figure><img src="/files/8CzENNhQdHIok2BgMaey" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* Divider: This option is available when the **Tabs header style** is **Inline style 1.**

{% tabs %}
{% tab title="Show divider" %}

<figure><img src="/files/Ok7dqrcUXmfOtiZcNzqp" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Product card settings

<figure><img src="/files/bKvghJ9sKcEAPagtNanr" alt=""><figcaption></figcaption></figure>

Customize your Card style, Image aspect ratio, and Text alignment. You can either set them as **Inherit from theme settings** or otherwise.

## Device responsiveness

The section also comes with settings for the Desktop layout and Mobile layout separately.&#x20;

<figure><img src="/files/KlzzS2OPlPPVxUt5f6Ut" alt=""><figcaption></figcaption></figure>

### Desktop layout

* Number of columns per tab: between 1 and 12.
* Column gap: between 0 - 100px.

<figure><img src="/files/0Wrbv0DIudGCSKojcPTw" alt=""><figcaption></figcaption></figure>

### Mobile layout

* Number of columns: to display the products in 1 or 2 columns.
* Column gap (when the number of columns is set as 2 columns): between 0 - 50px.
* Swipe on mobile: when enabled, the number of columns you set earlier will no longer work.


---

# 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/foxify-app/legacy-editor/sections-and-presets/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.
