> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/collections-page/collection-section/main-collection.md).

# Main collection

## Section settings

### General

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width)</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Background color - Background color</td><td>Set the background/gradient for the section.</td></tr></tbody></table>

### Sidebar

<table><thead><tr><th width="281">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Collapsible block style</td><td>Turn the blocks in sidebar to be collapsible.</td></tr><tr><td>Enable sticky sidebar</td><td>Fix the position of the sidebar when scrolling until the end of the collection content.</td></tr><tr><td>Layout</td><td>Determine how collapsible blocks are presented: <br><br><mark style="color:orange;"><strong>Style 1</strong> (The collapsible blocks appear with carets)</mark><br><mark style="color:orange;"><strong>Style 2</strong> (The collapsible blocks appear with minus and plus icons)</mark></td></tr><tr><td>Collapsible</td><td>Select the collapse state of the collapsible blocks when the page loads.</td></tr><tr><td>Type</td><td>Select how the sidebar is presented. There are 2 options:<br><br><mark style="color:orange;"><strong>Vertical</strong> (the sidebar will lie on the left or the right of the page)</mark><br><mark style="color:orange;"><strong>Horizontal</strong> ( the sidebar will lie on the beginning of the page)</mark></td></tr><tr><td>Position</td><td>Select the position of the side to be either to the Left or Right.</td></tr><tr><td><strong>Block heading</strong></td><td></td></tr><tr><td>Font family</td><td>Select the font family for the heading of the sidebar.</td></tr><tr><td>Font size</td><td>Determine the font size of the heading of the sidebar.</td></tr><tr><td>Font weight</td><td>Select the font weight of the heading of the sidebar</td></tr><tr><td>Text style</td><td>Select the text transform for the heading of the sidebar</td></tr></tbody></table>

### Filter

<table><thead><tr><th width="279">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show product filtering</td><td>Enable to show product filtering on the sidebar.</td></tr><tr><td>Swatch style for filter</td><td>Input filter name to show swatch style.</td></tr><tr><td>Swatch type</td><td><p>Select the type for the swatch. There are 2 options:<br></p><p><mark style="color:orange;"><strong>Basic color</strong> (use color name)</mark><br><mark style="color:orange;"><strong>Advanced color</strong> (use image with PNG format)</mark></p></td></tr><tr><td>Swatch layout</td><td>Select the layout for the swatch. There are 3 options:<br><br><mark style="color:orange;"><strong>Color swatch</strong></mark><br><mark style="color:orange;"><strong>Color swatch with name</strong></mark><br><mark style="color:orange;"><strong>Color swatch with name and count</strong></mark></td></tr><tr><td>Rectangle style for filter</td><td>Input filter name to show rectangle style</td></tr><tr><td>Filter display</td><td><p>Select how to display filters. There are 2 options:<br></p><p><mark style="color:orange;"><strong>Scrolling</strong></mark><br><mark style="color:orange;"><strong>Show more button</strong></mark></p></td></tr><tr><td>Maximum items per filter</td><td>Determine the maximum number of items displayed when the page loads.<br><br><em><mark style="color:orange;">Note: used for filter display: show more button.</mark></em></td></tr><tr><td>Filter label for all tags</td><td>When using a name other than the label 'more filters,' please enter the label name according to the name you've set in this setting.</td></tr><tr><td>Apply hidden tag filter</td><td>Enter the product tags that you don't want to display in filter by tag.<br><br><em><mark style="color:orange;">Note: Separate by a comma, i.e 'red,blue,yellow'.</mark></em></td></tr></tbody></table>

### Toolbar

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show toolbar</td><td>Enable to show the toolbar.</td></tr><tr><td>Show sorting</td><td>Enable to show the sorting.</td></tr><tr><td>Show 'items per page'</td><td>Enable to show the 'items per page'.</td></tr><tr><td>Show 'view as'</td><td>Enable to show the 'view as'.</td></tr></tbody></table>

### Product

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Maximum products per page</td><td>Determine the maximum number of products displayed on 1 page.</td></tr><tr><td>Layout</td><td>Select layout when displaying product items.</td></tr></tbody></table>

### Pagination

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Pagination</td><td>Select the pagination function. There are 3 options:<br><br><mark style="color:orange;"><strong>Pagination</strong></mark><br><mark style="color:orange;"><strong>Show more button</strong></mark><br><mark style="color:orange;"><strong>Infinite scroll</strong></mark></td></tr></tbody></table>

### Product banner in collection

*Use for layout 'collections banner advertisement'*

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable banner</td><td>Enable to show the banners for layout 'collections banner advertisement'.</td></tr><tr><td>Enable banner #1/#2/#3</td><td>Enable to show the banner #1/#2/#3</td></tr><tr><td>Banner position #1/#2/#3</td><td>Enter the position/order of the item you want to display the banner #1/#2/#3.</td></tr><tr><td>Image 1/2/3</td><td>Select the image for the banner 1/2/3.</td></tr><tr><td>Link 1/2/3</td><td>Enter the link for the banner 1/2/3.</td></tr></tbody></table>

### Grid

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Space between vertical</td><td>Determine the vertical distance between two items on the desktop.</td></tr><tr><td>Space between vertical mobile</td><td>Determine the vertical distance between two items on the mobile.</td></tr><tr><td>Space between horizontal</td><td>Determine the horizontal distance between two items on the desktop.</td></tr><tr><td>Space between horizontal mobile</td><td>Determine the horizontal distance between two items on the mobile.</td></tr></tbody></table>

### Top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://halosoft.gitbook.io/ella-documentation/collections-page/collection-section/main-collection.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.