Fix formatting issues in the Rich Text Editor
Sometimes, product descriptions, blog posts and pages can look broken on a store despite appearing correctly in the Shopify admin.
Here’s an example:
This text looks fine in the product description editor but on the product page, additional spacing, unwanted text color changes and other seemingly random issues are introduced:
Switching the Rich Text Editor to HTML view reveals the source of the issues:
HTML View shows the underlying markup of the contents of the Rich Text Editor. Under normal operation, any change you make in the editor is converted to HTML behind the scenes. For example, when you make a word bold, that word becomes
<b>word</b> in the HTML. The issue in this case is that other formatting tags have made their way into the content and are causing layout issues. These are highlighted in red in the screenshot above.
These tags can come along with content pasted from somewhere else, like a webpage or a word processing document. And while the Rich Text Editor does have a “Clear Formatting” button, this button will only reset the changes that the editor itself can make, not tags that come from external sources.
The solution is to strip these extra tags out. To do this:
- Switch back to the default Editor view in the Shopify Rich Text Editor
- Copy the text and paste it into a plain-text editor*
- Switch to the HTML view again, select everything and delete it – there should be nothing left
- Switch back to the default Editor view
- Copy the text from your plain-text editor and
- Paste it back into Shopify
- Recreate any missing bold, italic, or heading styles
* A plain-text editor is an editor that does not allow choosing fonts or making text bold or italic. Some examples are the built-in Notepad on Windows, TextEdit on Mac. Atom is an open-source one that will work on either platform.
The rich text editor’s contents following the clean-up steps:
Note for Mac Users – TextEdit
macOS comes with a built-in app called TextEdit which can do plain-text editing but by default opens in rich text mode. To put TextEdit in plain-text mode, Open TextEdit, create a new document and choose Format > Make Plain Text: