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

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

elaghai
Visitor
2 0 0

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 : ',' -%}
<section class="landing landing-product">
<div class="l-bg"
alt="{{ product.handle }}"
{%- unless product_hero_images == empty -%}
{%- assign hero_large = product_hero_images | first | plus : 0 -%}
{%- assign hero_small = product_hero_images | last | plus : 0 -%}
data-interchange="[{{ product.images[hero_small] | product_img_url : '640x700', crop : 'center' }}, small],
[{{ product.images[hero_large] | product_img_url : '1536x966', crop : 'center' }}, landscape],
[{{ product.images[hero_large] | product_img_url : '1536x966', crop : 'center' }}, medium]">

{%- 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 -%}
</div>
<noscript>
<div class="l-bg"
style="background-image: url({{ 'product.featured_image' | product_img_url : '1536x966', crop : 'center' }})"
alt="{{ product.handle }}">
</div>
</noscript>
<button class="l-prompt {{ title_style | default : ''}}">
<h2>{{ product.title }}</h2>
<a class="l-prompt-link animated bounce-sm infinite"><i></i></a>
</button>
</section>

 

Reply 1 (1)

elaghai
Visitor
2 0 0

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