Collection page settings
In the theme editor, choose Collections > Default collection from the page list, then click the Collection section.
| Setting | What it does |
|---|---|
| Show collection description | Shows the description you wrote for the collection. |
| Show collection image | Shows the collection image beside the title. |
| Products per page | 8 to 48. |
| Columns on desktop | 2 to 5. |
| Columns on mobile | 1 or 2. |
| Default view | Grid or List. Shoppers can switch between them, and their choice is remembered in their browser. |
| Pagination | Load more button, or Page numbers. |
| Enable filtering | Shows the Filters button. Set up filters in the Search & Discovery app. Collections with more than 5,000 products do not show filters. |
| Enable sorting | Shows the Sort by menu. |
| Show “Only show parts that fit” | The fit switch in the vehicle bar. Needs the fitment metafield added as a filter. See the fit filter. |
| Vehicle prompt color scheme | The colors of the vehicle finder bar, shown when no vehicle is picked. |
| Help button label, Help button link | A button shown when no parts in the collection fit the shopper's vehicle. |
| Color scheme | The colors of the section. |
| Top padding, Bottom padding | Space above and below the section. |
| Universal parts collection | A row of universal parts shown below the results when Only show parts that fit is on. |
The vehicle bar
When vehicle fitment is on, the top of each collection page shows a vehicle bar:
- No vehicle picked: a vehicle finder. After saving, the shopper stays on the same collection.
- Vehicle picked: “Shopping for” with the vehicle name, a Change link, a Clear link, and the Only show parts that fit switch (once the fit filter is set up).
Show universal parts below filtered results
Universal parts have no vehicle list, so the fit switch hides them. To show them anyway:
- Create a collection of your universal parts, for example with a condition “Product tag is equal to universal”.
- In the Collection section, choose it in Universal parts collection.
When the fit switch is on, the first page of results ends with a row called “Universal parts that also fit”, with a link to the full collection.
Filters and sorting
Datum uses Shopify's own filters. To choose which filters show, such as brand, price or product type, use the Shopify Search & Discovery app.
On desktop, filters show in a column beside the results. On smaller screens, they open in a panel from the Filters button. Active filters show above the results, with a Clear all link.
Product card settings
Product cards are used on collection pages, search results and product sections. Their settings are in Theme settings > Product cards. Image shape and fit are in Theme settings > Product images, shared with every other product photo.
| Setting | What it does |
|---|---|
| Show second image on hover | Shows the product's second image when a shopper points at the card. |
| Show vendor | Shows the vendor (brand). |
| Show part number | Shows the SKU of the first available variant. |
| Show product rating | Uses the standard product rating metafield from review apps. |
| Show spec row | Shows the first 3 specs from the product specs metafield. |
| Specs metafield | Namespace and key of a multi-line text metafield. One spec per line as Label: Value. |
| Show swatches | Shows color or image swatches for the product options. |
| Enable quick add | Adds a buy button to each card. See below. |
| Enable compare | Adds a compare checkbox to each card. |
| Show stock status | Shows In stock on products that track inventory and have stock. |
| Restock request page | Sold out products link here with an Ask about restock button. Use a page with the contact form template. |
When vehicle fitment is on, every card shows a fit badge.
Quick add
When Enable quick add is on:
- Products with no options show Add to cart. One click adds one to the cart.
- Products with options, subscriptions or gift cards show Choose options. It opens a quick add window with the variant picker, fit status, quantity and Add to cart.
Compare
When Enable compare is on, shoppers can tick up to 4 parts to compare. A compare bar appears at the bottom of the screen. Compare now opens a side-by-side table with brand, part number, availability, fit status and specs. Shoppers can choose Show differences only.
The compare list is saved in the shopper's browser. To add compare to the product page, add the Compare checkbox block to the Product information section.
Search results page
In the theme editor, choose Search from the page list, then click the Search results section.
| Setting | What it does |
|---|---|
| Results per page | 8 to 48. |
| Columns on desktop | 2 to 5. |
| Enable filtering | Set up filters in the Search & Discovery app. |
| Enable sorting | Shows the Sort by menu. |
| Suggested links menu | A menu of links shown when a search finds nothing. |
| Help button label, Help button link | A help button shown when a search finds nothing. |
| Color scheme, Top padding, Bottom padding | Colors and spacing. |
Shoppers can switch between tabs for all results, products, articles and pages.
Search suggestions (predictive search)
Turn this on with Theme settings > Search > Enable search suggestions. As shoppers type in the header search, Datum shows suggested searches, collections, articles, pages and products. Products show a fit badge when the shopper has picked a vehicle.
Change the text inside the empty search field with Search field placeholder. The default is “Search part number, OEM number or keyword”.