# Product tabs

<figure><img src="/files/2k2HKRGnK6YLjYIQKsWL" alt=""><figcaption></figcaption></figure>

Product tabs display products from selected collections in an engaging and attractive section.

You can show off new collections, best-sellers, or on sales items all together so customers can explore them right away!

## How to add a Product tabs section

{% 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

#### Section header

* **Layout**: The position of the section header vs the tabs.

{% tabs %}
{% tab title="Vertical" %}

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

{% tab title="Horizontal" %}

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

* Heading size: The font size of the section header.

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text)

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

#### Grid settings

Set the **maximum number of products to show** per collection (between 2-12 products) and the **number of columns on desktop** (between 2-6 columns).

You can also adjust the gap between columns and rows.

<figure><img src="/files/9uojsGLY8wr1U1mJMLCx" alt=""><figcaption><p> products)</p></figcaption></figure>

#### Product cards

* **Image ratio**: The ratio of image shown on product cards.

#### Mobile layout

* **Number of columns on mobile**: 1/ 2 columns.
* **Enable swipe on mobile**: Show the product list as swipeable on mobile view instead of the default grid layout.

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

#### **View all button**

* **Show on heading section on desktop**: If the option is selected, the button will display beside the tab names. By default, the view all button when added will show at the end of the product list.

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

* **Button label**: Add a label to show the button.&#x20;
* **Button link**: Link the button to your desired page. For example: Your all products page.
* **Button style**: Primary button/ Secondary button/ Underline button.

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

#### **Tab settings**

Select a navigation style for your section.

{% tabs %}
{% tab title="Design 1" %}

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

{% tab title="Design 2" %}

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

### **Block settings**

Insert the **Tab name** and select a **Collection** to display the products of it.

<figure><img src="/files/4b9WzMqEFPPBAZQFdD9s" alt=""><figcaption></figcaption></figure>


---

# 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/sleek-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.