Show varying image sizes in collection view

Store Design
,

Topic summary

Goal: display framed print images in a Shopify collection so their proportions visibly reflect varying product sizes. Current issue: Dawn v11 enforces uniform image width in the collection grid, preventing native aspect ratios from showing.

Context: OP asked if CSS/Liquid could force native image size. A store link was provided for review.

Update/Advice: A helper reviewed and noted a code-based solution would be extensive and not suitable for brief instructions. Instead, they proposed a practical workaround:

  • Create a fixed-size canvas for all product images.
  • Place each product photo inside the canvas, resizing the artwork to match its actual proportions.
  • Leave remaining space as white (whitespace) so the uploaded image retains relative size cues while fitting the collection layout.
  • Example images were shared to illustrate the approach.

Outcome: OP will try the workaround. No simple CSS/Liquid solution was provided; no theme-level change implemented. Status: effectively proceeding with the workaround; underlying code solution unresolved.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi. My store sells framed prints. I am trying to show product images within the collection view that reflect the product dimensions and are proportionally correct. i.e. I have varying sizes of the same print and I would like to make it visually obvious to the customer that there are different sizes available. This is how i would like to display my products:

test.png
test.png2000×843 395 KB

However at the moment, Shopify is forcing the same width for all images. Is there a way via css or liquid to force the native image size to display ? I’m using Dawn theme V11

Thanks for any advice!

2

Hey @terryohm

Can you share the link to your store please? Thanks!

3

https://thewaltoncollection.ie/collections/michael-collins-by-leo-whelan-1922

thank you

4

any luck?

5

Hey @terryohm ,

I have checked and unfortunately, this requires abit of extensive code, one which I can’t really bundle up into an instruction set here.

What you could do is to create an empty canvas of the same size for all images and paste the image of the product inside that canvas and resize just the image. Leave the empty spaces as white space. That way when you upload it to the product photo, the whitespace will be considered part of the photo and it will resize according to the canvas.

ThePrimeWeb_0-1715694740493.png
ThePrimeWeb_0-1715694740493.png853×720 5.09 KB

Like so,

ThePrimeWeb_2-1715694869590.png
ThePrimeWeb_2-1715694869590.png370×435 173 KB

ThePrimeWeb_3-1715694900949.png
ThePrimeWeb_3-1715694900949.png468×681 252 KB

6

I’ll try that workaround. thank you very much for your help with this.