# Product tabs

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FiAfJSUKaTzymtNZqNUnJ%2Fimage.png?alt=media&#x26;token=608f7996-332d-475a-b133-b9513d168ca1" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F9BRWLF3dTwqhI2O16na5%2Fimage.png?alt=media&#x26;token=9ec74c1e-9c10-41a0-a747-99cf5b0d26ae" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FHJKzd1DIRUfobDgN2949%2Fimage.png?alt=media&#x26;token=3c4e6929-5de9-43e2-8501-15faf6f6995d" 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?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCm7E3X5jOyjqu02ilFVm%2Fimage.png?alt=media&#x26;token=26b1dd46-98bb-4013-bbf6-3c7ac5c9dc50" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fz9boYZUr1bzmcRNe4gQr%2Fimage.png?alt=media&#x26;token=1e942be5-295d-4973-9959-1bd804607b0d" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FEiUEyw6no93NSVrbfan1%2Fimage.png?alt=media&#x26;token=0ea034ac-00e4-47a3-a19a-0b69cb173859" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FvhqQsqYS0A0WU3tnwJOI%2Fimage.png?alt=media&#x26;token=5ffe1b3a-deed-4aa3-9400-85cdbcac57cf" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FfWv9d5YwJhAe6rc9IOso%2Fimage.png?alt=media&#x26;token=316fb803-c915-45c9-b5fc-92ec45b6c9b1" alt=""><figcaption></figcaption></figure>

#### **Tab settings**

Select a navigation style for your section.

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FkOVJkcdbovxDaUBAmCIc%2Fimage.png?alt=media&#x26;token=932e53f9-f2d0-433e-992b-65a7ffee3d21" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 2" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FMFmhXgfwMVMb1iTVOtUi%2Fimage.png?alt=media&#x26;token=5f7c2a91-d6ac-4cbb-9789-223b268d3c46" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FolUolPGnKbTljdCFGRzu%2Fimage.png?alt=media&#x26;token=4d99e4e9-faa5-4a1b-aff0-77265062e5d7" alt=""><figcaption></figcaption></figure>