How to change how many products show per row in Shopify
Fewer, bigger product cards feel premium; more, smaller ones help shoppers scan large catalogs. Shopify themes let you choose, for desktop and mobile separately.
1. Change the product grid settings
- Go to Online Store > Themes > Customize and open a collection page from the page picker.
- Click the Product grid section.
- Set the number of products per row on desktop and the number of columns on mobile (one or two).
- Adjust products per page too, so the grid ends on a full row.
2. Go beyond the options
- In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
- Find the collection grid's CSS and change the grid columns at the breakpoints you want, for example three on tablets.
- Check that product titles and prices still fit in the narrower cards.
3. Or ask Liquify in one sentence
Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.
“Show 3 products per row on collection pages on desktop and 2 on mobile”
Try it free on a sample store
Free plan, no credit card. Connect a real store whenever you're ready.
Questions
How many products per row is best?
Three or four on desktop and two on mobile suit most stores. Fewer per row works for products that need a closer look, like jewelry or art.