Hi I’d like to customize my shop theme so I have larger photos and only 3 in a row. There’s no option to edit the amount of product in a row right now, and I’ve already changed the photo size to ‘Tall (2:3)’. Is there some code I can add to help me edit these settings?
Topic summary
Goal: Make collection product photos larger by showing only 3 products per row in the Prestige theme. The built-in setting for items-per-row wasn’t available; the image ratio had already been set to Tall (2:3).
Actions taken:
- Store URL was shared for context.
- A CSS-based solution was provided: edit Online store > Themes > Edit code, open Assets > theme.css, and add a media query for desktop (min-width: 950px) that sets the grid cell width to 33%, effectively forcing 3 products per row. This targets the grid cell classes used by the theme’s collection layout.
Outcome:
- A screenshot illustrated the result, showing 3 items per row and consequently larger product images.
- The requester confirmed it worked. Status: resolved; no further questions left open.
1 Like
Do you mind sharing your website?
yes of course - www.arcadehome.com
Just to make sure I understand what you want. You want to have 3 products in a row in your product collection right? If so, please follow the instructions below
- From your Admin page, go to Online store > Themes > click the three dots > Edit code
- Find the Asset folder, and open the theme.css file
- Add the code below at the very end of the file
@media only screen and (min-width: 950px) {
.Grid__Cell.\31 \/2--phone.\31 \/3--tablet-and-up.\31 \/4--desk {
width: 33%;
}
}
Result:
1 Like
Thank you so very much!
1 Like