Difficulty with Metafields Guru Rendering HTML Tags

[ChandelightCom]

Shopify Community, Youtube, and Google Search don't seem to produce a relevant solution.

In addition, Metafields Guru documentation can't be found.

Metafields Guru was installed and two metafields of type 'Single line text' were created.

 

The main-product.liquid was edited and the metafield keys were added inside double curly brackets.

 

The page is previewed in Chrome and the HTML is rendered as a string!

 

In Chrome Dev tools it looks like double quotes have been added to both metafield values, however it's expected that the second value would be rendered as HTML.

 

The second metafield type was changed to the following types and the expected behavior was still not achieved:

Single line text

Multi-line text

Rich text

JSON string

[PaulNewton]

@ChandelightCom  try the metafields inside paragraph or span tags and not just free-text in a div tag.

Also view the actual source in the browser ctrl+u. What is seen in the elements in a browsers devtools-elements-panel is the parsed-DOM which is a generated structured from HTML&JS and is not the same as the underlying HTMLrendered and served from the server.

And validate pages or fragments: https://validator.w3.org/ 

[MetafieldsGuru]

The person who started this discussion has also submitted a ticket on our Help Portal indicating this as an app-related issue, which it isn't. Although the problem is unrelated to our product, I found the cause and now am jumping in to share the information with the community.

Let's address the questions in order of appearance. Our Help Portal hosts extremely detailed documentation, which can be found here.

Now, we can move on to the main question. The user created a text metafield and connected it to the product page template with Liquid - Shopify's pseudo-programming language for building and customizing storefronts.

The metafield value they tried to process relies on HTML entities rather than actual HTML tags/elements:

The problem is, that Liquid does not support HTML entities. It's an ancient bug that has been closed with no solution for some reason. @PaulNewton mentioned this in another discussion two years ago.

I created two versions of the same metafield value for a demo: one using the proper HTML tags and the other using the HTML entities. Below you can see the difference in the output generated by Liquid:

Since Liquid is incompatible with HTML entities, changing your approach and using the HTML tags may be a good idea.