How toCustom Content Injection

Custom Content Injection

Sana Commerce 8.3
Your provider

Select all

How to Add Custom CSS and JavaScript

Sana Commerce provides the webshop theme editor that allows webshop administrators do some basic changes in the webshop design themselves. Without any knowledge of HTML/CSS a backoffice user can change the webshop logo, background images of the webshop and header container, site width, font, size and color of the texts and headers and even more, it is possible to change the color of the webshop graphical elements, borders and backgrounds. For more detailed information on what can be changed using the webshop theme editor, see 'Manage Themes'.

To give you more flexibility in changing the webshop design, Sana Commerce provides an opportunity to inject the custom JavaScript and CSS directly from the Sana Commerce backoffice. Three predefined Sana texts with the following group codes are rendered by default on all pages of the Sana Commerce webshop, except the error pages:

  • CustomContentInjection_Header
  • CustomContentInjection_Body
  • CustomContentInjection_Footer

Using these Sana texts you can inject the custom JavaScript and CSS through the HTML editor. To add JavaScript or CSS open one of the Sana texts mentioned above and click HTML. You can add JavaScript/CSS directly to the Sana text or you can also add the custom CSS file to the accessible folder on the web server via FTP or File explorer in the Sana Commerce backoffice and link to this file using the 'CustomContentInjection' Sana texts.

Example: <link href="/content/files/custom.css" rel="stylesheet" type="text/css">

You can use the default web browser developer tool or any similar tool to identify which ID or class should be targeted to change the style of any element. If you add any custom JavaScript or CSS to your webshop, make sure that it does not conflict with any standard functionality.

When you add CSS/JavaScript to the 'CustomContentInjection_Header' Sana text, it will be added at the end of the <head> tag.
When you add CSS/JavaScript to the 'CustomContentInjection_Body' Sana text, it will be added at the beginning of the <body> tag.
When you add CSS/JavaScript to the 'CustomContentInjection_Footer' Sana text, it will be added at the end of the <body> tag.

With knowledge of CSS and JavaScript and using the 'CustomContentInjection' Sana texts you can change the style of any element in your webshop or you can use it to add some message. For example, you need to add a pop-up to carry out some survey or to show some important message during a commercial campaign and there is no time to implement it by development, then you can do it using these Sana texts directly in the Sana Commerce backoffice.

Please, use the 'CustomContentInjection' Sana texts for some minor style changes.

How toCustom Content Injection

Sitemap

Installation

Product Versions

Links

Sana Commerce does not accept any liability for the content of this website, or for the consequences of any actions taken on the basis of the information provided. The information below should be interpreted as an example. No rights can be derived from this information.

Sana Commerce – the integrated e-Commerce solution for Microsoft Dynamics NAV & AX
© 1998 - 2014 Sana Commerce. All rights reserved
Updated: January 2014