HTML Text fields

ACF uses the Froala WYSIWYG editor for editing HTML.

Content from the editor is stored in a metafield as usual, but 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="[email protected]/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 put 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 }} 
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us