Show varying image sizes in collection view

terryohm
New Member
11 0 0

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

 

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!

 

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2138 614 490

Hey @terryohm

 

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
terryohm
New Member
11 0 0

any luck?

ThePrimeWeb
Shopify Partner
2138 614 490

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

 

 

Like so, 

ThePrimeWeb_2-1715694869590.png

 

ThePrimeWeb_3-1715694900949.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
terryohm
New Member
11 0 0

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