How to make product grid photos larger on collection pages (Canopy Theme)

Store Design

Topic summary

A user wants to enlarge product grid images on collection pages in the Canopy theme. They’ve already improved uniformity using square aspect ratios via a bulk resize app, but seek larger images while maintaining the current grid layout (4 columns on desktop, 2 on mobile).

Proposed Solution:
A CSS code snippet was provided to increase image size:

  • Add code to assets/styles.css file
  • The code removes padding from product grid columns using padding: 0 !important;

Current Status:
The discussion remains open. Another participant requested detailed step-by-step instructions for implementing the CSS solution, indicating the technical guidance may need further clarification for users unfamiliar with theme file editing.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am trying to figure out how to easily enlarge the photos in the product grid in collection pages. I am using a bulk photo resize app and changing all the aspect ratios to square has already shown great improvement in size and uniformity, but it would be nice for the photos to be larger if possible without reducing the amount of photos in a row (4 on desktop and it’s a good size, 2 on mobile and it’s a little smaller than I’d like. Any help is appreciated!

My store is www.groovyglassware.com

2

Hi,

To make the image size a bit bigger on collection page, please add the code below to assets / styles.css file.

.product-grid.grid .column {
    padding: 0 !important;
}

If you resolve the issue, please click “Like” and “Accept solution”.

If you still have the issue or have any questions, please let me know.

Hope it helps.

Thanks.

3

Can you please provide step by step instructions on how to complete this? Thank you!