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

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.

I have solved it. You can follow this tutorial: