HTML

Editing HTML in custom fields is done via an advanced editor - the Froala WYSIWYG editor. Via the individual HTML fields' setup or the settings dialog (available from the admin side menu), you can choose to have either the full toolbar or a simplified version. The Settings dialog also allows you to turn on "paste as plain text" so that pasting HTML from other sources (such as Word) won't carry over any formatting but will keep the structure.

Preserving the HTML look on your storefront

Depending on the options used for aligning blocks of text, embedding videos, styling images and tables etc., the HTML itself may contain references to CSS classes defined by Froala. To preserve the look of the edited HTML outside of the editor (ie on your storefront) you may have to include the following CSS file in your theme.liquid file:

<link href="https://app.accentuate.io/assets/css/froala@3.1.0/froala_style.css" rel="stylesheet" type="text/css" />

Note the version number 3.1.0 in the URL. This can change over time, so if anything looks out of place, check your used version number vs the above Also, make sure that you place the edited content inside an element that has the class fr-view:

<!-- Here comes the HTML edited with the Froala rich text editor --> 
<div class="fr-view">
   {{ product.metafields.accentuate.my_html_description }} 
</div>