COMMERCE PRODUCT PICTURE FOCAL-POINT NOT WORKING + ASPECT RATIO

Site URL: https://www.terroir-imports.com/products.com

Hi there!

I am looking to change the focal-point of my images so that you can only see the product labels in the e-commerce. However, despite changing the aspect ratio to the desired 2.40 Anamorphic widescreen and adjusting the focal-point, the image is still not displaying as desired.

Here is what I get:

Any chance someone can help me out with this? @creedon, any tips 🙂 ?

Thank you!

This is what I'm seeing.

Please tell us more about your browsing environment. OS and app.

Hey @creedon, 

I have yet to switch the aspect ratio since I hadn't figured out how to change the focal point. I just wanted to avoid causing confusion for my clients.

I use Safari via my MacBook Pro. 

Thanks, 

Michelle 🙂

@creedon the same issue seems to happen when using chrome...

At this point I think the os/browser info is a red herring as the effect was not active so I couldn't see the issue in action.

I'd like to suggest a different approach to what I think you are trying to accomplish.

I'm guessing that showing full pictures of bottles on the product grid is not the best use of the space available. Lots of space spent on bottle tops and bottoms that don't tell the customer anything. You want to focus on the label. Glass doesn't sell wine, labels do! OK glass is important too but not as far as informing the customer of what they are getting into. 🙂

Edit the images of the bottles and crop the images down to the labels. Save those label images as new images. Upload them to each product. Make the label image the first image. Then your product grid will feature the image label prominently.

Do you think that would work for you?

8 minutes ago, creedon said:

At this point I think the os/browser info is a red herring as the effect was not active so I couldn't see the issue in action.

I'd like to suggest a different approach to what I think you are trying to accomplish.

I'm guessing that showing full pictures of bottles on the product grid is not the best use of the space available. Lots of space spent on bottle tops and bottoms that don't tell the customer anything. You want to focus on the label. Glass doesn't sell wine, labels do! OK glass is important too but not as far as informing the customer of what they are getting into. 🙂

Edit the images of the bottles and crop the images down to the labels. Save those label images as new images. Upload them to each product. Make the label image the first image. Then your product grid will feature the image label prominently.

 

Do you think that would work for you?

That seems reasonably easy! I'm gonna give it a shot! Thank you @creedon 🙏 

@creedon The only problem I see with that solution is that upon hover the client will not see the whole bottle. I could change the aspect ratio to allow you to see what the problem is?

1 minute ago, codefordummies said:

The only problem I see with that solution is that upon hover the client will not see the whole bottle.

That crossed my mind. I assume that is because you are using the quick view? I didn't test that variation.

No need to change the aspect ratio on your site. I can do that on my test site and see what the ramifications are.

I'm knocking off for the night. Please bump this thread in several days if I don't get back to you.

In the mean time if anyone else has a solution, please feel free.

1 minute ago, creedon said:

That crossed my mind. I assume that is because you are using the quick view? I didn't test that variation.

No need to change the aspect ratio on your site. I can do that on my test site and see what the ramifications are.

I'm knocking off for the night. Please bump this thread in several days if I don't get back to you.

In the mean time if anyone else has a solution, please feel free.

Excellent! Thanks @creedon I will definitely follow up if necessary. Really appreciate you looking into this 🙏🏼😇

I think my idea can still work for your needs with a few settings changes.

Here is what I'm seeing on my site.

The critical bit to set the item hover behaviour correctly.

Do you want to give that a go on one product?

Let us know how it goes.

2 minutes ago, creedon said:

I think my idea can still work for your needs with a few settings changes.

Here is what I'm seeing on my site.

 

 I didn't fine tune all the settings you have but the basic effect is there.

The critical bit to set the item hover behaviour correctly.

Do you want to give that a go on one product?

Let us know how it goes.

@creedon I'm willing to give it a try! However, I dont seem to see the "item hover behaviour" in my settings... Any how, what should be my next steps for now 🙂

The first thing is to hunt down that hover setting, if it is available. I notice that your site is not reporting a template when I use my code for telling me that info.

This info may be at Home > Help. What does it say?

What is the template for your site? Is your site in Developer Mode? DO NOT change the Developer Mode setting or bad things can happen. You can loose your whole site.

5 minutes ago, creedon said:

The first thing is to hunt down that hover setting, if it is available. I notice that your site is not reporting a template when I use my code for telling me that info.

This info may be at Home > Help. What does it say?

What is the template for your site? Is your site in Developer Mode? DO NOT change the Developer Mode setting or bad things can happen. You can loose your whole site.

This is what I have as a site:

and I do think that I am on developer mode..... Is there anyway of knowing what will be lost if I change it back 😩?

Quote

Is there anyway of knowing what will be lost if I change it back 😩?

DO NOT change it! Bad things will happen. If you did change it anything that is unique to the custom template you are using would go away.

Let's see if the hover setting is really not there.

Click on a Product Page in Pages.

Go to Design > Site Styles.

In the search field type in hover.

Does the setting show?

Ok! I won't touch it haha. Thanks for the warning.

Here is what I get: 

Quote

Ok! I won't touch it haha. Thanks for the warning.

I'm heavy on the warnings because I've seen folks in the forum who changed it not understanding the consequences and they were sad.

Quote

Here is what I get: 

In the full settings listing it would normally be in layout section.

Did you type in hover in the search? I've sometimes seen things not be listed and then show up using the search field.

It could also could not really be there.

It's been awhile since I worked in developer mode but I'm wondering if the tweak was removed to achieve another effect or prevent an issue with one?

1 minute ago, creedon said:

I'm heavy on the warnings because I've seen folks in the forum who changed it not understanding the consequences and they were sad.

In the full settings listing it would normally be in layout section.

Did you type in hover in the search? I've sometimes seen things not be listed and then show up using the search field.

It could also could not really be there.

It's been awhile since I worked in developer mode but I'm wondering if the tweak was removed to achieve another effect or prevent an issue with one?

Even when I begin to write "hover" nothing appears unfortunately!

Quote

Even when I begin to write "hover" nothing appears unfortunately!

It sounds like it really isn't there. 😞

Hold up. I'm on a new trail. Give me some time to investigate.

OK. The reason the tweak is not there is because the PRODUCTS DETAILS, Position tweak is set to Overlay.

If it is set to Under then the Item Hover shows.

Of course changing the Position setting changes the layout of the items in the product grid.

19 hours ago, creedon said:

OK. The reason the tweak is not there is because the PRODUCTS DETAILS, Position tweak is set to Overlay.

If it is set to Under then the Item Hover shows.

Of course changing the Position setting changes the layout of the items in the product grid.

I am willing to change the settings to position under! 

After doing that I just have to add the cropped image to the individual products?

Quote

After doing that I just have to add the cropped image to the individual products?

That is pretty much it. Make sure you put the cropped image first in the product detail and also the setting in Styles is set to show the alternate image.

Of course you can test all this out before committing to add all the product images.

Let us know how it goes.

2 hours ago, creedon said:

That is pretty much it. Make sure you put the cropped image first in the product detail and also the setting in Styles is set to show the alternate image.

Of course you can test all this out before committing to add all the product images.

Let us know how it goes.

Thank you so much for helping me figure all of this out 🙏🏼 it is really appreciated! I'll let you know if I have any subsequent issues 😄

On 1/2/2022 at 11:49 PM, creedon said:

 

I did a quick search trying to find a solution to my issue, and think this might be the thread, not 100% sure. Didn't want to start a new one, but I can if that's what should be done. Basically, I've uploaded images to my Squarespace site some time ago, but some of the images are cutoff, and don't show fully unless you right click and do the, "open in new window" thing.

I really wish Squarespace would just tell us what the sizes for our photos should be, and then adjust them accordingly to they fit the box. Am I missing something, and is there a way to do it? (I've seen the ratios, and messed with them, don't think that's it?)

Here's one product listing showing the third image being weird, and depending which page landing I'm looking at, the first two sometimes look weird:

https://www.hyperspacecoffee.com/shop/p/lhhrmimemy82xmiz9tkyipj4fsp7du