Collections and filters

Collection pages are where most shoppers browse. Chisel shows products in a grid, or in a table for quick ordering, with filters, sorting and a row of subcategories. This guide covers how to set up filters, the grid and list views, and the subcategory row.

Before you begin

1. Set up filters

Chisel reads its filters from Shopify. It does not have its own filter list.

  1. In the Shopify admin, open the Search & Discovery app.
  2. Open Filters and add the filters you need, such as Brand, Product type, Price or a tag-based filter.
  3. Save.
  4. Open a collection on the storefront. Confirm that the filters appear.

Filters narrow the products in the collection. Choose filters that match what shoppers ask, and keep the values consistent across products. The filter options come from the product data that Shopify reads, such as tags, product type, vendor and options.

The theme shows the filters in the collection's filter area. Shoppers can:

Active filters appear as plain text with remove links. They do not use the highlighter.

Choose the filter layout

  1. Open the collection template in the theme editor.
  2. Open the Collection section.
  3. Set Filter layout to Sidebar or Horizontal bar. The default is Sidebar.
  4. Save.

On a computer, the sidebar sits on the left of the product grid. On a phone, the filters open in a drawer called Filters. The drawer has a button that shows the number of results.

2. Use the grid and list views

The collection toolbar has two view links: Grid and List.

The grid uses these settings in the Collection section:

The choice between grid and list is remembered in the shopper's browser. The filters and sorting keep the chosen view when the shopper changes them.

Shoppers can also use a link with ?view=list or ?view=grid at the end of the collection address.

3. Sort and page through products

  1. Open the Collection section in the theme editor.
  2. Set Products per page.
  3. Save.

The sort menu, labeled Sort by, uses the sort options that Shopify provides for the collection. Set the default sort in the Shopify admin for the collection.

Pagination shows page numbers by default. Each page has its own address.

Use a Load more button

  1. In the Collection section, set Pagination to Load more button.
  2. Save.

The page then shows a line such as "Showing 24 of 132" and a Load more products button under the products. Shoppers who do not use JavaScript see the button as a link to the next page, so it still works. Shoppers with JavaScript get the next products added to the end of the grid or table without a page change. The filters and sort order stay the same, the count line updates, and the address in the browser changes to the last page loaded. When the last page is loaded, the button disappears.

The same setting is on the Search results section, so search results can use the button too.

4. Add a row of subcategories

The subcategory row sits above the products. It is a row of text links, so shoppers can move to a subcategory quickly.

  1. In the Shopify admin, go to Content > Menus. Create a menu for the subcategories, such as "Drills subcategories".
  2. Add a link for each subcategory. Use the subcategory collection as the link target.
  3. Open the collection template in the theme editor.
  4. In the Collection section, set Subcategories to the menu you created.
  5. Save.

The row shows nothing when the menu is empty or not set.

5. Use the department list

The department list shows all collections on a page. Each department is a cell with its name, its product count and an image.

  1. In the Shopify admin, go to Content > Pages and create a page, such as "Departments".
  2. Under Theme template, choose list-collections.
  3. Open the page in the theme editor. Confirm that the department cells show the way you want.

The product count is the number of products in each collection.

6. Check the product cards

The product card settings shape what a shopper sees before a product page. Open the theme settings and go to Product cards. Check these:

Turn off any setting that does not suit your products. The grid stays tidy when fewer details show.

Check your setup

  1. Open a collection with several products. Confirm that the grid shows the right number of columns.
  2. Select a filter. Confirm that the product count changes and that the filter appears in the active list.
  3. Select Clear all. Confirm that all products return.
  4. Select List. Confirm that the table shows each product with its code and stock.
  5. Open the store on a phone. Open Filters and confirm that the results button shows the right count.
  6. Open the subcategory row. Select a subcategory and confirm that it opens its own collection.

Settings used