> For the complete documentation index, see [llms.txt](https://blueskytechco.gitbook.io/alukas-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueskytechco.gitbook.io/alukas-shopify/theme-sections/collection-tab.md).

# Collection tab

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

{% hint style="success" %}
Steps

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

## Section settings

### Section header and General

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

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

**Layout:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color schema:** You are allowed to change text color, background color, etc. with preset color.

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

### Collection tab

**Tab Header Type:** You have the option to choose between two types of tab headers, offering different styles for layout customization.

**Design:** For the horizontal tab header type, there are four designs available to select from, providing variety in presentation.

**Product Type:** There are two types of product displays to choose from: grid and carousel, each offering a unique way to showcase products.

**Products 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.

**Items 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.

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

### Settings for carousel

**Autoplay / Infinite Play:** Enable this setting for the carousel to automatically scroll through items indefinitely, providing a seamless browsing experience.

**Show Arrows and Dots:** Activate arrows for users to manually swipe through carousel items and dots for a visual indicator of their position within the carousel.

Direct Navigation via **Dot:** Utilize dots to allow users to jump directly to a specific tab or item in the carousel, enhancing navigation efficiency.

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

### Grid settings

**Rows:** Adjust the number of rows to display products, allowing for a customized product showcase layout.

**Show "Load More":** Enable a "Load More" button to allow users to access additional products without overwhelming the initial page load.

**Button action:** Choose what happens when the "Load More" button is clicked—either more products are dynamically added to the page, or users are redirected to a collection page for broader browsing.

**Button label:** Customize the text label on the button to match your site's tone and call-to-action.

**Button type:** Determine the visual importance of the button by selecting its type (e.g., primary, secondary), guiding users' interactions with your site's hierarchy of actions.

<figure><img src="/files/T6p9r7xt1J04vhFdJpsS" 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="/files/J4LavKb5BWKEW0M53PZk" alt=""><figcaption></figcaption></figure>

## 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="/files/TYMeen3B8evIKFpIx766" alt=""><figcaption></figcaption></figure>