> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/templates/default-collection.md).

# Default collection

Every collection page uses this template by default. Configure it to control how the product grid is structured, how filters and sorting behave, and what information appears on each product card.

{% hint style="info" %}
**Theme Editor → page selector → Collections → Default collection**
{% endhint %}

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

***

### Collection page

The Collection page section is the core of this template. It controls the collection header, product grid layout, filter panel, and every product card within it.

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

#### **Collection image and description**

The collection header displays the name, product count, description, and banner image — all pulled from Shopify Admin.

{% hint style="info" %}
To update the collection description or banner image, go to **Shopify Admin → Products → Collections** and edit the collection directly.
{% endhint %}

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

**Show image under heading** — places the banner image below the collection name rather than above. Useful when the heading needs to appear first for SEO or visual hierarchy reasons.

#### **Product grid**

**Enable availability toggle** — adds an "In stock only" toggle above the product grid. Works independently of the main filter panel — customers can filter by stock status without opening the full filter drawer.

**Desktop filter style** — three options that behave differently depending on the store's navigation layout:

| Style          | Behavior                                                                                                       |
| -------------- | -------------------------------------------------------------------------------------------------------------- |
| **Horizontal** | Filter bar spans across the top of the grid                                                                    |
| **Vertical**   | Filters appear in a sidebar on the left — automatically switches to Drawer in sidebar-based navigation layouts |
| **Drawer**     | Filters open in a sliding panel. Default on mobile regardless of the desktop setting                           |

**Drawer button position** — choose whether the filter button appears **Inline with heading** (next to the collection name) or **Below heading** (on a separate line).

**Tabs always open** — enter filter names (e.g., `Size, Color`) to keep those tabs permanently expanded in Drawer and Vertical styles. Separate names with commas.

**Description of filters with 'AND' operator** — adds a short label (e.g., "Match all") that explains to customers that selecting multiple values within a filter shows only products matching all of them. [Learn more about AND filter behavior.](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-filters#filter-behavior)

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

**Infinite scroll** — controls navigation at the bottom of the product list:

| Mode        | Behavior                                                                   |
| ----------- | -------------------------------------------------------------------------- |
| **Disable** | Classic numbered pagination                                                |
| **Button**  | "Load more" button reveals the next batch of products                      |
| **Auto**    | True infinite scroll — products load automatically as the customer scrolls |

**Grid type** — five options. Two, Three, and Four columns are fixed-width grids. **Alternative 1** and **Alternative 2** are asymmetric layouts where products vary in size across rows.

**Grid gap → Custom** — switch from Default to Custom to set independent column and row gaps for desktop and mobile separately.

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

#### **On hover**

Controls what happens when a customer hovers over a product card:

| Option            | Behavior                                       |
| ----------------- | ---------------------------------------------- |
| **Second image**  | Shows the second product image                 |
| **Slider**        | Slides through all product images              |
| **Hover gallery** | Shows a row of image thumbnails below the card |
| **Nothing**       | No hover interaction                           |

**Enable 'Add to cart' button** — shows a quick add button on the card. If the product has multiple variants, clicking it opens a Quick View popup for variant selection before adding to cart.

**Enable 'Quick view' button** — opens a product popup with full details without navigating away from the collection page.

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

#### **Product card**

Most settings here are self-explanatory. Non-obvious ones:

**Show short description** — displays the product subtitle on the card. Requires setting up the `Product subtitle` metafield in **Admin → Settings → Metafields and metaobjects → Products**. See [Product subtitle](/docs/avante-themes/features-and-advanced-setup/product-subtitle.md).

**Enable color pills** — shows color variant swatches directly on the product card. Requires color pills to be configured in Theme Settings → [Variant selector](/docs/avante-themes/theme-settings/variant-selector.md).

**Show pickup availability** — displays in-store pickup status on the product card. Requires retail locations configured in Shopify.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/templates/default-collection.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
