Why isn't my product image displaying on my new page?

Technical Q&A

Topic summary

A Shopify developer encountered an issue where product images (koi-landing.jpg and koi-landing-small.jpg) weren’t displaying as background images on a custom product page.

Technical Context:

  • The page uses custom Liquid templates (product-landing.liquid called from product-koi.liquid)
  • The code filters hero images from the product.images array using metafield image_categories.hero
  • Background images are set via data-interchange attributes with responsive sizing

Resolution:
The user quickly identified and resolved the problem independently—the issue was incorrect indexing in their metafield configuration. The metafield values weren’t properly pointing to the intended product images, preventing them from being retrieved and displayed as background elements.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I am new to Shopify code.

I added new product and added images to product. koi-landing.jpg and koi-landing-smal.jpg

Background image doesn’t get displayed. I am not sure where I need to modify my code to display the image.

Any help much appreciated.

https://espiritu.ca/products/koi

— This is my product-landing.liquid which I call it from product-koi.liquid page

{% include ‘product.landing’, title_style : section.settings.c__t-title_style %}

— This is product-landing.liquid page

{% comment %}

Landing snippet for Product Pages.

  • optional param : title_style (whether to set title inverse)

{% endcomment %}

{% comment %}
Filter out the Indices of Hero Landing Images from the product.images array
based on metafield images_categories.hero
{% endcomment %}
{%- assign product_hero_images = product.metafields.image_categories.hero | split : ‘,’ -%}

{%- else -%}
data-interchange=“[{{ ‘product.featured_image’ | product_img_url : ‘640x700’, crop : ‘center’ }}, small],
[{{ ‘product.featured_image’ | product_img_url : ‘1536x966’, crop : ‘center’ }}, landscape],
[{{ ‘product.featured_image’ | product_img_url : ‘1536x966’, crop : ‘center’ }}, medium]”>

{%- endunless -%}

{{ product.title }}

2

Thank you, I found the solution. I had wrong indexing in my meta field.