Richtext not working

Raymond_Matthew
Shopify Expert
19 1 6

Recently all richtext at many stores I developed doesn't work,
https://help.shopify.com/en/themes/development/theme-editor/settings-schema#richtext

in this document it mentions that HTML tags are supported but now even <p> doesnt work, it renders it as a string "<p>". 

Does anyone experience this, as I dont experience it only at 1 store, I checked this with the themes I created and some premium themes

Replies 11 (11)

May
Shopify Staff
333 33 176

Hey, @Raymond_Matthew!

 

This is May from Shopify.

 

Just to clarify, are you trying to add HTML elements to your Rich Text Editor (RTE), or are you trying to configure your RichText in the theme settings? I have tested some HTML tags on my test store's RTE by clicking the '<>' button on my Products page, and I don't seem to have any issues with it. 

 

Which part of the store specifically were you trying to edit? Could you also send over a link to your store so we can have a closer look?

 

Looking forward for your reply!

 

Kind Regards. 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Raymond_Matthew
Shopify Expert
19 1 6

Hi, no not that richtext, its for Theme Editor
here
https://help.shopify.com/en/themes/development/theme-editor/settings-schema#richtext

RTE.JPG
I have created a lot of themes even from scratch, for different clients and this is the first time I experience this, and went I checked other client's too this happens, instead of displaying it as an HTML its displaying as a string

May
Shopify Staff
333 33 176

Hi again, @Raymond_Matthew!

 

Thank you for getting back, and I apologize for the misunderstanding.

 

The document that you linked above is indeed RTE. It outputs a Rich Text box on the theme setting, which lets you format text and links without having to enter any HTML tags, and does all the HTML formatting for you. If you are looking to add your own custom HTML you'll want to use basic input setting types, for example: "type": "textor "type": "textarea".

 

For example, this code with "type: "richtext":

 

{
      "type": "richtext",
      "id": "subheading",
      "label": {
        "de": "Untertitel",
        "en": "Subheading",
        "es": "Subtítulo",
        "fr": "Sous-titre",
        "it": "Sottotitolo",
        "ja": "小見出し",
        "pt-BR": "Subtítulo"
}

generates this setting:

 

 

This code, with "type": "textarea":

 

{
      "type": "textarea",
      "id": "subheading",
      "label": {
        "de": "Untertitel",
        "en": "Subheading",
        "es": "Subtítulo",
        "fr": "Sous-titre",
        "it": "Sottotitolo",
        "ja": "小見出し",
        "pt-BR": "Subtítulo"
      },

generates this setting:

 

 

I hope this clarifies the confusion. If you have any followup questions, please let me know!

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Raymond_Matthew
Shopify Expert
19 1 6
No, it shouldnt display as "<b>", read document's it says it accepts certain html and with that said it should generate HTML not a string, "<b>" is a string text, if it accepts html it should display a bold element instead of showing "<b>" lol, you just displayed a string lol and proved its not working lol,
Raymond_Matthew
Shopify Expert
19 1 6

Capture.JPG
LOL, it also came from you 
"It outputs a Rich Text box on the theme setting, which lets you format text and links without having to enter any HTML tags, and does all the HTML formatting for you." when it said DOES ALL THE HTML formatting for you, then it should understand HTML for you, and not display the  HTML for you lol, you literally just entered "<b>"  and displayed "<b>" , text and textarea also supports html  thats why the text was BOLD, if your screenshot is whats suppose to happen then try to enter  <blasdasdasdsdsadas> </dassddadadasdas>  haha,  lol it will literally display anything even with "<" as text or string, so what's the point of documenting it, try clicking the HTML tab here, if you put <b>TEXT</b>  at  the html  tab here, it translates your <b>  to html and bolds your text, that's what it means to "GENERATE YOUR  HTML" and not to display your "<b" as a string. HAHA

May
Shopify Staff
333 33 176

Hey, @Raymond_Matthew!

 

I totally understand where you are coming from, and I would love to help clarify them!

 

On my previous post, when I mentioned

It outputs a Rich Text box on the theme setting, which lets you format text and links without having to enter any HTML tags, and does all the HTML formatting for you.


I meant the Rich Text box will automatically formats the text when you click on these buttons: 

 

I will provide some examples below, but before that, I'd also like to make some clarifications on our document when it says:

These tags are supported inside the schema/JSON file, but not inside the Rich Text. For example, when you click on the 'B' icon, it adds a <strong> tag inside the JSON file, and vice versa. In the example below, I will be editing the Newsletter subheading to demonstrate the changes.

1. This is how the text originally looks like. Plain, with no text formatting.

This is what the JSON look like:

2. Clicking on 'B' and 'I' to bold and italicize the word 'Testing'.

What it this change looks like inside the JSON file

3. Now, on this example, I am editing the JSON first, using supported HTML tags to see how the change reflects on the website:

What it looks like on the website:

 

To summarize, "type": "richtext" does not support HTML tags inside the RTE box on the theme setting, but it does support the listed HTML tags inside the schema/JSON file. If you want to be able to use HTML tags in your theme setting, you will want to use "type": "textarea" instead, as mentioned in my previous post.

 

I hope this helps clarifies the confusion.

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Raymond_Matthew
Shopify Expert
19 1 6

If what you are saying is true, the document MENTIONED <em> is supported, then how do you use that? 🙂

If it can only be used via settings_data.json  then its useless.  Why would you give a client a setting that would need her to edit the JSON herself.  If I will make her edit the code JSON, then why dont I just tell her to CODE THE LINE HERSELF?

and if thats the real case, then why  do RICHTEXT needs to support HTML and mention that in Documents, thats even harder than making my client use the HTML field.  Do you really understand this documents?

Theme settings are for CLIENTS to use, and SHOPIFY aims to serve NON TECHNICAL CLIENTS, then you suggest that I make them edit JSON? 

Do you even understand how the settings_data.json work?
even if you type TEST in richtext it would render <p>TEST</p> because that is the work of the settings,
try it yourself, just type TEST, then check the json file it would be <p>TEST</p> because its the THEME SETTINGS job to do  that,  its the THEME SETTING's file to render the right JSON, and not the developers and defenitely NOT THE CLIENT that's suppose to USE THEME SETTINGS, because if you need to edit the JSON then the THEME SETTINGS does not DO IT'S JOB, because ITS JOB IS TO MAKE THE CLIENTS LIFE EASIER, and help the DEVELOPERs make the CLIENTS LIFE EASIER, not to give them more headaches

Illia_Kuzma
Shopify Partner
36 2 14

I agree. The documentation is confusing a bit. If you could make it more clear it would be great. Thanks

Superfein
Shopify Partner
9 0 6

Considering Shopify clearly spent a lot of time and energy building and launching Shopify 2.0, it's rather infuriating that still there's no robust WYSIWYG editor in the Shopify Customizer. In this one area, basically all other major platforms, Wordpress, Squarespace etc get this right. At least build a type of Richtext input for the Customizer that accepts formatted text but hides the HTML. That way developers can receive text from the client and paste it into the input field, and the formatting would be output correctly on the live page. This is almost comically pathetic from Shopify, and I find all the answers from Shopify support to be unacceptable. Just say that we do not support this essential feature, stop beating around the bush. Also, why is there no developer/partner/user feature vote section on Shopify. This feature would be near the top of my list.

Illia_Kuzma
Shopify Partner
36 2 14

I've been working with Shopify platform for couple of years and have learnt one thing - they launch features that they consider valueble. Users requests are ignored in most cases. So it is what it is.

EbenHafkamp
Shopify Partner
15 1 4

Agree, this feature makes no sense and the docs aren't very helpful