# Collection

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F7BZwUAq4YuxhiS1KnoHg%2FShop%20All%20%E2%80%93%20Primavera%20Distinction%202025-04-04%20at%2012.59.52%20pm.jpg?alt=media&#x26;token=24802ba1-ecc1-4694-a90f-b346948ff54b" alt=""><figcaption><p>Collection template on Primavera Savoir </p></figcaption></figure>

Primavera's default collection template is composed of two sections:

### Collection header

Collection header is used on the collection pages to output a section header for a collection.

This section will display the collection name, the item count (if text accents are enabled globally) and the collection image as an optional banner image.

#### Collection header settings

* **Background:** Choose between **color scheme** or **image** to display a background image in this section. By default, this will use the collection’s image, but you can override it to use a static image, or an image from a metafield.&#x20;
* **Minimum header height:** Choose between 5 different heights, **adapt to media**, **small**, **medium, large** and **fit screen** to achieve your desired look and feel.
* **Description:** You have the option to choose to display the collection description as set in the **admin**, or no description at all.
* **Desktop header layout:** You can choose between a **left-aligned** or **centered** header layout.
* **Show submenu:** To show an optional submenu, [create a menu](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus) with the same name (i.e. handle) as the collection and enable this checkbox. This can help group related collections in a store with many diferent collections.\
  \
  Submenus are matched up to a collection based on their handles. For example, to add a submenu to a **Shop All** collection, with handle **shop-all**, create a menu called "Shop All" so it also has the **shop-all** handle.

### Collection grid

The collection grid is the main body of the collection template, comprising the products themselves and filtering/sorting when enabled.

* **Layout:**
  * **Maximum products to show**: Number of products per page. To maintain a balanced layout, consider the number of columns chosen for both desktop and mobile views.
  * **Desktop columns**
  * **Mobile columns**
  * **Enable infinite scroll:** When enabled, a "Load more" button appears below the maximum products per page, inviting users to reveal more products.
  * **Empty collection link:** When there are no products in a collection, a Continue shopping button can be displayed.
* **Sorting and filtering:**
  * **Enable sorting**
  * **Enable filtering**
  * **Filter layout:** Choose between **modal** (default) and **sidebar**  <mark style="background-color:green;">Available in version 1.1.0 and later</mark>
  * **Enable sticky filters:** When enabled, collection filters will remain visible as users scroll. To improve the user experience, this disables the [sticky header](https://docs.ultramarinastudios.com/sections/header#settings).
  * **Enable max height on filters:** Limits the height of each filter to make scrollable windows, useful if your store has many filters.
  * **Open filters by default:** Choose whether filter collapsibles should be open or closed on page load <mark style="background-color:green;">Available in version 1.1.0 and later</mark>
  * &#x20;**Active filter style:** When sidebar layout is selected, choose the style of the active filters <mark style="background-color:green;">Available in version 1.1.0 and later</mark>

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](https://docs.ultramarinastudios.com/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}


---

# 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://docs.ultramarinastudios.com/templates/collection.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.
