# Collection list

The **Collection list** section showcases a curated array of collections, offering users a visually intuitive snapshot of available collections. This streamlines quick navigation to specific collections, contributing to an enhanced overall user experience.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FlXtLnLGqfyDcsDp9BpXS%2Fimage.png?alt=media&#x26;token=eb2fdae5-adde-4b52-bc53-03e69633f77c" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p></p><p>3 options for container</p><ul><li><em><strong>Stretch width</strong></em>: span the section width regardless of screen size.</li><li><em><strong>Fix width</strong></em>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><em><strong>Expand full width</strong></em>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td><strong>Heading</strong></td><td>The title of the section</td></tr><tr><td><strong>Description</strong></td><td>The description of the section</td></tr><tr><td><strong>Alignment</strong></td><td><p>The position of the heading and description:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td><strong>Heading size</strong></td><td><p>Font size text customization:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td><strong>Design</strong></td><td><p>The preset layouts:</p><ul><li>Horizontal</li><li>Vertical</li></ul></td></tr><tr><td><strong>Show view all button</strong></td><td>When enabled, it will display a button with a link to the collection page</td></tr></tbody></table>

{% tabs %}
{% tab title="Horizontal layout" %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FlWsdJ2UXXgZoKVMNdCyT%2Fimage.png?alt=media&#x26;token=08f7656a-1131-4ad6-b8fc-2afddaef3c80" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical layout" %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F0KsBQCUeoZtgyYfl28qL%2Fimage.png?alt=media&#x26;token=def180f2-6e7e-479f-b477-f2330b293a25" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Collection

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image ratio</strong></td><td><p>"Image ratio" refers to the proportional relationship between the width and height of an image.</p><p>4 options for image ratio</p><ul><li>Adapt to image</li><li>Square (1:1)</li><li>Portrait (3:4)</li><li>Landscape (4:3)</li></ul></td></tr><tr><td><strong>Information position</strong></td><td><p>2 options for information position</p><ul><li>Overlay image: text overlay on an image</li><li>Bellow image: text beneath the image</li></ul></td></tr><tr><td><strong>Show product count</strong></td><td>Display the product count for the collection.</td></tr><tr><td><strong>Content alignment</strong></td><td><p>2 options for content alignment</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td><strong>Items per row on desktop</strong></td><td>The number of collections displayed per row on a desktop screen</td></tr><tr><td><strong>Column gap</strong></td><td>The spacing between collections</td></tr></tbody></table>

### Settings for carousel

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel</strong></td><td>When enabled, the section will be displayed in carousel format</td></tr><tr><td><strong>Show navigation</strong></td><td>Display the next and back controls for the carousel</td></tr><tr><td><strong>Show pagination</strong></td><td>Display the pagination for the carousel</td></tr><tr><td><strong>Show progress bar</strong></td><td>Enable the progress bar for paginating</td></tr><tr><td><strong>Reveal next slide</strong></td><td>Display a part of the upcoming slide</td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

## Blocks settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Collection</strong></td><td>Select the collection you want to display</td></tr><tr><td><strong>Image</strong></td><td>Upload desired image, or it will default to the collection's preset image</td></tr><tr><td><strong>Collection title</strong></td><td>Custom title selection; leave blank to use the collection's preset title</td></tr></tbody></table>