Collection page
The collection page lists the parts in a collection. Shoppers filter and sort the list, switch between a grid and a list, and, when a vehicle is chosen, see which parts fit it. This page covers the collection settings, the promo tile, the vehicle scope bar, the list view with bulk add, and compare.
Collection settings
Open the collection in the theme editor and select the Collection section.
| Setting | Options or default | Effect |
|---|---|---|
| "Filter layout" | "Sidebar" (default) or "Horizontal bar" | Places the filters on the side or above the list |
| "Desktop columns" | 4 by default | The number of columns on desktop |
| "Mobile columns" | "1 column" or "2 columns" (default) | The number of columns on phones |
| "Products per page" | 24 by default | How many products appear before pagination |
| "Show description" | On by default | Shows the collection description under the title |
| "Show category navigation" | On by default | Lists the category links of the menu chosen in "Category menu", above the filters |
| "Category menu" | The menu with the handle main-menu by default |
The menu whose links form the category tree. Up to three levels are shown. |
| "Show compare checkbox on cards" | On by default | Shows a checkbox to add a product to compare |
The vehicle scope bar
When a shopper has chosen a vehicle, the collection shows a scope bar above the list:
- The sentence "Showing N parts that fit your" followed by the vehicle name.
- A switch with two choices: "Fits my vehicle" and "All parts".
The switch works in one of two ways:
- With the Search & Discovery filter on fitment.vehicles (see Vehicle fitment): "Fits my vehicle" adds the vehicle filter to the address of the page. The list shows only the matching parts, and the counts and pages are correct.
- Without the filter: the switch is hidden. Each card still shows its fit line. Parts that do not fit are still on the page.
The scope bar is not shown when no vehicle is chosen. The collection then works like any other collection.
Filters
The sidebar (or the horizontal bar) shows the filters set up in Shopify's Search & Discovery app. The theme restyles them and shows the chosen filters as chips above the list.
For a parts store, add filters on the product fields that your shoppers use: product type, vendor (brand), price, and any options that you use, such as size or color. The fitment filter on fitment.vehicles is added the same way.
Version 1.0 ships one preset, Chassis. More presets follow in a later version. See Presets.
Grid and list view
Shoppers choose the view with the grid and list buttons. The choice is remembered in the shopper's browser.
- Grid: the card layout, with the part number, fit line, stock line, price and add button. When Blend product photos into the tile is on in Theme settings > Product cards, photos on a white background take the tile colour on light colour schemes.
- List: one row per product, with a quantity field on each row and a bulk add button named Add selected to cart. A shopper enters a quantity on each row they want, then clicks Add selected to cart once to add them all to the cart.
The list view is useful for repeat orders.
Sorting and pagination
- The sort menu uses the sort options that Shopify provides for the collection. Set the order in the collection itself, and the theme follows it.
- Pagination shows the page numbers as buttons. Use the next and previous buttons to move between pages.
Promo tiles
A promo tile is a block in the Collection section. It sits in the product grid, so it appears between products on the first page. Each promo tile has these settings:
| Setting | What to enter |
|---|---|
| "Image" | A picture for the tile |
| "Heading" | Default "Need help choosing?" |
| "Text" | A short line of help, such as "Not sure which bracket fits? Choose your vehicle first." |
| "Button label" | The text on the button |
| "Button link" | Where the button goes, such as a guide page |
| "Grid position (slot number on the first page)" | The slot in the grid. The default is 6. |
| "Width (columns)" | "1 column" or "2 columns" |
The tile shows on the first page only, in the slot you set. Keep the text short. A promo tile that repeats the product is not useful to shoppers.
Compare
When Show compare checkbox on cards is on, each card shows a checkbox. A shopper can compare up to four products. When the shopper selects the first product, the compare bar appears, and the shopper can open the compare page from it. Set the compare page in Theme settings > Trade tools > Compare page. See Part numbers and search.
Search results
The search results page uses the same layout. Its section, Search results, has these settings: "Filter layout", "Desktop columns" (default 4), "Results per page" (default 24), and "Show compare checkbox on cards".
Check the page
- Choose a vehicle, and check that the scope bar shows the right vehicle name and the correct count.
- With the Search & Discovery filter in place, switch to "Fits my vehicle" and check that the count matches the cards shown.
- In the list view, select two products with quantities, click Add selected to cart, and check the cart.
- On a phone, check that filters open and close, and that the grid shows the number of columns you chose.