# Collection tab

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F5jqRY4hMeF0wQlSOvrMi%2Fimage.png?alt=media&#x26;token=8369b6d1-aa4a-4f7a-bbed-b4ed7c126c00" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## General settings

| Setting                | Description                                                                                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Section width          | You can choose among Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video. |
| Color scheme           | You are allowed to change text color, background color, etc. with preset color.                                                       |
| Heading, description   | Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.       |
| Header size, alignment | Adjust the text alignment (left/center/right) along with font size.                                                                   |

## **Collection tab**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FPxNe8lLZA8ycCHpIkI94%2Fimage.png?alt=media&#x26;token=a2abe02e-a1af-4ffa-a588-a8a2e3bd40b8" alt=""><figcaption></figcaption></figure>

|                      |                                                                                                                                                       |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tab header style     | You have the option to choose between two types of tab headers, offering different styles for layout customization.                                   |
| Horizontal tab style | For the horizontal tab header type, there are two designs available to select from, providing variety in presentation.                                |
| Display mode         | There are two types of product displays to choose from: grid and carousel, each offering a unique way to showcase products.                           |
| Items to show        | This setting allows you to determine the number of products displayed in a single tab, giving you control over the quantity of items visible at once. |
| Item per row         | This option lets you specify the number of products featured in each row, allowing for a customized layout.                                           |
| Column gap           | Adjust the spacing between products to ensure a clean and organized appearance, enhancing the shopping experience.                                    |

## **Carousel setting**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FSfGuZuUvcDGqAutsUTUF%2Fimage.png?alt=media&#x26;token=b23794a2-a579-45e0-883e-0e5abdbb5ee1" alt=""><figcaption></figcaption></figure>

| Setting             | Description                                                                                    |
| ------------------- | ---------------------------------------------------------------------------------------------- |
| Show next back      | Display arrows to navigate to the next or previous item.                                       |
| Dot                 | Choose from different types of pagination options.                                             |
| Infinite slide      | Enable this option to allow the slides to loop continuously without stopping at the last item. |
| Auto change slides  | Enable this option to automatically transition between slides after a specified time interval. |
| Change slides every | Configure the time interval for changing slides.                                               |
| Reveal next slide   | Allow a part of the next slide to be visible while the previous one is still displayed.        |

## **Grid settings**

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FWzKrgImVZI4VYjpx2EZx%2Fimage.png?alt=media&#x26;token=8b5872cd-d943-4e12-b6ff-0ef895a9fc04" alt=""><figcaption></figcaption></figure>

## **Section padding**

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fh6J0CXE9WghuKzODCcXk%2Fimage.png?alt=media&#x26;token=ae58e3a5-a915-4624-bf2a-b70cd3136995" alt=""><figcaption></figcaption></figure>

### Mobile options

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FyYJ7kQtlpJJ7VfJNTDOF%2Fimage.png?alt=media&#x26;token=68504c2a-3951-4f72-b6fc-79f7ec35d418" alt=""><figcaption></figcaption></figure>

**Enable carousel on mobile:** Turn on this option to enable the carousel functionality for mobile devices, providing a seamless scrolling experience.

**Items per row:** Set the number of items displayed per row on mobile devices for optimal layout and usability.

## Block settings

**Tab name:** This will be shown in place of the collection name if it's not left empty, allowing for customized or more descriptive titles.

**Select collection:** Choose the link that leads to the desired collection, providing a direct pathway for users to explore specific products or categories.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F1n5ExTrN52VTsMNXu2CB%2Fimage.png?alt=media&#x26;token=5a42b8e1-3eac-419a-856f-b9ec00d8ff73" alt=""><figcaption></figcaption></figure>