{% tabs %}
{% tab title="Grid" %}
{% endtab %}
{% tab title="List" %}
{% endtab %}
{% endtabs %}
Showing a list of products based on a category in 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 %}
## General and Layout
* Control the listing's container type and layout.
* Show the number of products per row and per page.
* Enable or disable the columns switcher.
## Sorting and filtering
Enable/ disable filtering and sorting by options.
You can choose to display filters by **storefront filters** or by **custom tags**.
### How to create a filter
{% tabs %}
{% tab title="Filters by custom tags" %}
{% embed url="" %}
{% 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. Add block **"Filter by tags"**
5. Change the filter title and its tags list (separated by a comma). Choose a suitable design for the filter display.
6. Merchants can decide to display the filter option expand or collapse by default.
{% endhint %}
7\. **Save.**
{% hint style="info" %}
To make your tags work well, check out [this Shopify guideline for tags](https://help.shopify.com/en/manual/products/details/tags).
{% endhint %}
{% endtab %}
{% tab title="Filter by storefront filters" %}
{% embed url="" %}
**Steps**
1. In your **Shopify Admin** > **Navigation**
2. Click **Add** and install [**Shopify Search & Discovery**](https://apps.shopify.com/search-and-discovery) app for your store
3\. Go to **Apps** > **Search & Discovery** > **Filters** > **Edit filters**
4\. Add or remove filters to show/hide from the storefront filters > **Save** the settings.
5\. In the theme editor (**Customize**), open the template selector >Select **Collections** > **Default collection.**
6\. On the left-sidebar, locate **Product listing** > **Filter type** > Select **Storefront filters**
7\. **Save**
{% endtab %}
{% endtabs %}
You can change the filter position, title, and height.
### 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 define 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, 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 on, 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 have assigned your metafield to products or variants in your store, 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 click an existing filter.
3. Click the **Source** field, and then 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. Set the content by selecting an image field for the **Image**.
{% hint style="info" %}
**Tip** :sparkles:
Themes will often prioritize displaying a swatch's image over its color.
For swatch displays, if you select fields for both **Swatch pattern** and **Swatch color**, then the color is typically 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 %}
#### How to customize filters
{% hint style="info" %}
Customizing store filters requires the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app.
The app also allows you to customize search results and product recommendations to give you more control over how customers discover your products.
Learn how to [customize filters with the app](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters).
{% endhint %}
1. Go to **Online store > Navigation**
2. Click **Add** and install the [**Shopify Search & Discovery**](https://apps.shopify.com/search-and-discovery) app for your store
3. Go to **Apps** > **Search & Discovery** > **Filters** > **Edit filters**
4. Add or remove filters to show/hide from the storefront filters > **Save** the settings.
5. In the theme editor (**Customize**), open the template selector > Select **Collections** > **Default collection.**
6. On the left-sidebar, locate **Product gird** > Select **Enable filtering** checkbox
7. **Save**
### Pagination
Enable pagination in 3 ways.
{% tabs %}
{% tab title="Pagination by numbers" %}
{% endtab %}
{% tab title="Load more button" %}
{% endtab %}
{% tab title="Infinite scroll" %}
{% endtab %}
{% endtabs %}
### Filter settings
This setting is for storefront filters only.
You can enable changing product card variants on filtering and showing results count on filter items.
.png?alt=media&token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef)
