Product grid
How to edit your product listing section of the collection template
Last updated
How to edit your product listing section of the collection template
Last updated
This article guides you on how to customize and show a list of products based on a category in a grid view on your collection page.
Steps
In the theme editor (Customize), open the template selector.
Select Collections, then Default collection.
On the left-sidebar, locate Product grid
Make necessary changes > Save.
Control the listing's container type: Fixed width/ Stretched width/ Full width;
Set the number of Products per page (6-50 products) and the number of Products per row (2-6 products);
Adjust the column gap: Extra large/ Large/ Medium/ Small/ Extra small/ No gap;
Enable or disable product count.
Allow your customers to filter collections and search results by product availability, price, color, and more.
Enable/disable filter and sort by option;
Desktop filter layout: Left sidebar/ Right sidebar/ Drawer;
Enable/ Disable Group collapsible;
Default state of the Filter groups (when Group collapsible is enabled): Collapsed/ Expanded;
Open the first group by default (when the Default state is set as Collapsed);
Group heading size: Small/ Medium/ Large;
Show results count;
Filter color type: Inline/ List.
Filter values can include visual elements such as colors, patterns, or more creative imagery.
For example, a Fabric color filter can display a small color swatch for each filter value.
Go to Settings > Custom data > Find the Metaobject definitions field > Click Add definition.
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).
Click Save.
In the Shopify admin sidebar, go to the Content > Metaobjects > In the Metaobjects page, select Color.
Click the Add entry button to add a new color. Give the color entry the Name, Color, and Image.
Click Save.
Go to Settings > Custom data > In the Metafield definitions field, select Products > Click Add definition.
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).
Click Save.
In the Shopify admin sidebar, go to the Products > Select the product you want to connect color metafield.
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.
Click Save.
Click Add filter or click an existing filter.
Click the Source field, and then select a metafield filter with a metaobject reference - "Color filter swatch".
Click Display options.
Set the Label field for filter values by selecting a metafield.
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.
Click Save.
Go to Online store > Navigation
Go to Apps > Search & Discovery > Filters > Edit filters
Add or remove filters to show/hide from the storefront filters > Save the settings.
In the theme editor (Customize), open the template selector > Select Collections > Default collection.
On the left-sidebar, locate Product gird > Select Enable filtering checkbox
Save
Enable pagination in 3 ways:
To create visuals with your filter values, set up custom data for your store with and . You also need to meet the .
In the app, go to Filters.
Customizing the filters in your store requires the app.
Learn how to .
Click Add and install the app for your store