# Collection list

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FIlf2vM9mkN9iq7qDuESg%2FGroup%205101.png?alt=media&#x26;token=1cea0e55-312a-4905-9d69-c4579b71a65b" alt=""><figcaption></figcaption></figure>

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

## How to add a Collection list

{% hint style="success" %}
Steps

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

To know more about creating and editing collections, see [Collections](https://help.shopify.com/en/manual/products/collections).

## How to edit a Collection list

### Section settings

#### **Layout**

Choose your preferred collection list **Layout** to draw customers' attention.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FHiGSXGBLi1DxKRLEvYGg%2Fimage.png?alt=media&#x26;token=ace33d5c-de3a-45d5-b732-d62bb34f2f9b" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Standard" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Ftg8jzvivA4k4botQD8B5%2Fimage.png?alt=media&#x26;token=ecc4c352-cc8a-4206-b8d2-165a91eeb73d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Split" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FtHOuHSiyJpfyIxLUs6X4%2Fimage.png?alt=media&#x26;token=ae0db4ce-1112-473b-9522-381218a385ed" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Section header

Use the provided text fields to add a suitable **Heading, Subheading,** and **Text**.

* Leave them blank if you do not want to display them

You can also change the **Heading size** to Heading 1/ Heading 2/ Heading 3 and the **Text alignment** to Left/ Center to make the content look balanced on your website.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FSnOyOe2pq2mPwXqgadsL%2Fimage.png?alt=media&#x26;token=76e6342d-4a75-409b-8e8e-1f498d925ecc" alt=""><figcaption></figcaption></figure>

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

Use the provided text fields to add a suitable **Text**.

* Leave it blank if you do not want to display it

You can also change the **Description size** to Small/ Base size/ Large to make the content look balanced on your website.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FxD6azufuxBSRChuMzkqA%2Fimage.png?alt=media&#x26;token=0a9de746-2ef4-4890-bea6-c1c4d63e622f" alt=""><figcaption></figcaption></figure>

#### Card settings

To sync the Color scheme of the block with the section, select :white\_check\_mark: **Use section color scheme** checkbox.&#x20;

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FmOsy6tDzjQpUR3AVzZAz%2Fimage.png?alt=media&#x26;token=f255415d-53fd-415d-815e-568938699470" alt=""><figcaption></figcaption></figure>

Moreover, you can change the card's **Style:**

* Use global settings
* Standard
* Card

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F3TfqdyCiIJ2NyYVuIQvS%2Fimage.png?alt=media&#x26;token=5593be9c-cb23-404c-b235-981d5440ff80" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Standard" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FbG5hdXMaHqhLBa5pROex%2Fimage.png?alt=media&#x26;token=a192b9bb-14d4-4151-8fd8-617091f636e1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F3nBM6ANWdaqseSTSzKQY%2Fimage.png?alt=media&#x26;token=6b9aa9f2-a339-4c9a-b847-9ee0fec1c941" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Select the card's **Image ratio** as:

* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fvz7H4DKrptJ7YJabNLsi%2Fimage.png?alt=media&#x26;token=5ed7d751-7d8c-48cd-9db2-e2fb889bf6db" alt=""><figcaption></figcaption></figure>

#### Grid settings

Set the **Number of columns for desktop** view between 2-6 columns; and choose your favorable **Column gap** as Extra large/ Large/Medium/Small/ Extra small/ None.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FrghQwqkFH7RORPFxvBoP%2Fimage.png?alt=media&#x26;token=d5a8bbd4-45ff-4016-b413-4ebccdc72389" alt=""><figcaption></figcaption></figure>

#### Carousel settings

You can :white\_check\_mark: **Enable the carousel on desktop** (when the number of collections added > the number of columns).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FrAk3GUdFhXN2HHSRrtBD%2Fimage.png?alt=media&#x26;token=a4838d95-39f1-4a3d-9fde-155f8049745a" alt=""><figcaption></figcaption></figure>

#### **Mobile layout**

You can :white\_check\_mark: **Enable swiping on mobile** or display the collections in a 2-grid column layout.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FXdUsVDPJEPMHMLwNKRAQ%2Fimage.png?alt=media&#x26;token=c96c41eb-31bd-4239-9987-9e6791840058" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FQPDtkvalSXbRHV5qyKNW%2Fimage.png?alt=media&#x26;token=07ebbe34-c98c-4bee-863a-47308bbfee61" alt=""><figcaption></figcaption></figure>
