Announcement bar Richtext issue

Store Design

Topic summary

Main issue: Changing the announcement bar setting from text to richtext in a Shopify theme caused the error “All top level nodes must be

”, and adding

in the default made the tag render literally on the storefront.

Root cause: The theme output used the Liquid escape filter, which HTML-escaped richtext content, and the markup wrapped the output in a

, conflicting with richtext-generated

tags.

Key fixes:

  • Update the schema setting to type: richtext. Keep the default as plain text (no

    tags) or valid richtext.

  • In sections/announcement-bar.liquid, remove the | escape filter from the outputs, e.g. {{ block.settings.text }} and {{ section.blocks.first.settings.text }}.
  • Replace any outer

    wrapper around the rendered content with a

    to avoid nested

    tags.

Notes: Code snippets and screenshots were provided to illustrate file locations and changes.

Outcome: The original poster confirmed the changes resolved the issue; discussion appears resolved.

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

I want to have a richtext section to enter my announcments. So i changed to code from this:

{
“type”: “text”,
“id”: “text”,
“default”: “Welcome to our store”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text.label”
},

TO THIS:

{
“type”: “richtext”,
“id”: “text”,
“default”: “Welcome to our store”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text.label”
},

im now get the error '‘All top level nodes must be ‘

’’ Now if i add the

like this:

{
“type”: “richtext”,
“id”: “text”,
“default”: “

Welcome to our store”

,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text.label”
},

It now litterly shows in the announcment bar on the website. How to fix this?

Schermafbeelding 2024-06-12 094805.png
Schermafbeelding 2024-06-12 094805.png361×151 4.72 KB

2

Hello @15478

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find your section announcement-bar.liquid
  4. remove escape in code
  5. File code

	{{ section.blocks.first.settings.text | escape }}
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}

  {{ block.settings.text | escape }}
  {%- if block.settings.link != blank -%}
    {% render 'icon-arrow' %}
  {%- endif -%}
  1. Add new update file code
{
  "type": "richtext",
  "id": "text",
  "default": "

Welcome to our store

",
  "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
}


	{{ section.blocks.first.settings.text }}
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}

	{{ block.settings.text }}
	{%- if block.settings.link != blank -%}
	{% render 'icon-arrow' %}
	{%- endif -%}

See theme customization

rich.png
rich.png1918×464 62.4 KB

After the changes file code

ff.png
ff.png1907×732 103 KB

dd.png
dd.png1908×757 123 KB

an.png
an.png1917×767 98.9 KB

Output

qqq.png
qqq.png1147×194 9.16 KB

If I managed to help you then, don’t forget to Like it and Mark it as a Solution!

Best Regards,
Dws_pvt_ltd

1 Like
3

This is correct but only one change you add

tag to default this step is wrong

P tag is added but there is no add to this customize side

{
"type": "richtext",
"id": "text",
"default": "

Welcome to our store"

,
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

this SIde You Change And Add Below Code

{
"type": "richtext",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},

Like This screen Shot

Rajwebdesigner_0-1718180768845.png
Rajwebdesigner_0-1718180768845.png277×464 21.3 KB

4

Hi @15478 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Sections/announcement-bar.liquid
  2. Find code below after that remove " | escape "
{{ block.settings.text | escape }}
  1. Update

    to

EBOOST_0-1718182543264.png
EBOOST_0-1718182543264.png857×612 37.6 KB

Code has been updated

EBOOST_1-1718182606797.png
EBOOST_1-1718182606797.png912×671 30.7 KB

5

Thank you so much for the clear explanation.

1 Like