Aspect Ratio - How to individually resize the images on my product page?

Any ideas on how to individually resize the images on my product page? For whatever reason Squarespace will only allow the user to select 1 specific aspect ratio, for all products. I'm trying to develop a website for selling photos, and photos come in all shapes and sizes. Picking one aspect ratio results in some images/products being cropped.

I've already setup my "Store" using the product photo option (which allows for custom aspect ratios), and then unlinking my official product page. However, when the customer clicks on the photo they want to buy, the page updates to the official product page photo, which is cropped to the wrong aspect ratio. 

It appears my only option is to inject CSS code (per Squarespace IT), which I know nothing about. However, when I look at the FAQs on that potential solution, it specifically says to NOT use CSS to change image sizing. 

If I cannot fix this issue, it's a dealbreaker for me to use Squarespace as my web host. 

Hoping someone has an idea on how I can move forward.

Thanks, Max

I've got the exact same issue and am very new to Squarespace.  

Same problem here.   Only workaround I have found so far, is to add a border around all my images so they are the same aspect ratio. Problem with this is, the layout of the product page is not optimum and when opened in the light box, the image is small.   For example - a 16x9 image in a 4x3 frame

Would love a proper solution.

Can you share link to product? We can help easier.

Im trying to sell art work and i have the same problem some of my art is landscape and some isnt but there are no options that allow you to apply an aspect ratio to one product without applying it to ALL prodcuts. 

Having the same problem. I sell jewelry and my earrings are long and so are my necklaces. Everything on those pages keep cutting off. Help please.

Same issue here—it's so frustrating to only be able to choose one aspect ratio, and have that applied to every single art print on the entire site, regardless of whether the print itself is landscape or portrait. Is there any way for this to be adjusted? Can the aspect ratio cropping be turned off entirely, so that the images are displayed at their actual aspect ratio? It's driving me insane.

Using 7.1 and have same problem with mixing horizontal and vertical images in my store. It’s either or as I understand it or have I missed something? I have no knowledge in CSS so the only solution I can see right now is to set up two stores - one for vertical pics and one for horizontal. 

So many YouTube photographers promoting Squarespace but they don’t seem to use the service for selling pics online. ….

I have been setting up my print store and thinking I was an idiot. Found this thread and couldn't be more disappointed to see that there really isn't a way to display my prints in the correct aspect ratio.  

Hello everyone,

Same problem here ! It drives me mad and I'm so disappointed by SquareSpace right now, like how such an easy option is not even available on a professional website !!??

If someone knows any CSS to fix this please help ! And if someone from SS lands here please make something about it !

On 1/14/2021 at 7:39 PM, flavienabbate said:

Hello everyone,

Same problem here ! It drives me mad and I'm so disappointed by SquareSpace right now, like how such an easy option is not even available on a professional website !!??

If someone knows any CSS to fix this please help ! And if someone from SS lands here please make something about it !

If you share link to page where you has problem, we can help easier

On 1/17/2021 at 12:32 PM, tuanphan said:

If you share link to page where you has problem, we can help easier

Hello tuanphan, thank you for your help !

My page is flaviotaneli.com, go to the "tirages" page 😉

Thank you !

18 hours ago, flavienabbate said:

Hello tuanphan, thank you for your help !

My page is flaviotaneli.com, go to the "tirages" page 😉

Thank you !

Add to Design > Custom CSS

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Thank you !! It works for when you are on the page of the specific product, after clicking on it, but on the "tirage" page all products are still shown at the same aspect ratio. If you have the code for this one as well it would be awesome !!

Thank you so so much !

I just got the solution !

img. { object-fit: contain !important; }

That simple !

So now every image on the site is displayed on its original ratio !

Thanks a lot tuanphan ! Cheers from France !

Hi,

Can you please explain to me how you go this to work? I'm struggling with having two different aspect ratios anywhere within the store products and it's pretty unbelievable how difficult it is to find answers to this issue...

Site is - tonycrossephotography.com

password is Snake

I have even tried setting up two different pages like the posters above, and still can't get the custom CSS to work as it should... please help?

2 hours ago, Paddy34 said:

I'm struggling with having two different aspect ratios anywhere within the store products

As far as I can tell your images have been uploaded with a 3:2 aspect ration so code meant to prevent cropping is not going to work.

Having everything in the same aspect is a good thing usually.

On 1/24/2021 at 6:47 PM, flavienabbate said:

I just got the solution !

img. { object-fit: contain !important; }

That simple !

So now every image on the site is displayed on its original ratio !

Thanks a lot tuanphan ! Cheers from France !

I have added this to the Custom CSS but unsuccessful, 

On 1/24/2021 at 5:50 PM, flavienabbate said:

Thank you !! It works for when you are on the page of the specific product, after clicking on it, but on the "tirage" page all products are still shown at the same aspect ratio. If you have the code for this one as well it would be awesome !!

 

Thank you so so much !

Can you explain further please? It has not worked on my site

On 1/31/2021 at 12:29 PM, Paddy34 said:

Hi,

 

Can you please explain to me how you go this to work? I'm struggling with having two different aspect ratios anywhere within the store products and it's pretty unbelievable how difficult it is to find answers to this issue...

Site is - tonycrossephotography.com

password is Snake

 

I have even tried setting up two different pages like the posters above, and still can't get the custom CSS to work as it should... please help?

Bumping this because I am having the same issue on my storefront page. And agree, it should NOT be this difficult to AUTO the aspect ratios of product images on the store page!

On 6/9/2021 at 12:27 AM, photogjimi said:

Bumping this because I am having the same issue on my storefront page. And agree, it should NOT be this difficult to AUTO the aspect ratios of product images on the store page!

Can you share link to store page? We can take a look

13 hours ago, tuanphan said:

Can you share link to store page? We can take a look

Thanks Tuan, you helped me with this via email! Thank you!

I am having the same issue as well, @tuanphan could you help?

On 10/21/2021 at 10:37 AM, ElaynaClair said:

I am having the same issue as well, @tuanphan could you help?

Can you share link to product page? We can check easier

On 6/26/2020 at 8:44 PM, AmidNature said:

Squarespace will only allow the user to select 1 specific aspect ratio, for all products. I'm trying to develop a website for selling photos, and photos come in all shapes and sizes. Picking one aspect ratio results in some images/products being cropped.

Please take a look at the guide I wrote here:

Product image aspect ratios on Squarespace 7.1

If anyone experiences an issue getting this to work on your Squarespace 7.1 website (this is for v7.1 sites only) please post back with details of your site - including a link to the page, and a screenshot.

Did this help? Please give feedback by clicking an icon below  ⬇️