Shopify themes, liquid, logos, and UX
I have a custom product metafiled and i would like to render it inside my product card
this is the custom code i have added
<img
src="{{ card_product.metafields.custom['sales_banner']|image_url: 'master' }}"
width="{{ card_product.metafields.custom['sales_banner'].width }}"
height="{{ card_product.metafields.custom['sales_banner'].width }}"
>
and this is the result i got, it seems like i didn't get the image source right. can anyone help? thanks a lot!!!
Hello @tmg1101
Please try this code.
{% if card_product.metafields.custom.sales_banner %}
<img
src="{{ card_product.metafields.custom.sales_banner | image_url: 'master' }}"
alt="Sales Banner"
width="{{ card_product.metafields.custom.sales_banner.width }}"
height="{{ card_product.metafields.custom.sales_banner.height }}"
>
{% else %}
<!-- Optional: fallback image or no banner -->
<p>No sales banner available</p>
{% endif %}
Thank you for replying. I have tried the code but it's still not display the image 😭
Hello @tmg1101
If you can provide me with store access, I can check and let you know.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025