# Collection list

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/jUcitCisaO52syKsG0pP/image.png" alt=""><figcaption></figcaption></figure>

The collection list displays a quick list of desired collections to catch visitors' attention.

{% hint style="success" %}
Steps

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

## Section settings <a href="#collection-list-settings" id="collection-list-settings"></a>

### **Section header** and **General:** <a href="#id-1.-section-header-and-general" id="id-1.-section-header-and-general"></a>

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="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/VYbNeCxSZ4KaCHq96XCu/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Color schema:** Set text color and background color with preset scheme

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/xa6EFgfLHChaU1WvZ6Ib/image.png" alt=""><figcaption></figcaption></figure>

### Collection settings <a href="#id-2.-collection-settings" id="id-2.-collection-settings"></a>

* **Collection type:** The layout of your collection can be configured either as a Grid or a Carousel
* **Design:** There are six layout options available for setting up collection items, providing a variety of designs to suit your specific presentation preferences and enhance the shopping experience on your site.
* **Hover effect:** For hover effects, you have the choice of applying a **Zoom**, creating a **Border inset**, displaying a **shadow**, or opting to leave the item without any effect for a simpler interaction.
* **Show product count:** Show number of products inside each collection item

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/rftx9nIwFCZfQBINK1dT/image.png" alt=""><figcaption></figcaption></figure>

* **Custom width images** and **Image width:** This option lets you customize the size of collection images to your desired dimensions.
* **Rounded image:** The images for your collection items will be presented in a circular format, diverging from the traditional rectangular display.
* **Aspect ratio:** In addition to adjusting the width, the image ratio can be fine-tuned using default values or a custom value to achieve the perfect visual balance for your images.
* **Items per row (Desktop):** The number of items displayed on each row in the grid layout can be customized to suit your preferences and the overall design of your site.
* **Column gap:** The spacing between each column pair

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/Jsj4dv925CZIrVPcrC0q/image.png" alt=""><figcaption></figcaption></figure>

### Typography <a href="#id-3.-typography" id="id-3.-typography"></a>

Collection names and product counts' fonts can be separately set up to match the look of your website.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/V7TYrqaQp5VeuySm7e4r/image.png" alt=""><figcaption></figcaption></figure>

### Settings for carousel <a href="#id-4.-settings-for-carousel" id="id-4.-settings-for-carousel"></a>

* **Autoplay:** Run the carousel automatically.
* **Infinity:** Extend the carousel period indefinitely.
* **Show arrows**: enable buttons to swipe across the carousel.
* **Dot:** enable or disable buttons that navigate you to one specific slide directly.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/xphzJR8oBNAnTT2ugH0q/image.png" alt=""><figcaption></figcaption></figure>

### Section padding <a href="#id-5.-section-padding" id="id-5.-section-padding"></a>

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

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/S0euMN72ZuJ6duhvcifD/image.png" alt=""><figcaption></figcaption></figure>

## Blocks settings

For collection items, you have the capability to configure the following elements:

* **Collection heading:** Define the title or heading of your collection.
* **Collection:** Select which collection to display.
* **Image:** Choose or upload an image associated with the collection.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/wM0aZn6dxOcjSIRxkpDe/image.png" alt=""><figcaption></figcaption></figure>
