# Product tabs

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

Display your products from a selected collection in an engaging and attractive section.

<Hint type="success">

Steps

1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Product tabs**
3. **Save**

</Hint>

## Section settings

### Layout settings

**Enable boxed layout** for your section and the **Grid bordered** if needed.

You can also set the **Color scheme** for your Boxed layout.

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

### Section header setting

Insert your section's heading, its size, and select the tab header style.

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

Tab header styles include:

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

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

</Tab>

<Tab title="Style 2">

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

</Tab>

<Tab title="Style 3">

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

</Tab>
</Tabs>

### Product cards settings

Select your Product card's design layout and its image aspect ratio.

You can also show the product vendors in this section.

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

✍ Learn more about customizing Product cards: [Product card](https://docs.foxecom.com/megamog-theme/theme-settings/product-card)

### Grid settings

Select the number of shown products (4-18 products) and the number of products per row (3-8 products).

Then, adjust the gap between columns and rows accordingly (0-50px).

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

### Slider settings

You can check the **Enable slider** option to make your product list appear as a slider (the number of products to show > the number of products per row).

Show the pagination or navigation, or both to let visitors navigate the slider.

Navigation can be added Outside container/ Inside container/ Inline.

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

### Mobile settings

Adjust how the section displays on mobile view.&#x20;

* Mobile layout: Inherit/ 1 column/ 2 columns;
* Column gap on mobile view (0-50px);
* Row gap on mobile view (0-50px);
* Enable swipe on mobile or not.

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

### View more button

The view more button is used to redirect visitors to the collection page.

Give your button a **labe**l and select the **button style**. If you don't want to show the view more button, simply leave the label blank.

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

## Block settings

In the Product tabs section, you can add Tab blocks and an Image card.

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

### Tab block settings

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

Select the collection you want to showcase in the tab.

Give the tab a heading.

You can also add an icon before your heading and adjust the icon width if needed.

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

### Image card settings

You can select/upload the image for the desktop and mobile view separately.

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

Give the image a link and select how the link is applied (on the whole image card or just the CTA button).

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

Then, you can add content to your card using the Heading, Subheading, and Description text fields.&#x20;

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

Change the Description style and select the position of the card content and its alignment.

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