Custom Javascript

Overview

Custom Javascript lets you apply a custom javascript to your theme instantly by simply pasting your custom javascript to the editor and click Save button.

To use this feature, navigate to Custom Javascript tab.

If Custom CSS is disabled before, click Enable custom javascript button to enable again:

The page after enabled look like this:

Automatic validate your custom javascript

When you paste your custom javascript to editor, the editor will automatically validate your code, it will show error or warning like this:

You can hover to those errors or warnings icons to see error detail:

Examples

Add Google analytics script to your store

In this example, we will show you how to add Google analytics to your store as easy as pie, just 1 click.

First, you need to go to Google developer page to get google analytics script: https://developers.google.com/analytics/devguides/collection/analyticsjs

let say you got script like bellow:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Remove <script> and </script> in the code above and replace UA-XXXXX-Y with your Tracking ID. For example, I have Tracking ID is UA-123512352-1, my final script will be:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-123512352-1', 'auto');
ga('send', 'pageview');

Now go to Code Customizer > Put that script to the editor in Custom javascript section > Click Save button to save your changes:

After that, your Google analytics code will be applied to your online store immediately.

Add Facebook pixel script to your store

The first thing you need to do is go to your Facebook pixels manager > Setup > Manually add pixel code to website > And copy your pixel code, let say your pixel code like this:

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '123235854450789');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=123235854450789&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Next, you remove these tags: <script> , </script>, and remove all blog code with <noscript> tag, the final result is:

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '123235854450789');
fbq('track', 'PageView');

Now go to Code Customizer > Put that script to the editor in Custom javascript section > Click Save button to save your changes:

After that, your Facebook pixel code will be applied to your online store immediately.

Add both Google analytics and Facebook pixel script to your store

In previous examples, you see we only add a single script to your store. What about if you want to add both Google analytics and Facebook pixel? It's just easy as pie with Code Customizer, you just add both scripts to the editor like this:

Don't forget to leave a comment to each block code to separate and easy to manage

Video Tutorial: https://youtu.be/qEk5DgXE4Iw