# Product tabs

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

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

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

<Tabs>
<Tab title="Vertical">

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

</Tab>

<Tab title="Horizontal">

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

</Tab>
</Tabs>

* 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)

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

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

![products)](https://docs-assets.foxecom.app/sleek-theme/image_9uojsGLY.png)

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

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

#### **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.

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

* **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.

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

#### **Tab settings**

Select a navigation style for your section.

<Tabs>
<Tab title="Design 1">

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

</Tab>

<Tab title="Design 2">

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

</Tab>
</Tabs>

### **Block settings**

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

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