---
description: A guide to set up a collection list
---

# Collection list

{% embed url="https://shopify.pxf.io/oqdYj9" %}

<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2F88U9NYGtOfmelO5J7Mik%2Fimage.png?alt=media&#x26;token=cff83ab4-ac47-4eb8-b79e-74e514226665" 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** <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://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FpCrkS7GDh0GsoNtdLkBt%2Fimage.png?alt=media&#x26;token=90beabbd-fa2b-4d79-ba21-35f7fc3d3589" alt=""><figcaption></figcaption></figure>

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

* **Layout content:** You can choose among Default, Fluid container, Full width, Custom width for the banner layout.
* **Color schema:** Set text color and background color with preset scheme

<figure><img src="https://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2FtEwCZUn94fa1QADqpVwL%2Fimage.png?alt=media&#x26;token=9485d919-f723-43eb-b52e-03a80d996eb7" 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://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2F9HhaMKthcFdmR94LhH0c%2Fimage.png?alt=media&#x26;token=bedbc256-63d4-4f7c-98d8-8ad6d8cf23a5" 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/niVteMYkc5VfE2wdYlOK/blobs/v7auVnuVZarBIAgPrbfM/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/niVteMYkc5VfE2wdYlOK/blobs/NOur4forPzzODbMPwHe4/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/niVteMYkc5VfE2wdYlOK/blobs/QSYGNEiIpt5OUhFTdRuY/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/niVteMYkc5VfE2wdYlOK/blobs/wXj7mgBLWN8ycYlxePsp/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://2076760007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FniVteMYkc5VfE2wdYlOK%2Fuploads%2Fd8aPh9sAa5iNSrqD9uVK%2Fimage.png?alt=media&#x26;token=7482ddcb-1b95-443b-8339-bcc5a9422de3" alt=""><figcaption></figcaption></figure>
