How to reference meta objects in liquid templates

Retired Boards Appdev Metafields

Topic summary

A user is attempting to reference a metaobject containing HTML code in Liquid templates, primarily to enable translation through Shopify’s Translate & Adapt feature.

Core Issue:

  • The user created a metaobject with a single-line text field containing HTML/CSS code for a promotional banner
  • Attempts to reference it using {{ shop.metaobjects['type']['handle'] }} result in “MetaobjectDrop” appearing on the frontend instead of the actual content

Solution Provided:

  • “Drop” suffix indicates incomplete object traversal; need to access specific field values
  • Correct syntax: {{ shop.metaobjects['type']['handle'].id.value }} (replace ‘id’ with actual field name)
  • Recommended approach: Store metaobjects in product/collection metafields for easier referencing: {{ collection.metafields.namespace.key.value.field_name.value }}
  • This method avoids needing to know metaobject handles and bypasses store-wide metaobject reference limits

Additional Guidance:

  • HTML in metafields/metaobjects is possible according to community discussions
  • Alternative suggestion: Keep HTML structure in Liquid file, store only translatable text in metaobject using rich text field
  • CSS/JS files will affect metaobject content normally since Liquid compiles to HTML first
Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hello, I inserted a piece of code in the meta object.

< div style="background : #FDEEDB ; padding : 15px ; max-width : 300px ; text-align : center ; color : red ; " > < b > 10% Off CODE: < b > HS10    _ _ _ _ _

I have translated the code into Spanish in Translate & Adapt, which is my main purpose.

But I now want to reference this meta object in the Liquid module so that the code runs successfully. That’s what counts as success.

{{ shop.metaobjects.type.handle }}
{{ shop.metaobjects['type']['handle'] }}

I saw this in the official docs, but I can’t get it to work. Especially what the type refers to.

2

Hi Cedric7,

Type refers to the definition of the metaobject. So if you go to the metaobject entry in question, in the top right hand corner you should see the definition of the metaobject and a link to ‘view definition’.
If you click on this, you should be taken to the settings for the metaobject definition.
Here it will have the type. You need to use this in the type section.

Screenshot 2023-06-28 at 10.53.23.png
Screenshot 2023-06-28 at 10.53.23.png1092×320 14.6 KB

So here it would be {{ shop.metaobjects[‘see_more_collection_button’][‘handle’] }}
Handle is specific to the metaobject entry - you should find it in the entry under the ‘Handle’ section

Hope that helps!

Rhianna

1 Like
3

Hello,I know what Type means, but I haven’t succeeded in referencing the code. it shows weird stuff.

My front end says “MetaobjectDrop” and I don’t know what that means. Why did I fail to quote the code.
I can’t upload pictures, I don’t know why. I will dictate to you how I create the meta object, hope you can understand.
I created a field.Field is a Single line text inside the meta object. I set Single line text to Limit to preset choices. Then put the code in it. I want to know how can I successfully reference the code.

4

You can show me directly, where the meta object stores the code. And the process of successfully referencing in liquid

5

Usually when you have ‘drop’ on the end (eg CollectionDrop or MetaobjectDrop), it just means you haven’t dug down into the object itself. So if you want the id of the metaobject it would be {{ shop.metaobjects[‘type’][‘handle’]].id.value }}, and you can replace id with whatever the field is called.

6

Personally, I store the metaobjects in the metafields of the product/collection etc, so I can reference them a different way - which is
{{**collection.metafields.button.see_more.value.button_link.**value }}
Which I can break down for you below:
collection.metafields → get to the metafields of the collection I’m on
button.see_more.value → get to the metaobject that is stored within the button.see_more metafield (namespace and key)
button_link.value → get the value of the button_link field within the metaobject

This way you also avoid having to know the handle of the metaobject you are referencing etc. There is also a limit to the number of storewide metaobject references you can use on one page, which i can’t remember off the top of my head, but this avoids that too :slightly_smiling_face:

1 Like
7

Hi,RhiRo

{{ shop.metaobjects[‘type’][‘handle’].id.value }}

What does value represent in this code? Also can I put the code into a single line of text to quote?

8

Hi Cedric7,
Value doesn’t mean anything, you don’t need to alter that one, it should just stay as ‘value’.
I haven’t personally used html in a metafield/metaobject before, but according to to this discussion it’s possible :+1:

9

Also, I understand you need the wording to be translatable, but is there a reason you need the whole html in the metaobject?
Could you not just put this in the liquid file:

{{ metaobject reference }}

and then a rich text field in the metaobject where you have

10% Off CODE: HS10

If the colours need to change those could be stored in the metafield too.
Depends how dynamic you need it to be really, but that’s how I would do it personally :slightly_smiling_face:

10

Hello, I have a question. If I put the code in the meta object. Can the code I put in stylesheet.css and theme.js take effect on the content of the meta object?

11

Yes it should do - the liquid happens first, (compiled to html), so the code should be placed in as normal, then the css and js have access to it on load :slightly_smiling_face: