How to render product metafiled image on product card

How to render product metafiled image on product card

tmg1101
Tourist
7 0 3

I have a custom product metafiled and i would like to render it inside my product card
Screenshot 2025-01-23 at 4.49.10 PM.png

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!!!
Screenshot 2025-01-23 at 4.51.08 PM.png

Replies 3 (3)

devcoders
Shopify Partner
1009 129 266

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 %}

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
tmg1101
Tourist
7 0 3

Thank you for replying. I have tried the code but it's still not display the image 😭
Screenshot 2025-01-24 at 8.48.06 AM.png

devcoders
Shopify Partner
1009 129 266

Hello @tmg1101 
If you can provide me with store access, I can check and let you know.

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!