Accentuate Custom Fields
  • Welcome!
  • Introduction
    • Getting started with ACF
    • Field scopes
    • How to show fields in your storefront
  • Dashboard
    • Reference Manager
      • Creating a new reference within Reference Manager
    • Filter & Group
      • Filter editor
      • Filter usage
    • Activity log
    • App settings
  • Field Definitions
    • Fields & Sections
    • Deciding on a field type
    • ACF Field types
      • Text
      • Markdown text
      • HTML
      • Checkbox
      • Selection
      • Tags
      • Number
      • Date
      • Color
      • Media v1 (legacy)
      • Media v2
      • Custom Object (JSON)
      • Multi-language Text
      • Reference fields
      • References to Global fields
    • Shopify Field types
      • Shopify » Single line text
      • Shopify » Multi-line text
      • Shopify » Boolean
      • Shopify » Color
      • Shopify » Custom objects (JSON)
      • Shopify » URL
      • Shopify » Date
      • Shopify » Date and Time
      • Shopify » Integer
      • Shopify » Decimal
      • Shopify » Weight
      • Shopify » Volume
      • Shopify » Dimensions
      • Shopify » Reference fields
    • Automatic tagging
    • Large sets
    • Field contexts
    • Field context filters
    • Copy and paste fields
    • Change field name and type
    • Import existing fields
    • Linking multiple stores
  • The Editor
    • Using the editor
    • Promote fields to sidebar
    • Layouts
    • Hide from search
    • Repeatable fields
    • Version control
    • Update value on order creation
  • Bulk Import & Export
    • Export custom field values
    • Import custom field values
    • Metaobject export / import
  • METAOBJECTS
    • What are Metaobjects?
    • Metaobject Definitions
    • Metaobject instances / values
    • Displaying Metaobjects on your storefront
    • Metaobject export / import
  • THEME EXTENSIONS
    • SEO keywords
    • Sticky promo bar
    • Products promotion
  • Liquid Guides
    • Learning Liquid
    • Resize & crop images
    • Check for empty values
    • Access field definitions
    • Order notifications
    • Allow customers to change their field values
  • OTHER
    • Webhooks
    • API
      • Access to custom fields
      • Endpoints
  • Help
    • FAQ
      • Why are one of my products no longer showing in my reference field?
      • I have multiple products/variants with the same name
      • How do I make changes to my field values in bulk?
      • I added a new field definition but it is not showing in my storefront
      • How do I copy my field setup to another store?
      • My fields are still showing after I have deleted their field definition
      • Why are none of my fields showing in the editor?
      • My newly created object in Shopify is not available in ACF
      • Reference lists are empty?
      • Why am I seeing a "value cannot exceed 100,000 characters" error when saving?
      • Why can't I name my field "first", "last" or "size"?
    • Need help?
  • Product
    • Changelog
    • Feedback & Suggestions
Powered by GitBook
On this page
  1. Field Definitions
  2. ACF Field types

HTML

PreviousMarkdown textNextCheckbox

Last updated 10 months ago

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>