# Collection list

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

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

{% hint style="success" %}
Steps

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

## Section settings <a href="#collection-list-settings" id="collection-list-settings"></a>

### **Section header** and **General:** <a href="#id-1.-section-header-and-general" id="id-1.-section-header-and-general"></a>

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

<figure><img src="/files/9nFozz7pdkM3PNSHPzWZ" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Color schema:** Set text color and background color with preset scheme

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

### Collection settings <a href="#id-2.-collection-settings" id="id-2.-collection-settings"></a>

* **Collection type:** The layout of your collection can be configured either as a Grid or a Carousel
* **Design:** There are six layout options available for setting up collection items, providing a variety of designs to suit your specific presentation preferences and enhance the shopping experience on your site.
* **Hover effect:** For hover effects, you have the choice of applying a **Zoom**, creating a **Border inset**, displaying a **shadow**, or opting to leave the item without any effect for a simpler interaction.
* **Show product count:** Show number of products inside each collection item

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

* **Custom width images** and **Image width:** This option lets you customize the size of collection images to your desired dimensions.
* **Rounded image:** The images for your collection items will be presented in a circular format, diverging from the traditional rectangular display.
* **Aspect ratio:** In addition to adjusting the width, the image ratio can be fine-tuned using default values or a custom value to achieve the perfect visual balance for your images.
* **Items per row (Desktop):** The number of items displayed on each row in the grid layout can be customized to suit your preferences and the overall design of your site.
* **Column gap:** The spacing between each column pair

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

### Typography <a href="#id-3.-typography" id="id-3.-typography"></a>

Collection names and product counts' fonts can be separately set up to match the look of your website.

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

### Settings for carousel <a href="#id-4.-settings-for-carousel" id="id-4.-settings-for-carousel"></a>

* **Autoplay:** Run the carousel automatically.
* **Infinity:** Extend the carousel period indefinitely.
* **Show arrows**: enable buttons to swipe across the carousel.
* **Dot:** enable or disable buttons that navigate you to one specific slide directly.

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

### Section padding <a href="#id-5.-section-padding" id="id-5.-section-padding"></a>

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

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

## Blocks settings

For collection items, you have the capability to configure the following elements:

* **Collection heading:** Define the title or heading of your collection.
* **Collection:** Select which collection to display.
* **Image:** Choose or upload an image associated with the collection.

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


---

# 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://blueskytechco.gitbook.io/alukas-shopify/theme-sections/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.