# Product tabs

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FUUuQ4NHWgoEh1pea8nyH%2Fimage.png?alt=media&#x26;token=4e7e3173-de9c-4fab-9d34-54ed2cdb9b13" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
Steps

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

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FtzawzsEJCJR06O2KXAgT%2Fimage.png?alt=media&#x26;token=62c7111c-d07c-422c-a325-37a4aaa670c0" alt=""><figcaption></figcaption></figure>

### Section header setting

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FoRTIlv4zgGOrDyEHlRCQ%2Fimage.png?alt=media&#x26;token=b8eb2e59-09bc-4de2-80bf-a468766d75d8" alt=""><figcaption></figcaption></figure>

Tab header styles include:

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FC4X6IoXi8er1IHriZ7ao%2Fimage.png?alt=media&#x26;token=0a9cbc4d-68a2-45df-b3dc-0d09996ad720" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 2" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FL2yVOTq5HUDFQOAmMaiH%2Fimage.png?alt=media&#x26;token=b402b7cf-7557-4e66-87ef-5d6294a5823f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 3" %}

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F98o2JTrTOUyjluPJpoei%2Fimage.png?alt=media&#x26;token=4651a219-bb4c-4a05-8686-9a352e525604" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FhNaK67vCI6HJmdNe8xdN%2Fimage.png?alt=media&#x26;token=3f713780-aed5-4137-9cc1-b975bb701a28" alt=""><figcaption></figcaption></figure>

:writing\_hand: Learn more about customizing Product cards: [product-card](https://docs.foxecom.com/megamog-theme/theme-settings/product-card "mention")

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FeOaNnzOS3no1b7oUHaav%2Fimage.png?alt=media&#x26;token=a7c460a9-35de-40b3-ad3c-1bd36e249c32" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fjl2Op5EHYkaQvgQsicNs%2Fimage.png?alt=media&#x26;token=41536b87-c46c-48d4-8ffa-c9a87f295395" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FadV3pU6PVxEv6QhUZaWX%2Fimage.png?alt=media&#x26;token=00d4b261-935b-4396-a983-c9f95f8cf5e0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F9kL2pAzO8tltGa84pFE3%2Fimage.png?alt=media&#x26;token=1d3be329-371c-478e-a3de-dce8846b2331" alt=""><figcaption></figcaption></figure>

## Block settings

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FpKNyBRChJOlXmwWyEe6X%2Fimage.png?alt=media&#x26;token=a30ee386-3d1d-41e8-b51e-742d93afc58d" alt=""><figcaption></figcaption></figure>

### Tab block settings

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FnZHz5VRSkQ9LLc1bS240%2Fimage.png?alt=media&#x26;token=153616e5-9457-43f1-88c7-055f7c80b754" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fksex3dja5gBH7CHt6sGV%2Fimage.png?alt=media&#x26;token=de507021-44d6-41bc-a190-a477bb2d4e1d" alt=""><figcaption></figcaption></figure>

### Image card settings

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FPp6qgJlJMoV5QFpshzHd%2FScreenshot_1.png?alt=media&#x26;token=2a458dde-a045-479e-839e-db95f767cd84" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FubiOF98DKBsVDPnK5RNT%2Fimage.png?alt=media&#x26;token=951414b9-c47b-4dc1-8a35-0a32bfdd4ebc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FMf4LrCgyLCcjBYZMe5gU%2FScreenshot_1.png?alt=media&#x26;token=745e7ca6-b5ba-4fae-aaed-22a7dc09acce" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2F3qmv5kq6hJuUZhOo1W6B%2FScreenshot_1.png?alt=media&#x26;token=239757c2-b56c-46a8-8ee3-8a73f13ae827" alt=""><figcaption></figcaption></figure>