There are plenty of options available to you for customizing your Helix-based template. If you can make your customizations via Template Options, custom files or by custom code modules/plugins, this is safer than editing the template code. In addition, you can apply google tracking codes, CSS code, JS codes, and HTML tags/codes. So, make sure you have some knowledge base on these codes before applying something

In Helix Ultimate 2.0 you can use custom code in an easy way.

Custom Code in Template Options

To use this feature go to Template Options - Custom Code tab. There you will find:

Before < / head >

Any code you place here will appear in the < head > section of every page of your site. This feature is useful when you need to add verification code, extra Meta Tags, HTML Links Tags, and other metadata. This feature is also very useful if you need to input a tracking code from Google Analytics. The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.

Example use:

<link href="/templates/shaper_helixultimate/css/shop.css" rel="stylesheet" type="text/css" />
<link href="/images/favicons/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<meta name="google-site-verification" content="___" />

Always check if added code works correctly after saving, in some cases, it may not. It can be caused by:

• Firewall which can damage script <j-avascript> - in that case, please check settings of RSfirewall or Akeeba Tools Pro.
• Your server security settings (Mod_Security or similar) do not allow using this kind of code.
• The code line contains the wrong path to the file.
• You forgot to add a close tag or missing letter.
• Service from embed code is suspended or has temporary server problems.
• Used code contains too many redirections which may also damage template code or cause long load delays. 

Damaged custom code:

In some cases, added custom code may not work and seems to be damaged (i-frame or s-cript) - it's caused by the RSfirewall component. Solution: In Components > RSFirewall > Blocklist/Safelist > Add your IP as SafeList > Save changes. It will change security settings for your user profile only. Then paste the original code again and save the template settings. Disrupted HTML tags won't rectify themselves, you'll have to manually correct these afterward.

Warning! Do not use custom php code inside template options!

After < body >

Almost any code you place here will appear just after the opening body tag of all pages of your site. This feature is useful if you need to input a tracking code (stats) from Google Analytics, Piwik, Woopra or Clicky.

Before < / body >

Any code you place here will appear at the bottom of the body section of all pages of your site. This feature is useful if you need to input a tracking code for a state counter such as Clicky. Some developers recommend to use their code should go directly before the closing body tag </body> of your page(s).

Custom CSS (Area)

Using Custom CSS gives you the power to create your unique design and allows you to customize the appearance of selected elements (colors, size etc.).  You can use custom CSS to add your styles (code tweaks) or overwrite default CSS from a template or extension. This option is useful for small design changes.

Warning! Please do not edit the template.css or any other CSS file from the Helix Ultimate template framework. The reason is that all of your changes will be overwritten by a template engine reverting back to the original code). Instead, we suggest using a custom.css file where you can override the default CSS code created by the JoomShaper team.

Just paste your styles for Classes or ID's or HTML tags to override the default style based on the template. 

Notice! This is only for raw CSS code, do not use HTML nor PHP code here.

If somehow your custom.css file in HTML website structure is loaded before the template.css file - please rename custom.css into override.css and put a link to it inside Template Options - Custom Code - Before < / head> field:

<link href="/templates/NAME/css/override.css" rel="stylesheet" />

Instead of "NAME" remember to put a correct template folder name (small letters).  You can edit override.css in the same way, as you did with custom.css.

Custom JavaScript

Use this field to embed custom JavaScript to the whole website. It loads your custom Javascript code after all other JavaScript files (except special hard-coded occasions), allowing you to be the last one who will affect your website. Add here only raw JavaScript code without starting tags.

Warning! Wrong JS code may slow down or even temporarily damage your website and block the edit toolbar. Always make a backup first.

Custom Code by Files

If planned more extensive design changes (more than a few lines of code) we suggest using the custom file(s) instead. By default mentioned below files doesn’t exist, you have to create a new file inside /css or /js  folder of the template. This is a safe method, and allows you to move from template-to-template, and makes it easy to debug if something ever goes wrong.

custom.css 

By default custom.css file doesn’t exist, you have to create a new file inside /css folder of the template. This is a safe method, allows you to move from template to template, and makes it easy to debug if something ever goes wrong. Remember that CSS cascades in reverse, meaning rules that appear later always take precedence over rules that appear earlier. Here is an example from the raw Helix Ultimate template. The same rule should be used all templates based on Helix Ultimate. That new custom.css you can create using the "New File" button or by File Manager (cPanel) or FTP tool. 

Warning! Please do not edit the template.css or any other CSS file from the Helix Ultimate template framework. The reason being that all of your changes will be overwritten by a template engine (reverting back to the original code). Instead, we suggest using a custom.css file where you can override the default CSS code created by our team.

custom.scss

By default custom.scss file doesn’t exist, you have to create a new file inside /scss folder of the template. In this external file, inside you can put your SCSS (Sassy CSS) code. Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss.

custom.js

By default this file doesn’t exist, you have to create a new file inside /js folder of the template.  You can use JavaScript inside your site—whether you're using a third-party library or a custom script. Remember that in some cases, custom JavaScript may cause conflicts with your Helix template, components running on your site, or even the Joomla core.