How to show related featured image background scene?

Technical Q&A
1

Context:

  • We created a specialized listing page based on product colour for SEO purposes

Challenge:

  • We want to show the applicable colour variant’s scene image as the secondary image on hover
  • Within the product media, the scene image is directly after the featured image

Boyi_0-1690252776378.png
Boyi_0-1690252776378.png1016×489 83.5 KB

Boyi_2-1690252848907.png
Boyi_2-1690252848907.png539×137 60.9 KB

Ask:

  • How to identify what is the number of the featured image in the overall media array? We can use the number + 1 to call the scene image
  • Any other way to call the corresponding colour scene image to display on hover?
  • Context for consideration: https://cozylant.com/collections/brown-sofas

Thanks!

2

{{ products.media[1] }}

https://shopify.dev/docs/api/liquid/objects/product#product-media

https://shopify.dev/docs/api/liquid/basics#array

.position property https://shopify.dev/docs/api/liquid/objects/media#media-position

Important point a variants featured_image is the only image attached to the variant atow.

https://shopify.dev/docs/api/liquid/objects/variant#variant-featured_image

So is this only needing the 2nd image/media out of the product media array or the only image on a variant.

If needing the product featured_image is there a reason the featured_image is not normally the first.

It’s not uncommon for stores to use the ALT text with a naming convention to parse|liquid-filter for associating different images with different things like a color variant-options. :bomb: While still trying to be valuable semantic information for accessibility concerns and SEO, i.e. “Color: Brown, picture of a leather couch with legs raising it off the floor”.

Also see https://shopify.dev/docs/api/liquid/objects/image#image-attached_to_variant?