# Collection tabs

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FYcGoxQSFupKyazifsrxm%2FFox-BG%20Light%20(12).jpg?alt=media&#x26;token=4c7be86d-551a-4e73-bcf5-e10bc0a5f6e1" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Feg0VWfE9ew3IxZANgXUE%2FFox-BG%20Light%20(13).jpg?alt=media&#x26;token=662d9f34-cd72-46d0-9968-3db9d01c3062" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FYcGoxQSFupKyazifsrxm%2FFox-BG%20Light%20(12).jpg?alt=media&#x26;token=4c7be86d-551a-4e73-bcf5-e10bc0a5f6e1" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Ft0u4EI8LpVYEVsCKsAMp%2Fimage.png?alt=media&#x26;token=0142b4c2-a306-450b-914d-c439e793f2a5" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Float" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FWClaSnYgOH3iCUgP3aWz%2Fimage.png?alt=media&#x26;token=b3c44143-5b0e-457a-b779-786b0b003103" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FCKVZ9g42HfF1Dc54pIMn%2Fimage.png?alt=media&#x26;token=a0516ab0-bafe-4bb3-8800-ed51ea994604" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FmHEIHahFQebPObIHzKz6%2Fimage.png?alt=media&#x26;token=f6629b92-7548-4ddd-b9b6-d9c4458ceb62" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fz5B9nnlNClizdRlmzwvn%2Fimage.png?alt=media&#x26;token=417361c0-e603-43fd-a7c5-75c61f9f9f79" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FNlFRA3bg5aniwPHKW3Dx%2Fimage.png?alt=media&#x26;token=68c734ff-1bdb-4e46-861e-8053c1bd32d8" 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.