# Collection list {% embed url="" %} The collection list displays a quick list of desired collections to catch visitors' attention. ![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FJHSEhf922V0C1GRkWNQi%2FScreen%20Shot%202021-10-13%20at%2014.00.59.png?alt=media\&token=2ae49a3e-3e17-462b-9fb7-ce202fecdad7) ## How to add a Collection list section to your Shopify page {% hint style="success" %} Steps 1. In the theme editor (**Customize**), click **Add section** 2. Locate **Collection list** 3. **Save.** {% endhint %} The collection list consists of collections and banner blocks. The banner block shows only text. ![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MlL6sK9D7unq8F2VPPp%2F-MlSMTFtUYXSq1uP3KG-%2F-MlSrIJkZJ3XgcN0BGXp%2F1.JPG?alt=media\&token=93f6000a-c80b-4e91-8ee4-302dd809b727) ## How to edit the Collection list section ### **Section header** **and** **General:** #### Section header Use the provided text fields to add a suitable **Heading**/**Subheading**/**Description**. Leave any of the fields blank if you do not want to display them. You can also change the **Heading size** to Medium/Large and adjust the **Text alignment** (Left/Center).

You can also display a call-to-action button to redirect customers to your desired pages on the Section header. Add a **Label** and **Link** for one or both, then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.** #### General You can choose your **Container type** for the collection list as: * Default; * Full width; * Use container box. Select the **Color scheme** and suitable **Layout** (Standard/Heading left side) for the section. Moreover, you can expand the Collection list slider by enabling the **Expanded** toggle. This option works if **Enable slider** option is checked.

### **Card and Grid settings:** #### Card settings

Modify the card style, text alignment (left/center), and hover effect by selecting options in the dropdown. Card style includes: * Standard * Boxed * Content inside {% tabs %} {% tab title="Standard" %}

{% endtab %} {% tab title="Boxed" %}

{% endtab %} {% tab title="Content inside" %}

{% endtab %} {% endtabs %} The hover effect includes: * Scale up * Scale down * None {% tabs %} {% tab title="Scale up" %}

{% endtab %} {% tab title="Scale down" %}

{% endtab %} {% tab title="None" %}

{% endtab %} {% endtabs %} You can enable showing product count and decide whether the numbers are in the same line with the collection titles or in a different line. You can also make the collections' images rounded, images will then be cropped.

#### Grid settings Determine the number of collections shown per row and the gap between columns.

### **Slider settings** Select **Enable slider** and **Auto slide** options to run the list automatically. The duration time to change slides is between 2-10 seconds. You can also use pagination or navigation for your collection list.

### Collection/banner block settings Each collection/banner block has its own settings such as title, image, and collection link to choose from.