# Collection list

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(8)_P872SmBb.jpg)

The collection list displays a list of selected collections in a grid layout. It enables customers to browse through your store more efficiently.

<Hint type="info">

Looking to add a banner along side the collection list? Check out:&#x20;

[Collection list banner 🔥](https://docs.foxecom.com/hyper-theme/theme-sections/collection-list-banner)

</Hint>

## How to add a Collection list section to your Shopify store

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Collection list**
3. Make necessary changes
4. **Save.**

</Hint>

To know more about creating and editing collections, see: [This tutorial](https://youtu.be/M0DoTpdYPWU).

## How to edit a Collection list section

### Section settings

#### Section header

<Expandable title="See settings">

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Description:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Description size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</Expandable>

#### Card settings

![image](https://docs-assets.foxecom.app/hyper-theme/image_Di0cMz7E.png)

<Expandable title="See settings">

* **Color scheme**: Select from predefined color schemes to match your store's branding.
* **Style**: Choose between [**Standard**](#standard) or [**Card**](#card) style layouts.
* **Heading size**: Adjust the heading size of the card titles.
* **Image ratio**: Use "Adapt to image" to keep the image's original ratio or fix a ratio for uniformity.
* **Show border**: Add a border around the collection cards.

![](https://docs-assets.foxecom.app/hyper-theme/image_L1QBUMsv.png)

</Expandable>

<Tabs>
<Tab title="Standard">

![image](https://docs-assets.foxecom.app/hyper-theme/image_DxZ3FUki.png)

</Tab>

<Tab title="Card">

![image](https://docs-assets.foxecom.app/hyper-theme/image_WFTiehy2.png)

</Tab>
</Tabs>

#### Grid settings

* **Number of columns on desktop**: Adjust the slider to set the number of columns.
* **Column gap and Row gap**: Adjust the spacing between collections.
* **Grid border**: Enable if you want a clear separation between items. The Grid border once enabled will override the [card's border](#see-settings-1).

#### **Mobile layout**

**Enable swiping on mobile** or display the collections in a 1/2/3 column layout.

![image](https://docs-assets.foxecom.app/hyper-theme/image_EdHQ0KC2.png)

### Block settings

Each collection block has its own settings such as **Collection title** (Leave blank to use collection's title), **Image**, and **Collection** link to choose from.

![image](https://docs-assets.foxecom.app/hyper-theme/image_rXS7L4JI.png)