How to show related featured image background scene?

Technical Q&A

Topic summary

A developer created a color-specific product listing page for SEO and wants to display the corresponding color variant’s scene image on hover. The scene image appears directly after the featured image in the product media array.

Key Questions:

  • How to identify the featured image’s position in the overall media array?
  • How to call the corresponding scene image on hover?
  • Is there an alternative method beyond using array position?

Solution Provided:

  • Access the second image using {{ products.media[1] }} (arrays are zero-indexed)
  • Use the .position property to identify media position in the array
  • Important limitation: A variant’s featured_image is the only image attached to that variant

Additional Context:

  • Some stores use ALT text naming conventions with liquid filters to associate different images with variant options (e.g., color)
  • This approach provides semantic information for SEO and accessibility
  • The product’s featured image is typically not the first in the media array when variant-specific images are needed
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
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?