Product listing

GridList

Showing a list of products based on a category in grid or list view.

#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

Filters by custom tagsFilter by storefront filters

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.

7. Save.

To make your tags work well, check out this Shopify guideline for tags.

Steps

1. In your Shopify Admin > Navigation
2. Click Add and install Shopify Search & 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

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.

#Now we will start from scratch by defining the 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).

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.

3. Click Save.

#After that, we are going to create color metafields for the products to link to these 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).

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 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.

7. Click Save.

ImageSwatch color

#How to customize filters

1. Go to Online store > Navigation
2. Click Add and install the Shopify Search & 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.

Pagination by numbersLoad more buttonInfinite scroll

#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.