Product grid

Product grid is the main section of the collection template. It lists the collection's products with filters and sorting, and can mix in promotion tiles between the products.

Filtering and sorting#

• Enable filtering shows the filters you set up in Shopify's Search and Discovery app, such as availability, price, color and size.
• Desktop filter layout places filters in a Sidebar next to the grid, in a Horizontal bar above it, or in a Drawer that opens from a button. On phones and tablets, filters always open in a drawer.
• Enable sorting adds a sort menu, for example by price or best selling.

Filtering, sorting and loading more products update the grid without reloading the page. New products stagger into view when scroll reveals are on.

Pagination and columns#

• Products per page is the number of products loaded at a time, from 8 to 36.
• Pagination shows Page numbers, or a Load more button that adds the next page below the current one and shows how many of the products are on screen.
• Columns on desktop and Columns on mobile set the grid. Let customers change the number of columns adds a toggle so shoppers can switch between a denser and a roomier grid.

Promotion tiles#

Add up to three Promotion tile blocks to place an image, heading and link inside the grid, such as a featured collection or a gift guide. Show before product sets the position, and Width makes a tile one or two columns wide. Tiles only appear on the first page of results.

Best practices#

• Set up filters first. Install the free Search and Discovery app and add the filters your shoppers need. See Collections and filters.
• Choose the layout by catalog size. A sidebar suits large catalogs with many filters. A drawer keeps the products front and center for small ones.
• 24 products per page with Load more is a good balance between speed and browsing.
• Use promotion tiles sparingly. One tile in the first rows adds interest. More starts to feel like ads.
• Match columns to your images. Three or four columns suit portrait images; with square images, four or five work well.

Preset tips#

• All three presets use this section with filters in a sidebar and the Load more button.
• Card style follows Theme settings → Product cards, so the same grid looks editorial in Vellmar, soft and rounded in Sorrel and dense in Graphite.

Handle

main-collection

Group

Template sections

Where

Part of its page template. Up to 3 blocks.

Settings#

Filtering and sorting#

Padding#

Blocks#

Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 3 blocks.

#

This has no settings.