> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/product-tabs.md).

# Product tabs

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% embed url="<https://youtu.be/yepTCzo9QzU>" %}

This section is for displaying products from a selected collection in an engaging and attractive section.

{% tabs %}
{% tab title="Title with select" %}

![](/files/F1eag6JmDpEtYvj3NuT1)
{% endtab %}

{% tab title="Horizontal" %}

![](/files/yCghtq2RtkWMoSB6Gd5k)
{% endtab %}
{% endtabs %}

{% hint style="success" %}
Steps

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

## Section settings

### Section header & general

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.&#x20;

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

Adjust the text alignment (left/center) along with the background color and container type.

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

### Layout

Determine which tab layout you want to display (title with select or horizontal).

Add a call-to-action button to direct customers to collection pages or add a load more products button.

![](/files/1jrTlpTuA8e02WKd9aaP)

### Product cards & grid settings

These parts are for adjusting the product card layout and the product image ratio.

Determine the number of products that can be shown per row and the gap between cards.

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

### **Slider settings**

Select **Enable Slider** to run the slideshow automatically. You can also use pagination and navigation for the section.

![](/files/YdGDn3JsgpcQIc9C3MAe)

## **Block settings**

1. After locating **Product tabs**, click add tabs&#x20;

![](/files/BAFJ9GgUOOKK1SCyjxJd)

2\. Change the **Tab name** and choose a collection to display.

![](/files/BcfF58quvMqfC3BFTVkl)
