# Collection page

This is the main template/page where your products are listed. You can see your collections by going to your Shopify admin area and then click Products -> Collections. Once you pick a collection (or if you create a new one) you'll be able to choose which products to be included, add featured image, description, etc.

The collection template of Marble consists of 2 main sections:

* Collection banner
* Collection

You can add more sections to this page by using the `Add section` button here:

![](/files/7p1CCudYCUtmDvImhJVH)

More details about the 2 sections below.

## Collection banner

The main purpose of this section is to present a good looking banner above the products list. The main details are automatically loaded from the collection like:

* heading
* description
* image

Along with that there are additional settings like:

* style
* height
* image picker (in case you want to change the image)
* image vertical position
* content management fields like: positioning, etc.

### Default values

Some of the default values are set through dynamical Shopify properties. For example the image is set through such dynamic prop to load the collection featured image:

![](/files/bixLcTS3p9It6pOn4TaP)

The heading is done in the same way:

![](/files/FbOyXakSjWu44Gd8Vdey)

### Custom values

In case you want to attach other dynamic values, you can add metafields on your side and then link them through these dynamic fields. More details about the metafields here: <https://help.shopify.com/en/manual/metafields/metafield-definitions>

More details about connecting dynamic resources here: <https://help.shopify.com/en/manual/metafields/displaying-metafields-on-your-online-store#connecting-metafields-to-your-theme-by-using-the-theme-editor>

#### Example

In case you want to have a mobile image for each collection you need to do the following:

1. Go to Settings > Metafields
2. Pick Collections
3. Pick Add definition
4. In the name add `Mobile image`
5. Pick `Select content type` and choose `File`
6. In `Accept specific file types` pick only `Images`
7. Save
8. Then go to one of your collections and you'll see a field like this at the bottom of the page: ![](/files/47txrqiZuulkEglIckFA)
9. There you can add your mobile specific image
10. Then go to the customize panel and navigate to the collection page
11. Pick the `Collection banner` section
12. Go to the `Image-Mobile` field and click the dynamic icon: ![](/files/08zvk06WBAROk258F7gQ)
13. From the new popup pick `Mobile image`

## Collection

This is the main section that prints products in your site. The products are automatically loaded from your collection.

Here are the settings available for this section.

### General

* Style -- more details [here](/marble-documentation/content-sections/common-settings.md#style)
* Enable breadcrumbs -- this will show/hide the breadcrumbs navigation below the main banner

### Filters and sorting

The filters are mainly managed through a Shopify app called `Shopify Search & Discovery` . It can be installed from here: <https://apps.shopify.com/search-and-discovery>.

More details on how the filters are managed can be found here: <https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters#shopify-search-amp-discovery-app>.

#### Enable filters

This will show/hide the filters

#### Filters type

This will change the filtering layout. The options are: horizontal and vertical. Examples below:

Horizontal:

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

Vertical:

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

The mobile view is a separate layout that is not affected by this setting. On mobile it always take the entire screen:

#### Enable sorting

This will enable/disable the sorting dropdown on the right side of the filters.

### Products grid

The settings below are about the products grid - items size, items per row, spacings, etc.

#### Layout

The following settings will affect the layout size and spacings:

* Fullwidth -- will make the grid full width taking the whole screen
* Side margins -- will add spacing on both sides of your screen
* Side margins - Mobile -- will add spacing on both sides on mobile devices only

#### Grid

Products per row (desktop and mobile) will change the number of items you'll see per row. You can for example show 4 products per row on desktop, and 1 or 2 on mobile.

#### Products per page &#x20;

Here you can pick how many products to be shown per page.

Please be aware that depending on what settings you pick for `products per row` you might end up having empty spaces on the last products row. The best case here is if the number can be divided by both `products per row` on desktop and mobile.

For example, if you pick 4 on desktop, and 2 on mobile, then products per page could be 4, 8, 12, etc.


---

# 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://bigstart.gitbook.io/marble-documentation/pages/collection-page.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.