How can I use HTML in product page meta text fields?

Store Design

Topic summary

Issue: HTML entered into product page metafields (especially multi-line text) renders as literal text when connected via a dynamic source to sections like Collapsible tab in Online Store 2.0 themes (e.g., Dawn).

Findings and context:

  • Code generated by the theme/customizer often uses metafield_tag, which outputs escaped content in this context, showing HTML as plain text. Video, code, and screenshots were shared.
  • Behavior varies by theme and field type; some report single-line text renders HTML, others still see it escaped.

Workarounds confirmed by multiple users and Metafields Guru:

  • Use the raw value in Liquid instead of metafield_tag: {{ product.metafields.namespace.key.value }}. Place this directly in the template/section (e.g., block Description) rather than using the dynamic data binding.
  • Avoid wrapping raw HTML (like ) in a

    tag in JSON/section content to prevent invalid markup.

  • Single-line metafield can work for simple HTML, but is inconsistent.
  • JS post-processing can force rendering but isn’t ideal.

    • Tools and notes:

    • Metafields Guru helps authoring HTML but does not fix the rendering bug itself; their team confirms the OS 2.0 dynamic-source issue and provides a tutorial.

    Status: No definitive platform fix noted. Some report newer Dawn versions now render via dynamic content; others still must use the .value/manual approach. Discussion remains open.

Summarized with AI on December 23. AI used: gpt-5.
27

The above solution works well, so if it is not clear:

  1. get your metafield full namespace and key

Xnip2022-08-23_12-51-18.jpg
Xnip2022-08-23_12-51-18.jpg1798×174 21.3 KB

  1. then add “.value” at the end of it like so in my case:
product.metafields.my_fields.tab_content_2.value
  1. add the usual liquid brackets before and after:
{{ product.metafields.my_fields.tab_content_2.value }}
  1. copy the whole code line and paste it in your theme editor in lieu of the current metafield connector:

Xnip2022-08-23_12-57-04.jpg
Xnip2022-08-23_12-57-04.jpg584×956 47.1 KB

  1. save and check, it should work like it did on mine (Third party theme)

Xnip2022-08-23_12-58-34.jpg
Xnip2022-08-23_12-58-34.jpg868×338 34.5 KB

11 Likes