[Image Banner] Fixed background position

[LucasLacerdaUX]

PR Summary:

Introduces a new Fixed background position option to Image behavior in the Image Banner section.

Why are these changes introduced?

Fixes #2343.

What approach did you take?

• Added the setting.
• Leverage the existing animation--{{ image_behavior }} class to apply animation--fixed
• Uses styles from [Image behavior] Fixed background position #2523

Testing steps/scenarios

• Add Image Banner section.
• Set Image behavior to Fixed background position
• Test with 1 and 2 images
• Test with placeholder only
• Test on mobile and desktop

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ludoboludo]

It doesn't seem to manage the focal point that well on mobile and is really zooming in on the image: video

I think it's specifically an issue on sections that are at the top of the page or very bottom (if the footer is small in terms of height).

[ludoboludo]

Actually it's even more so specific to the admin when you view the mobile layout. Because you have a pretty tall browser window. When I test from my phone it's better because it's as tall. Could be an odd experience for merchants to understand 🤔

[melissaperreault]

@ludoboludo Can you record a video to explain what you observe? I am not sure I understand 🤔

[ludoboludo]

I think the video shared in my first message shows what I'm observing. Basically the thing to know here is that a fixed element is placed based on the viewport itself not the element its in.

So there can be some poor experiences in certain scenarios:

• if the viewport height is quite high
• if you're viewing the site on big screen/wide browser window as the image has a max size of 3840px wide
• depending on the image format, portrait/landscape, some example are more or less obvious
• if the image/section is at the bottom/top of the page, the visible part isn't going to show what you're actually trying to show in some occasions

Here is a video recap of those examples (it's pretty long 😬 7min)

[LucasLacerdaUX]

About focal points, I'm actually not sure what the solution would be here. In order for this effect to work for every section position, the height of the image must be 100vh, otherwise you will have empty space at some point while scrolling.

Here's an example where I added max-height: 50% (arbitrary value) to limit the image heights:

20-36-p6eac-g7t4z.mp4

It looks perfect for the first section, but as you scroll, you realize that the images MUST be 100% height for the effect to work properly. I would say the is almost an expected side-effect of turning this setting on: it will cause the focal point to not show up by default in some situations. Should we have any help text to let merchants know of that? If you have any alternative suggestions to solve this issue, let me know.

As for image sizes, I think you just made a great point in the video that we may need to consider bumping the resolution we serve them. I'm pretty sure that right now it's serving a lower quality image than we should, especially on mobile where it's 50% area but shown with a 100% zoom image.

[LucasLacerdaUX]

@ludoboludo I've updated the image sizes to 100% so there is no resolution drop. You can see a clear improvement in mobile and half-width images.

Here's the before & after:

[melissaperreault]

Thank you Lucas!

Didn't find anything apart from what Ludo found! Otherwise it looks good! 🙌

[ludoboludo]

Looking good. A couple comments.

I wonder if we should add some info in the editor or help docs about the impact on performance if you do too many fixed background on the page 🤔

[ludoboludo]

Nitpicks, otherwise looks good 👍