# Product tabs

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpxN3diSYALmJSHyqrc2a%2FFox-BG%20Light%20(5).jpg?alt=media&#x26;token=f7353a98-ec83-4aa0-9441-67969b543c61" alt=""><figcaption></figcaption></figure>

Display multiple product categories in clean, easy-to-browse tabs that guide customers through your best collections.

## How to add a Product tabs section to your Shopify store

{% hint style="success" %}

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Product tabs: Carousel/Product tabs: Grid** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Product tabs section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

{% tabs %}
{% tab title="Product tabs: Grid" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FZ6hwvnRQqa5M91EJAeUf%2FFox-BG%20Light%20(6).jpg?alt=media&#x26;token=4668f52a-1565-4606-b29b-b3599021731a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Product tabs: Carousel" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpxN3diSYALmJSHyqrc2a%2FFox-BG%20Light%20(5).jpg?alt=media&#x26;token=f7353a98-ec83-4aa0-9441-67969b543c61" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Section settings

* **Container:** Determines whether the section spans the full width of the page or stays within a fixed content width.
* **Section header:**&#x20;
  * **Heading:** The main title text displayed at the top of the section.
  * **Highlight style:** Applies an optional animated highlight effect to any text wrapped in italics.
  * **Preset:** Selects the text style for the heading
  * **Animation type:** Determines how the heading appears on screen using visual entrance effects.
  * **Animation delay:** Sets the delay (in milliseconds) before the heading animation begins.
* **Layout:**
  * **Product count:** Controls how many products are displayed in this tab.
  * **Type:** Chooses whether products appear in a grid or a carousel layout.
  * **Columns:** Sets how many products appear per row when using the grid layout.
  * **Column gap:** Controls the horizontal spacing between product cards.
* **Mobile layout:**
  * **Enable swipe on mobile:** Allows users to swipe horizontally through products on mobile devices.
  * **Mobile columns:** Sets how many products appear per row on mobile.
  * **Column gap mobile:** Controls horizontal spacing between products on mobile.

### Block settings

#### Collection

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FwLsIFSUkwZQrBulo6tJQ%2Fimage.png?alt=media&#x26;token=751dbd73-db66-429b-a643-ac34f708cf21" alt=""><figcaption></figcaption></figure>

* **Collection:** Selects the product collection to display in this tab.
* **Title:** Allows you to set a custom tab title; leave it blank to use the collection’s default name.

{% hint style="success" %}
You can go to **Theme Settings > Product cards** to customize your product card: [product-cards](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards "mention")
{% endhint %}