# Product tabs

<figure><img src="/files/KmF7wyXAL45EdhdYTLJ4" 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="/files/3mJuXiuXCBU1D8p16NPt" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/KmF7wyXAL45EdhdYTLJ4" 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="/files/bNZ73165NAXiljsNYwnb" 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](/pebble-theme/theme-settings/product-cards.md)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/theme-sections/product-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.