Adding a svg image badge to my product tiles from a metafield/metaobject

Deutsch Diskussion Technische Fragen & Antworten
1

Hi everyone,

I want to add a small badge (svg image) to my product tiles and product page.

There are 30 different badge variants in total (it’s for a taste profile of 5 flavours and their combinations). So my idea was to create a metaobject (type single file, called ‘aroma_badge’) that contains these 30 image references so there will be a single place where I can edit them later. I then created a product metafield ‘custom.aroma_badge’ pointing to my metaobject so I can define which badge to show for a product. So far so good. Selection on the product page works easily.

However I can’t manage to call this image via liquid code. I tried to use {{ card_product.metafields.custom.aroma_badge }} and {{ product.metafields.custom.aroma_badge }} as URL for an image but it will only render an “image not found” placeholder. I also tried a lot of googling but I couldn’t find anything for this specific case. Only piece I found is this code snippet which I modified for my scenario.

{% if card_product.metafields.custom.aroma_badge %}
        
        {{card_product.metafields.custom.aroma_badge | img_url: 'size' | img_tag }}
        

{% endif %}

But this will just show nothing at all.

Other (text based) badges in my theme are included like this

{%- if show_sold_out_badge and sold_out -%}
      
        {{ 'products.product.sold_out' | t }}
      

    {%- elsif show_sale_badge and on_sale -%}
      
        {{ 'products.product.on_sale' | t }}
      

{%- endif -%}

Can someone please help me how to get a hold of those metaobject images?

2

Don’t think your image URL is being retrieved and rendered properly within the Liquid. The metafield custom.aroma_badge is likely pointing to a metaobject that contains the reference to an image file. When accessing this image through Liquid, you need to properly navigate to the file URL to display the image.

Firstly, make sure that your metafield is set up correctly with the custom.aroma_badge pointing to the metaobject that contains the image file e.g. metaobject should have a single_file type field that contains the badge image reference. Then, the correct Liquid syntax to access the image file URL in Shopify uses the file_url to reference the URL of a file stored within a metaobject:

{% if card_product.metafields.custom.aroma_badge != nil %}
  
    {% assign badge_image = card_product.metafields.custom.aroma_badge.value %}
    
  

{% endif %}
3

Thank you so much for your help, that makes a lot of sense. However, even with your code I can’t get it to work… I checked with dev tools and there is just nothing in the code where the badge should be which means it didn’t get past the if.

The metaobject is single file and contains the image reference like you said:

studiogusto_0-1728594991364.png
studiogusto_0-1728594991364.png696×110 11.4 KB

I also double checked the namespace and key but custom.aroma_badge is correct:

studiogusto_1-1728595428272.png
studiogusto_1-1728595428272.png720×755 43.6 KB

The field inside the metaobject is called ‘aroma_badge.aroma_badge’. I’m guessing this is not relevant here but tried it out anyway with the same result :disappointed_face:

Do you have any idea what could be wrong?

4

Oh and Storefront access is of course allowed for both the metafield and the metaobject

5

So I tried troubleshooting further. It seems something is wrong with metafield or the access but I cant figure out what it is.

I’m reading out the metafield like this:

{% assign aroma_badge_metaobject = product.metafields.custom.aroma_badge %}
    {{ 'Metaobject ID: ' | append: aroma_badge_metaobject }}

    {{ 'Metaobject Name: ' | append: aroma_badge_metaobject.name }}

    {{ 'Metaobject File: ' | append: aroma_badge_metaobject.file }}

    {{ 'Metaobject Content: ' | append: aroma_badge_metaobject.content | escape }}

It will return a metafield ID *'*gid://shopify/Metaobject/115875119431’ so something is there but the other fields are empty.

I know there is an SVG reference in the metafield so what could be the problem?

6

I found a different solution now that doesn’t require the use of the metaobject but instead creates the graphic from my aroma metafields.