Styling and Design

Creating and Using Formatters on Magento 2

Write custom functions for use in your Designs

Clerk.js allows you to write custom javascript functions, that adds new functionality to the Designs.

Formatters can be added in two ways:

  • Through > Settings > Formatters, where each Formatter can be created as separate entries. 
  • As a configuration for Clerk.js, in the tracking-script that is inserted on all pages, where multiple formatters can be added at once.

For Magento 2, this file contains the tracking-script:


An example can be seen below. Please be aware this is for Clerk V2 (latest version):

<!-- Start of E-commerce Personalisation tool - -->
  <script type="text/javascript">
      var e=d.createElement('script');e.type='text/javascript';e.async=true;
      var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);

    Clerk('config', {
      key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
      formatters: {
             log_price: function(price) {

    <!-- End of E-commerce Personalisation tool - -->

You can write any number of Formatters, separated by comma:

formatters: {
   log_price: function(price) {
   calculate_discount: function(price,special_price) {
      return price-special_price;
   substring: function(text) {
      var short_string = text.substring(0,20);
      return short_string;

After creating your Formatters, you can use them in your Designs using this syntax:

 {{{ price | log_price }} {{ price | calculate_discount |  special_price }}) 

This allows you to create any functionality in your Designs that you require.