# Product listing
{% tabs %}
{% tab title="Grid" %}
{% endtab %}
{% tab title="List" %}
{% endtab %}
{% endtabs %}
Showing a list of products based on a category in a grid or list view.
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), open the template selector
2. Select **Collections**, then **Default collection.**
3. On the left-sidebar, add **Product listing.**
4. Make necessary changes **> Save.**
{% endhint %}
## Layout
* Control the listing's container type and layout.
* Show the number of products per row and per page.
* Enable/disable box layout.
* Show layout the columns switcher.
## Sorting and filtering
Enable/disable filtering and sorting by options.
* Enable sorting
{% hint style="info" %}
See [how to change the default sort order of a collection here](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection).
{% endhint %}
* Enable filtering: Enable Storefront filters for your store.
{% hint style="info" %}
Customize the filters in your store with the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app.
{% endhint %}
{% hint style="warning" %}
Considerations for adding filters:
* Collections that contain more than 5,000 products don't display filters.
* A filter can display a maximum of 100 filter values on your store.
* In the Shopify Search & Discovery app, a filter displays a maximum of 1,000 filter values.
* Translations aren't supported for the **Vendor** and **Tags** filter values. The product tag filter only displays to customers shopping in your store's default language. Vendor filter values are always based on your store's default language.
* The price filter doesn't display for currencies other than your shop's default currency.
[Learn more](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters?q=What+are+the+limitations+of+using+filters+in+Shopify%3F).
{% endhint %}
You can also change the filter's position, title, and height.
### Pagination
Enable pagination in 3 ways.
{% tabs %}
{% tab title="Paging by numbers" %}
{% endtab %}
{% tab title="Load more button" %}
{% endtab %}
{% tab title="Infinite scroll" %}
{% endtab %}
{% endtabs %}
### Storefront filters settings
This setting is for storefront filters only. You can enable changing product card variants on filtering and showing results count on filter items.
### **How to create a visual filter**
Filter values can include visual elements such as colors, patterns, or other creative imagery.
For example, a *Fabric color* filter can display a small color swatch for each filter value.
To create visuals with your filter values, set up custom data for your store with [metafields](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) and [metaobjects](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects). You also need to meet the [requirements](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters).
{% hint style="info" %}
Product variant filters will link to more relevant variants on search results and collection pages.
{% endhint %}
#### **Now we will start from scratch by defining the** [**metaobjects**](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects)**:**
1. Go to **Settings** > **Custom data** > Find the **Metaobject definitions** field > Click **Add definition.**
2. In the **Add metaobject definition** page, give this metaobject a **Name** (Color) and 3 **Fields:**
* **Single line text** - For the color name (Name).
* **Color** - For the hex code of the actual color (Hexcode).
* **File** - For the image of this color (Image).
{% hint style="info" %}
A metaobject definition for a color swatch should have both a color and an image field.
You don't need to provide a value for both, but this will give you the option of using either field in the future.
{% endhint %}
3. Click **Save**.
#### **Next step, we will create the colors list:**
1. In the Shopify admin sidebar, go to the **Content** > **Metaobjects** > In the **Metaobjects** page, select **Color**.
2. Click the **Add entry** button to add a new color. Give the color entry the Name, Color, and Image.
{% hint style="info" %}
**Note**: You can add many color entries and assign these colors to the products.
{% endhint %}
3. Click **Save**.
#### **After that, we are going to create color** [**metafields**](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-metafield-definitions) **for the products to link to these** [**metaobjects**](https://help.shopify.com/en/manual/custom-data/metaobjects/using-metaobjects) **that we've just created above:**
1. Go to **Settings** > **Custom data** > In the **Metafield definitions** field, select **Products** > Click **Add definition.**
2. We will define this metafield as **Name**: "Color filter swatch" and **Type**: "Metaobject". In the **Reference** field, select the metaobject you want or you've just created (Color).
{% hint style="info" %}
If your products/ variants have multiple colors you could filter, set your metafield definition to allow a **List of entries**.
This lets you assign multiple metaobject entries to a single item and each one will display as a filter value on your store.
{% endhint %}
3. Click **Save.**
#### **Then, we will connect the products to colors:**
1. In the Shopify admin sidebar, go to the **Products** > Select the product you want to connect color metafield.
2. In the **Metafields** field, click on the "Color filter swatch" metafield that you've just created above > You will be able to select multiple colors from your list of colors that you defined using metaobjects.
3. Click **Save**.
#### **After you assign the metafield to products/ variants, you can set up the filter for your online store:**
1. In the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app, go to **Filters**.
2. Click **Add filter** or choose an existing filter.
3. Click the **Source** field > select a metafield filter with a metaobject reference - "Color filter swatch".
4. Click **Display options**.
5. Set the **Label** field for filter values by selecting a metafield.
6. Check **Include visual** and select a visual style:
* Choose **Swatch** for small color swatches or patterns. Set the swatch content by selecting:
* A color field for the **Swatch color**.
* An image field for the **Swatch pattern**.
* Choose **Image** for icons, logos, or other graphics that shouldn't be cropped.
* Select an image field for the **Image**.
{% hint style="info" %}
**Tip** :sparkles:
Themes often display a swatch's image before its color.
For swatch displays, if you activate both **Swatch pattern** and **Swatch color**, the color is only displayed when there isn't an available pattern image for the filter value.
{% endhint %}
7. Click **Save**.
{% tabs %}
{% tab title="Image" %}
{% endtab %}
{% tab title="Swatch color" %}
{% endtab %}
{% endtabs %}
---
# 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.foxecom.com/megamog-theme/collections-and-products/collection-page/collection-sections/product-listing.md?ask=
```
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.
