Product grid
Product grid shows the products of a collection in a grid. Shoppers can sort and filter the products, and the grid pages through the rest of the collection.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Product grid.
The package uses this section on the Collection template.
Settings
View the section guide .
Filtering and sorting
Filters are set up in the Search & Discovery app. The filter panel is hidden when the collection has no products and no filters. On mobile, filters always open from a button.
| Setting | Options | Description |
|---|---|---|
| Enable sorting | Shows the sort control in the filter panel so shoppers can reorder the products. | |
| Enable filtering | Customize filters with the Search & Discovery app. Learn more ( https://help.shopify.com/manual/online-store/search-and-discovery/filters ) | |
| Show product counts | Shows the number of products above the grid. | |
| Filter layout on desktop | • Sidebar | Sidebar keeps the filters in a column beside the grid. Drawer opens them in a slide-out panel from a Filter button. It applies when filtering is on. |
Layout
Products per page sets how many products load at once. If the collection has fewer products than this number, all of them show.
| Setting | Options | Description |
|---|---|---|
| Products per page | Number of products loaded at a time before pagination. | |
| Columns on desktop | Number of products per row on desktop. Phones always show two per row. | |
| Column gap | • No gap | Space between the product cards: no gap, small, medium or large. |
Carousel
Pagination type sets how the next products load. Page number shows numbered pages, Load more button adds a button under the grid, and Infinite scroll loads more products as the shopper scrolls.
| Setting | Options | Description |
|---|---|---|
| Pagination type | • Page number | How further products load: numbered pages (Page number), a Load more button, or automatically while the shopper scrolls (Infinite scroll). |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Width of the section content: standard page width, a wider container, or the full screen width. |
| Top padding | Space above the section in pixels. | |
| Bottom padding | Space below the section in pixels. | |
| Show top border | Draws a thin line along the top edge of the section. |
Blocks
Promotion (promotion)
A promotional card placed inside the grid. Promotion position sets where it appears, and Promotion width sets how many grid cells it takes.
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Image | 1920px x 840px recommended | |
| Image on mobile | 348px x 348px recommended | |
| Highlight text | Text of the badge shown above the promotion heading. The badge is hidden when this is empty. | |
| Badge icon | • None | Small icon shown before the badge text: none, a star or a dot. |
| Background color | Background color of the badge. | |
| Text color | Text color of the badge. | |
| Subheading | Short line shown above the promotion heading. | |
| Heading | Main title of the promotion tile. | |
| Description | Text shown under the promotion heading. | |
| Button label | Text of the outlined button on the promotion tile. The button is hidden when this is empty. | |
| Promotion link | Page the tile and its button link to. Without a link the tile is not clickable. | |
| Content position on desktop | • Top left | On mobile, the position adjusts automatically. |
| Promotion position | Place of the tile among the products, counted from 1. The tile appears on the first page of results only. | |
| Promotion width | • 1 | Number of grid columns the tile spans, 1 or 2. |
Notes
- Promotion cards appear on the first page of the grid only.
- Up to 3 promotion blocks can be added.
No comments yet