# Template: Collection List

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

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FdTPzW3pzMloNJlEDuhzL%2Fcol_list_d.png?alt=media&#x26;token=d465d260-ebb5-4a02-9e54-7d1dfe11c5d7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F2DOO17bMW9OYFAB6gekz%2Fcol_list_m.png?alt=media&#x26;token=ea4bf733-32fa-4dfe-967b-4b4a8f034842" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Template -> Collection list**
{% endhint %}

***

## Collection list - options overview

| **Option**                          | **Description**                                                                                                                                                                                                                                   |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Template: Collection List**       | Defines which template layout is used for the Collections List page. Select **Collection list** to display all chosen collections in a grid layout.                                                                                               |
| **Heading**                         | Allows you to set the page title that appears above the collections (for example, “Collections” or “Shop by Category”).                                                                                                                           |
| **Heading alignment**               | Controls the alignment of the heading text. Choose **Left** or **Center** from the dropdown.                                                                                                                                                      |
| **Layout**                          | Determines the overall arrangement and spacing of content on the page.                                                                                                                                                                            |
| **Top spacing**                     | Adds optional space above the section. You can choose **None**, **Small**, **Medium**, or **Normal**. The pixel values for each option can be adjusted under **Theme settings → Layout → Section top spacing** for both desktop and mobile views. |
| **Width**                           | Sets the section width. Available options: **Default**, **Boxed**, or **Wide**. The **Wide** layout is optimized for screens 1440 px and wider.                                                                                                   |
| **Number of columns**               | Defines how many collection blocks appear in a single row on desktop devices. You can select any value between **2 and 12**.                                                                                                                      |
| **Number of columns on tablet**     | Sets how many collections are displayed per row on tablet screens (1–6 blocks).                                                                                                                                                                   |
| **Mobile grid**                     | Determines how collections are arranged on mobile. Options: **One item per row** or **Two items per row**.                                                                                                                                        |
| **Collections**                     | The list of collections that will appear on the page. You can manage which collections are shown and how they are displayed.                                                                                                                      |
| **Sort collections**                | Controls the order in which collections appear. Sorting options: **Alphabetically (A–Z)**, **Alphabetically (Z–A)**, **Date (new to old)**, **Date (old to new)**, **Product count (high to low)**, or **Product count (low to high)**.           |
| **Image hover effect**              | Sets the animation applied when hovering over a collection image. Available effects: **Basic theme settings**, **Disable**, **Zoom in #1**, **Zoom in and rotate**, **Zoom in #2**, **Zoom out #1**, **Zoom out #2**, **Slide**, **Shine**.       |
| **Image ratio**                     | Adjusts the proportion between the image width and height. Available ratios: **Auto**, **Portrait (3 : 4)**, **Landscape (4 : 3)**, **Square (1 : 1)**, **Round (1 : 1)**, **Social story (9 : 16)**, **Widescreen (16 : 9)**.                    |
| **Text align**                      | Controls the alignment of text inside each image container. Choose **Left** or **Center**.                                                                                                                                                        |
| **Heading size**                    | Changes the visual size of collection titles. Options: **Normal** or **Small**.                                                                                                                                                                   |
| **Underline on hover**              | When enabled, collection titles display an underline when hovered.                                                                                                                                                                                |
| **Show products count**             | Toggles whether to display the total number of products in each collection.                                                                                                                                                                       |
| **Dividing line**                   | Enables or disables a line separator between sections or collection rows.                                                                                                                                                                         |
| **Background**                      | Sets the section background style. Available options: **Hide**, **Color**, **Gradient**, or **Image**.                                                                                                                                            |
| **Colors – Base**                   | Defines the base color used for general text and icons within the section.                                                                                                                                                                        |
| **Colors – Accent**                 | Controls the accent color used for highlights, hover effects, or key interactive elements.                                                                                                                                                        |
| **Colors – Lines**                  | Sets the color of dividers, borders, or separator lines.                                                                                                                                                                                          |
| **Collection – Heading**            | Defines the default color for collection titles.                                                                                                                                                                                                  |
| **Collection – Heading link hover** | Sets the color of collection titles when hovered.                                                                                                                                                                                                 |
| **Collection – Description**        | Controls the color of the collection description text.                                                                                                                                                                                            |
