Issue with Metaobject Images Not Displaying in Custom Liquid

Technical Q&A
, ,

Topic summary

Main issue: Images from a metaobject field (SVG icon) do not render in a Custom Liquid block when fetched dynamically via a product metafield reference. Hardcoded CDN URLs display correctly, but the dynamic approach yields empty or broken images.

Context and setup:

  • Metaobject created for energy efficiency classes with an SVG image field (icon), referenced from products via a metafield.
  • Files exist on Shopify CDN and load when accessed directly.

What was tried:

  • Liquid accesses the product metafield reference, assigns it, and attempts to output the image via file_url (e.g., energy_class.fields.ikonica | file_url).
  • Debug confirms the metaobject reference is connected to the product.
  • However, fields.ikonica | file_url returns nothing/invalid, and some metaobject properties (e.g., handle/title) seem inaccessible in the Custom Liquid block.

Alternatives:

  • Using plain metafields for images works but causes duplication across products.
  • A Shopify dynamic block can display the images but lacks configuration flexibility.

Latest update:

  • A helper requested the store URL and code; the code snippet was shared, but the site URL was not (trial/unpublished).

Status: Unresolved. Screenshots provided via links; further debugging needed.

Summarized with AI on December 13. AI used: gpt-5.
1

Hello,

I’m encountering an issue with displaying images from metaobjects in a Custom Liquid block. Despite multiple attempts and configurations, the images either do not display or appear as broken. Here’s a summary of what I’ve tried so far:

  1. Setup Details:

    • I created a metaobject for energy efficiency classes with a field for uploading SVG images (icon).
    • The metaobject is correctly linked to products via a metafield reference.
    • The handle and file URLs are properly assigned, and the images exist on Shopify CDN (tested directly with their URLs).

  2. Custom Liquid Code:

    • I’ve written Liquid code to access the metaobject reference, retrieve the handle, and map it to the appropriate SVG file URL.
    • The code works when hardcoding the image URLs directly, but it fails when fetching them dynamically from the metaobject field.

  3. Diagnostics:

    • Using debug code, I confirmed that the metaobject reference is connected to the product.
    • However, metaobject.reference.fields.ikonica | file_url either returns nothing or an invalid URL.
    • The metaobject handle and other properties (like title) are either missing or not accessible in the Liquid block.

  4. Alternative Approaches Tried:

    • Using metafields instead of metaobjects (works but results in duplicating images across multiple products).
    • Displaying the images directly via a Shopify dynamic block (works, but lacks flexibility for more complex configurations).

  5. Issue Summary:

    • Images display perfectly when using metafields, but not when using metaobject references in Liquid.
    • The issue seems tied to Shopify’s handling of metaobject references in Custom Liquid.

Can someone help identify what might be causing this issue or suggest a workaround?

Screeshot: https://prnt.sc/ho-fw-fGHT1b

Thank you in advance! :blush:

1 Like
2

@matke98

Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

also please share your code

3
{% if product.metafields.custom.energetska_klasa %} {% assign energy_class = product.metafields.custom.energetska_klasa.reference %} Energetska klasa {% endif %} {% if product.metafields.custom.lista_sa_podacima %} Lista sa podacima {% endif %}

I cannot share u my URL, because im using trial theme and my website is not published yet.

Screenshot: https://prnt.sc/5FS6S2rS9K8W

I have checked everything, and all the metafields and the metaobject are properly connected and added to the product.