# 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>