Product Metafield image

Store Design

Topic summary

A user encountered an issue where a product metafield image wasn’t displaying on the frontend despite implementing Liquid code. The code attempted to render an image from product.metafields.custom.tag_image.

Troubleshooting suggestions included:

  • Verifying the metafield exists and contains a valid image URL
  • Confirming the namespace matches (‘custom’)
  • Clearing browser cache
  • Checking Liquid context and wrapping code in conditional statements
  • Testing in a development environment
  • Reviewing browser console for errors

Resolution:
The issue was resolved when the user realized they were working in a card-product context rather than a standard product template. By changing the code from {{ product.metafields.custom.tag_image }} to {{ card_product.metafields.custom.tag_image | img_url: 'master' }}, the image displayed correctly.

The key lesson: Liquid object references must match the template context where the code is placed.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
2

Here are some troubleshooting steps you can try:

  1. Check Metafield Existence: Ensure that the tag_image metafield exists for the product you’re trying to display. You can verify this by going to the product in your Shopify admin panel and checking the metafields section.

  2. Verify Metafield Content: Make sure that the tag_image metafield has a value assigned to it, and that value is a valid image URL. Also, ensure that the alt attribute is set for the image.

  3. Correct Metafield Namespace: Confirm that the namespace (custom in your case) matches the namespace you’re using when creating the metafield. If it’s different, you won’t be able to retrieve the metafield value.

  4. Clear Cache: Sometimes, changes in metafields might not reflect immediately due to caching. Clear your browser cache or try accessing the page in a private browsing window to see if the image appears.

  5. Check Liquid Rendering: Ensure that the Liquid code you provided is placed within a context where product is defined and accessible. For instance, if you’re using this code within a product template, it should work fine. But if it’s in a different template or section where product isn’t available, it won’t work.

  6. Error Logging: Check your browser console or any error logs in your Shopify admin panel for any JavaScript or Liquid errors that might be preventing the image from rendering.

  7. Theme Compatibility: Verify that your theme supports metafields and customizations like this. Some themes may have restrictions or require additional configuration to display custom metafields.

  8. Test in Development Environment: If possible, try replicating the issue in a development environment where you can make changes without affecting the live site. This allows you to troubleshoot more freely.

    above instruction is you read and apply on your code doing after this code add in your actual code

{% if product.metafields.custom.tag_image %}
    
{% endif %}
1 Like