# Collection list

The **Collection List** section allows you to display a list of collections in a visually appealing way, making it easy for customers to explore various categories or product groups.

{% hint style="success" %}

1. **Go to** Shopify Admin > Online Store > Themes.
2. **Click** Customize on your live theme.
3. In the theme editor, **click** Add Section > **Collection list**.
   {% endhint %}

<figure><img src="https://1099544063-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPvu2KgE3DooWVaszhiZy%2Fuploads%2Fgit-blob-d82b4784a3df8f74ec35153d40caf062ce3d40bf%2Flist.png?alt=media" alt=""><figcaption></figcaption></figure>

### **Customize the** Collection list **Section**

<figure><img src="https://1099544063-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPvu2KgE3DooWVaszhiZy%2Fuploads%2Fgit-blob-07a65ca8e49cc4222513853d483c3e785c3220b0%2Fcollection-list.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Layout**

* **Expand to Full Width** : Enable this option to extend the collection list across the entire screen width.
* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity** : Adjust transparency (Range: 0–100 %, Default: 100%). This applies to the background image, customizable in theme settings.

#### Content Settings

* **Heading:** Set a custom title (e.g., "Hot & Top Trends").
* **Heading Size:** Choose from **Small, Medium, or Large**.
* **Text :** Add additional text if needed.
* **Text Position :** Select the Position
  * **Above Main Heading** : Position the subheading above the main heading.
  * **Below main heading :** Position the subheading below the main heading.
* **Desktop Content Alignment** : Choose the text alignment for desktop. **( Left, Right & Center ).** The content alignment is automatically centered on mobile screens.

#### **Collection Card Settings**

* **Collection List Style** : Choose how the collections are displayed: **Classic** and **Modern.**
* **Enable Collection Description** : Show a description for each collection.
* **Enable Collection Count** : Show the number of products in each collection.
* **Column Alignment** : Adjust how the collections are aligned in columns.
* **Aspect ratio :** There are 3 option image ratio as **( Adapt to image, square, and portrait)** Can choose the required style as theme requirement.

#### **Column Settings**

* **Desktop Columns** : Choose the number of columns for desktop view (Options: 3, 4, 5, 6).
* **Mobile Columns** : Choose the number of columns for mobile view (Options: 1, 2).

#### **Carousel Settings**

* **Enable Carousel** : Activate a sliding format for product display.
* **Change Slides Every** : Set transition delay (in seconds). If set to 0, auto-play is disabled.
* **Gap** : Define spacing between items (Default: 30px, auto-adjusts for mobile).
* **Pagination** : Choose the pagination type: **Dots** (dot indicators), **Arrow** (manual navigation), or **None** (no indicators).
* **Pagination Style** : Choose the style: **Classic** (traditional) or **Modern** (updated look).

#### Section padding

* **Top Padding :** Adjust spacing above the section.
* **Bottom Padding :** Adjust spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

### Collection

<figure><img src="https://1099544063-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPvu2KgE3DooWVaszhiZy%2Fuploads%2Fgit-blob-2292dd79ab3f8dacabb5f8ff9ab92e077578ec08%2Flist-coll.png?alt=media" alt=""><figcaption></figcaption></figure>

* **Collection :** Select Collection

{% hint style="success" %}
[Steps to Create a Collection](https://help.shopify.com/en/manual/products/collections/manual-shopify-collection#create-a-manual-collection)
{% endhint %}