Product grid
The collection page workhorse, and the most heavily configured section in the theme at 40 settings: faceted filtering, sorting, a filter drawer on small screens, a price range control, quick view, and pagination.
- Merchant-addable
- No — template section
- Settings
- 27
- Block types
- —
- File
sections/product-grid.liquid
Used by default on: Collection
Screenshots pending
Captures for Product grid at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Every collection page.
Setting it up
- Add the section to the collection template.
- Set products per row and per page under Products and Grid layout.
- Turn on the facets you actually have data for under Filtering and sorting. Filters themselves come from the free Search & Discovery app, not from the theme.
- Configure Card actions and the three Quick view groups if you want add-to-cart from the grid.
- Choose Pagination style, then set Spacing and color.
Where the content comes from
Shopify owns products, variants, prices, availability, and the filter definitions. The section owns layout and which controls appear.
Notes and cautions
- A "Vendor" filter on a single-vendor store is clutter. Only enable facets that split your catalog meaningfully.
- Filtering works with JavaScript disabled — it submits and reloads — and gets faster once JavaScript loads.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Products
Product card design, badges, and swatches come from theme settings. Quick-view presentation uses shared theme defaults. Choose which shopping actions appear here.
Grid layout
Mosaic shows the first product as a wide feature card on the first page.
Toolbar
Turn this off when the collection banner already shows the count.
When tabs overflow, they begin on the left for horizontal scrolling.
Filtering and sorting
Filter groups come from the filters you set up in the Search and Discovery settings.
Sidebar shows filters beside products. Drawer opens filters off-canvas (like the cart) on all screens.
Choose where applied filters appear on the collection page when using the drawer layout.
Width of the filter sidebar on desktop.
A group with an applied filter always starts open so shoppers can see what is narrowing their results.
Swatches use the color or image set on each filter value in the Search and Discovery settings.
Displays a visual min–max range bar above the From/To inputs.
Card actions
Single-variant products are added directly to cart. Products with options link to their product page.
Controls where the add to cart button appears on product cards.
Controls the add to cart presentation below 750px.
Opens a popup for every product where customers can review details, select options, and add the item to cart.
Pagination
Use {count} to show how many products the next click loads. E.g. "Load {count} more products".
Shown after the last products load.