The product grid is the heart of every collection page. Shopify keeps deciding which products are in the collection. You decide how they look, which filters shoppers get, and where banners interrupt the rows to help undecided shoppers.
Open the grid settings
- Open your template under Merchandising → Collection pages, on the Design tab.
- Click the product grid in the canvas to select it.
- Click Settings in the toolbar. The Product grid panel opens with four tabs: Banners, Filters, Cards and Order.
Changes show in the canvas straight away and save automatically.
Cards: layout and product details
The Cards tab sets how products are laid out and what each card shows.
- Columns (desktop): 3, 4 or 5. Columns (mobile): 1 or 2.
- Products per page: how many products show before the page links to the next one. The default is 24. Paging works like your normal Shopify collection pages.
- Image ratio: Portrait, Square or Landscape. Pick the one that fits your product photos.
- Emphasize sale prices: shows the original price struck through, highlights the sale price, and adds a discount badge such as “-20%”.
- Quick add button: lets shoppers add a product to the cart without leaving the page. Products with several variants get a “Choose options” button that opens the product page instead, and sold-out products show “Sold out”.
- Show vendor and Show description: add the brand and a short description to each card.
- Show sort dropdown: lets shoppers sort with the sort options Shopify offers, such as price or best selling.
Filters
The filters and their labels come from the Shopify Search & Discovery app, so shoppers get the same filters as in the rest of your store. To add a filter, such as size, skin type or price, set it up in Search & Discovery. It then appears here automatically. The Filters tab controls how they show:
- Show filters: turns the filters on or off.
- Side: Left or Right of the products.
- Collapsed by default: shows only the filter names until a shopper opens one.
- Style: Sidebar keeps the filters next to the products on larger screens. Drawer hides them behind a Filter button that slides them in.
On phones, filters always open from a Filter button, whatever style you pick. A collection without any filters in Search & Discovery simply shows no filter column.
Banners between the rows
Banners interrupt the product grid after a row you choose. They are great for a quiz invitation right where shoppers start scrolling through too many options.
- On the Banners tab, click Add banner. It starts with ready-made copy: “Not sure what to pick?”.
- Edit the Heading, Subheading and Button text.
- Choose the Linked quiz. The button opens this quiz.
- Pick a Placement. Full-width row spans the whole grid. Single card takes the place of one product and pushes the rest along.
- Set After row. A full-width banner appears after that many rows. A single-card banner appears after that many products.
- Optionally add a Banner graphic and set the Background, Text color, Button background and Button text color.
You can also click a banner in the canvas and choose Edit banner… to jump straight to it. Each banner has buttons to duplicate or delete it.
Banners show on the first page of the collection only. On a collection with fewer products, a banner moves up to sit after the last product. A banner without a linked quiz stays visible in the canvas but is hidden on your store, and the Launch tab warns you about it.
Order
Out of the box, products keep the order you set for the collection in Shopify. On the Order tab you can switch on Personalize product order, so each returning shopper sees the products they are most likely to want first. See Personalize collection pages for how it works.
Good to know
- Quick add uses the same cart connection as your quizzes and search, so your theme's cart count updates without a page reload.
- Grid settings are part of the template. Every collection that uses it gets the same layout, with its own products.
- Your changes reach the store when you publish or republish. See Assign and publish a collection page.