Announcement bar Richtext issue

[15478]

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 '<p>'' Now if i add the <p> like this:

{
"type": "richtext",
"id": "text",
"default": "<p>Welcome to our store"</p>,
"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?

[dws_pvt_ltd · Accepted solution]

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

<p class="announcement-bar__message h5">
	<span>{{ section.blocks.first.settings.text | escape }}</span>
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}
</p>

<p class="announcement-bar__message h5">
  <span>{{ block.settings.text | escape }}</span>
  {%- if block.settings.link != blank -%}
    {% render 'icon-arrow' %}
  {%- endif -%}
</p>

6) Add new update file code

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

<p class="announcement-bar__message h5">
	<span>{{ section.blocks.first.settings.text }}</span>
	{%- if section.blocks.first.settings.link != blank -%}
	  {% render 'icon-arrow' %}
	{%- endif -%}
</p>

<p class="announcement-bar__message h5">
	<span>{{ block.settings.text }}</span>
	{%- if block.settings.link != blank -%}
	{% render 'icon-arrow' %}
	{%- endif -%}
</p>

See theme customization

After the changes file code

Output

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

Best Regards,
Dws_pvt_ltd

[15478]

Thank you so much for the clear explanation. 

[Raj-webdesigner]

This is correct but only one change you add <p> 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": "<p>Welcome to our store"</p>,
"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

[EBOOST]

Hi @15478 ,

May I suggest to update code these steps:

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

2. Sections/announcement-bar.liquid
3.  Find code below after that remove " | escape "

<span>{{ block.settings.text | escape }}</span>

4. Update <p> to <div>

Code has been updated