Jump to content

COMMERCE PRODUCT PICTURE FOCAL-POINT NOT WORKING + ASPECT RATIO

Recommended Posts

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:

225878167_ScreenShot2021-12-30at2_02_21PM.thumb.png.bcc248a5b6a58d844b4c4745229690dc.png

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

 

Thank you!

Link to comment

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.

1237767622_ScreenShot2022-01-02at8_42_09PM.thumb.png.59f0e830d1a2e090afa02dc1be41109d.png

 

535755042_ScreenShot2022-01-02at8_42_46PM.png.f7e9fd43102ab74a8ee2ed0eec356f01.png

Do you think that would work for you?

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

1237767622_ScreenShot2022-01-02at8_42_09PM.thumb.png.59f0e830d1a2e090afa02dc1be41109d.png

 

535755042_ScreenShot2022-01-02at8_42_46PM.png.f7e9fd43102ab74a8ee2ed0eec356f01.png

Do you think that would work for you?

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

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 🙏🏼😇

Link to comment

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.

1367966810_ScreenShot2022-01-03at10_35_02AM.png.d75fd5b99f8889c22815bcd5dec393ef.png

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

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

1367966810_ScreenShot2022-01-03at10_35_02AM.png.d75fd5b99f8889c22815bcd5dec393ef.png

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 🙂

Link to comment

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?

1047170303_ScreenShot2022-01-03at10_52_49AM.thumb.png.a2ead79b7847b8af1b5699d623352c26.png

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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?

1047170303_ScreenShot2022-01-03at10_52_49AM.thumb.png.a2ead79b7847b8af1b5699d623352c26.png

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:

image.png.c743d8f9a4bd6c184c0d46b2dbd13580.png

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

Link to comment
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?

1694700083_ScreenShot2022-01-03at11_22_44AM.thumb.png.5845b8170a07ad8fb8c103df4fc693c7.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

558538877_ScreenShot2022-01-03at11_44_07AM.png.475bac3204701985aa2c42216661166b.png

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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

558538877_ScreenShot2022-01-03at11_44_07AM.png.475bac3204701985aa2c42216661166b.png

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!

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

1191664195_ScreenShot2022-01-03at1_31_43PM.png.0078b97e02c10e5fc427f6b8334a4fe1.png

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
19 hours ago, creedon said:

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

1191664195_ScreenShot2022-01-03at1_31_43PM.png.0078b97e02c10e5fc427f6b8334a4fe1.png

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?

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 😄

Link to comment
  • 11 months later...
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

Edited by caffeinateddiabetic
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.