# Collection tabs

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

Easily showcase multiple collections in switchable tabs to help customers browse categories effortlessly.

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

{% hint style="success" %}

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

## How to customize a Collection 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="Collection tabs: Grid" %}

<figure><img src="/files/Cy1cobNt2d9jWKoxUank" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/xYn1mGmi04PvPDFAI63I" 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:**
  * **Type:** Sets the layout style to either a grid or a carousel.
  * **Columns:** Determines how many products appear per row in grid mode.
  * **Horizontal gap:** Controls the spacing between products from left to right.
  * **Vertical gap:** Controls the spacing between product rows from top to bottom.
* **Control type:** Selects the carousel navigation style, such as default arrows or a floating control **(only available when using the carousel layout)**.

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/CbLYaQMquOzqxOfbZgPa" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Float" %}

<figure><img src="/files/UCEYC0XDTv3iFrQWSPeK" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Card settings:**
  * **Alignment:** Controls the horizontal alignment of the collection title.
  * **Show product count:** Toggles whether the number of products in the collection is displayed.

{% tabs %}
{% tab title="Left" %}

<figure><img src="/files/PjK01cgn43G8DptWLngl" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="/files/necq4CZqU7uq76xGmYkE" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="/files/WNBDOYheePKSfh4Ap6TV" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Mobile layout:**
  * **Enable swipe on mobile:** Allows horizontal swiping to navigate products on mobile.
  * **Mobile columns:** Sets how many products appear per row on mobile devices.
  * **Horizontal gap (mobile):** Controls left-to-right spacing between products on mobile.
  * **Vertical gap (mobile):** Controls top-to-bottom spacing between product rows on mobile.

### Block settings

#### Collections

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

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


---

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