# Main collection

![](https://docs-assets.foxecom.app/documentation/c2864320-bef0-4eb0-ba8f-dffb4e56a09a.png)

This is the working part of a collection page: the grid of products, the filters beside it, and the controls that decide how many products a shopper sees before they have to ask for more.

On a large catalog it's the section that decides whether browsing a 400-product category is workable or exhausting. Most of the settings here are really about that.

## Open the section

1. In the theme editor, click the page selector at the top of the screen and select **Collections**.
2. Choose the collection template you want to edit — **Default collection** unless you've created others.
3. In the **Template** area of the sidebar, click **Main collection**.

## Section settings

### Layout

<Table widths="30%">
  | Setting               | What it does                                                               |
  | --------------------- | -------------------------------------------------------------------------- |
  | **Container**         | Keeps the grid within the page width, or lets it span the available width. |
  | **Columns**           | How many products appear across on large screens, from 2 to 6.             |
  | **Products per page** | How many products load before pagination, from 12 to 48.                   |
  | **Pagination type**   | Numbered pages, a **Load more** button, or infinite scroll.                |
  | **Horizontal gap**    | Space between cards, 0–100 px.                                             |
  | **Vertical gap**      | Space between rows, 0–100 px.                                              |
</Table>

<Tabs>
  <Tab title="Pagination type: Number">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/ee6c3ab3-23dc-4cd7-bee7-8c8e5ce4aabe.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Pagination type: Load more">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/12abf66c-3203-4ccc-a8ad-b48e8205b74e.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Pagination type: Infinite">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/7fa8ec22-169c-4b6d-ab2c-96f8b0cad717.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>
</Tabs>

<Hint type="success">
  **Best practice on pagination:**&#x20;

  * **Load more** suits most large catalogs — shoppers keep their place, and the page doesn't grow without limit.&#x20;
  * **Infinite scroll** feels effortless but makes the footer unreachable and gives shoppers no sense of how far through they are.&#x20;
  * **Numbered pages** are worth keeping if customers return to the same page of results repeatedly, which happens on parts catalogs.
</Hint>

### Filtering and sorting

<Table widths="30%">
  | Setting                       | What it does                                                                                                                                                                                                    |
  | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | **Enable filtering**          | Shows the filter sidebar beside the grid. <br />Learn how to [set up filters in Shopify's Search & Discovery app](https://help.shopify.com/manual/online-store/storefront-search/search-and-discovery-filters). |
  | **Enable sorting**            | Lets shoppers change the sort order.                                                                                                                                                                            |
  | **Enable card layout switch** | Gives shoppers a grid/list toggle above the products.                                                                                                                                                           |
  | **Default card layout**       | Which layout the page opens in. Appears when the switch is on.                                                                                                                                                  |
  | **Expand filter groups**      | Which filter groups start open rather than collapsed.                                                                                                                                                           |
</Table>

<Tabs>
  <Tab title="Filtering">
    ![](https://docs-assets.foxecom.app/documentation/3eff29e8-4bcc-41ec-9bcc-7db57c54ba12.png)
  </Tab>

  <Tab title="Sorting">
    ![](https://docs-assets.foxecom.app/documentation/0dc486c2-998d-429f-8f96-8e076d10ef7d.png)
  </Tab>

  <Tab title="Card layout switch">
    ![](https://docs-assets.foxecom.app/documentation/f988d73c-5817-43e1-8a1e-9db5e48a8978.png)
  </Tab>
</Tabs>

<Hint type="info">
  The sidebar is a sidebar on large screens only. Below that it becomes a drawer shoppers open from a button, so a long filter list doesn't push the products down on a phone.
</Hint>

### Mobile layout

<Table widths="30%">
  | Setting            | What it does                          |
  | ------------------ | ------------------------------------- |
  | **Columns**        | A one- or two-column grid on phones.  |
  | **Horizontal gap** | Space between mobile cards, 0–100 px. |
  | **Vertical gap**   | Space between mobile rows, 0–100 px.  |
</Table>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/dbf0eb76-4a79-41ad-8c33-b780a6494e23.png" />

      <Figcaption>
        1-column grid on mobile
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/59b9d57f-53f5-49c6-9fb8-77059eb218ea.png" />

      <Figcaption>
        2-column grid on mobile
      </Figcaption>
    </Figure>
  </Column>
</Columns>

### Appearance

<Table widths="30%">
  | Setting          | What it does                                 |
  | ---------------- | -------------------------------------------- |
  | **Color scheme** | Applies a theme color scheme to the section. |
</Table>

This styles the section, not the product cards. Card design — image shape, badges, what appears under the title — comes from **Theme settings >** [Product cards](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards) and applies everywhere products are listed.

<Hint type="success">
  **Tip:** if your product card aspect ratio is set to **Auto** in theme settings, the collection grid uses square images instead. Rows have to line up, and Auto would give every card a different height.
</Hint>

### Preload image

If you want the page to feel fast, turn preload on and leave the animation off.

<Table widths="30%">
  | Setting           | What it does                                              |
  | ----------------- | --------------------------------------------------------- |
  | **Preload image** | Loads the first row of product images at higher priority. |
</Table>

## FAQs

#### I turned filtering on but no filters appear. Why?&#x20;

Filters are created in Shopify's Search & Discovery app, not in the theme. Install it, set up the filters you want, and they'll appear in the sidebar.

#### Why do I see fewer columns than I set?&#x20;

The **Columns** setting applies to large screens. Smaller desktop and tablet widths automatically show fewer so the cards stay readable.

#### Why are my product images square when the theme setting is Auto?&#x20;

The collection grid needs rows to line up, so Auto resolves to square here. Choose a fixed ratio in **Theme settings > Product cards** if you want a different shape.

#### A shopper switched to list layout and it stuck. Is that saved to their account?&#x20;

No. The choice is remembered for that browser tab only and is forgotten when they close it.