add zoom on hover and show spinner when image loading

[metamoni]

PR Summary:

Fixes an issue with transparent product images when the "Click and hover" image zoom option is activated.

Why are these changes introduced?

Fixes #2301

Just like the original image, the magnified overlay currently uses a transparent background. This causes the thumbnail in the background to become visible, which looks buggy. To fix the issue, I applied a solid background to all images, matching the background colour chosen in Theme settings.

The PR also adds a loading spinner to each thumbnail. When a larger image is loading, the thumbnail opacity changes to 50% and the loading spinner is displayed. Once the image is loaded, this disappears and the thumbnail opacity goes back to 100%.

What approach did you take?

• re-add "Click and Hover" option to main product/featured product "Image zoom" settings
• re-add info regarding Click and Hover behaviour on mobile
• change the overlay's backgroundColor to var(--gradient-background)
• reuse existing loading spinner from "Add to Cart" button and add it to product thumbnail
• change thumbnail opacity to 50% and display loading spinner while image is loading
• change thumbnail opacity back to 100% and remove loading spinner once image is loaded

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	Get loading spinner based on the image's parent elements	Add a data-media-id to the spinner and use that to query	There are several situations where we might have duplicate IDs and these conflicts can break the functionality of the spinner. See @LucasLacerdaUX's comment	Grabbing the spinner inside the image's .parentElement.parentElement is not very elegant. It's not immediately obvious why we're doing it this way

Visual impact on existing themes

Merchants who upgrade to a new theme version with this change will get a new "Click and hover" option under their "Image zoom" settings.

Testing steps/scenarios

• Navigate to the theme editor
• In your Theme settings, go to Colours and change "Background 1" to a new colour
• Pick a product with lots high-res images (like Art Deco - Cyclamen, Bo Ivy - Brown, or Pleated Heel Boot) and navigate to its product page
• Under "Image zoom", select "Click and hover" and hit Save
• Click all images to zoom in. Verify that the thumbnail transparency changes to 50% and the loading spinner is showing while the image is loading. Use the "Slow 3G" throttling option in your DevTools Network tab if you need to simulate a slow connection
• Navigate to the Transparent background PNG product page and click the thumbnail to zoom in. Verify that the thumbnail is not showing behind the zoomed-in image, and that the background matches the colour chosen in Theme settings.

Demo links

Transparent image

transparent.mp4

Regular image with spinner

regular.image.mp4

• 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

[stufreen]

LGTM with a couple small comments addressed

[danielvan]

Aligned with Monica this morning on:

• Using accent 1 as the colour for the spinner.
• Using 4 for stroke-width on the spinner, 6 felt too bold, lower than that it could be missed depending on settings.
• 75% opacity for spinner. It feels intentionally faint since the the opacity compounds with the image.
• Recommend testing on the prototype, rather than video – it is good to see how the image reacts when you click.

To keep an eye on
Tested against multiple scenarios and it only breaks if background and accent are too close – did not consider this a case to worry about. If we see this happening often, we can swap spinner colour for text.

This feature is unavailable on mobile, so only desktop checked.

[danielvan]

Commented above.

[LucasLacerdaUX]

Looking great! Tested and it's working well for both transparent and non-transparent images, and also with different background colors.

I left just one main comment about a few extra scenarios we need to cover. A simple change to our loading spinner id structure should fix them all, I believe.

[LucasLacerdaUX]

Works exactly as expected now in all the different product page configurations I've tested. Thanks for making the changes! :D