# Collection list

When a customer clicks on a collection, they’re taken to the specific collection page where they can browse all products within that collection. This section is ideal for guiding users to different categories, sales, or themes in your store.

<figure><img src="/files/AqGSQtKTqwLxt1bUTu1G" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Collection list** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/bEiyhUDDy7JiNFHkR8lt" alt=""><figcaption></figcaption></figure>

### **2, Section settings:**

These settings allow you to define how the collections are displayed and styled within the section.

* **Collections per row on desktop**: Set the number of collections to display per row on desktop devices. Options range from **2 to 4 collections per row**.
* **Image ratio**: Adjust the shape of collection images to either: **Portrait (3:4)** for a taller image ratio. **Square (1:1)** for a uniform, square look.
* **Enable carousel on desktop**: If enabled, collections will display in a single row. If the number of collections exceeds the row limit, the section will turn into a carousel, allowing users to scroll horizontally through additional collections.
* **Enable “View all” button if list includes more collections than shown**: When enabled, a "**VIEW ALL"** button will appear in the collection list if there are more collections than the maximum set to display in the row. This button links to a page where customers can view all collections.
* **Enable quick view:** When enabled, clicking a collection opens a drawer showing its products instead of navigating to the Collection page.
* **Maximum products to show in quick view:** Define how many products of the collection are displayed inside the quick-view drawer.
* **Mobile layout**: Set the number of collections displayed per row on mobile devices. Choose either: **1 collection per row** or **2 collections per row.** When **Enable swipe on mobile** enabled, if the number of collections exceeds a single row, the section will convert to a carousel format, allowing customers to swipe through collections horizontally.

### **3, Collection block settings:**

Each collection block has specific settings that allow you to customize each collection’s appearance within the Collection list section.

* **Collection**: Select a collection from the list of collections created in the **Products** settings within your Shopify admin.
* **Image**: Choose an image for the collection, replacing the default collection image.

{% hint style="info" %}
**Note**: *By default, the collection image is set to the image uploaded in the **Products** settings for that collection. If no image is uploaded, the first product image within that collection will be used as the collection image.*
{% endhint %}

* **Heading**: Add a custom heading to replace the default collection name displayed on the collection image.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/section/collection-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.