Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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>
Thank you, I found the solution. I had wrong indexing in my meta field.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025