Sana Commerce 9.3
Your connector

Add Code Content Element


The Code content element is available as an add-on. It can be installed from Sana Apps. In Sana Admin click: Apps > Add-ons.

It might happen that you don't have permissions to install Sana Apps, for example if you have a customized project or it was disabled by a web store administrator intentionally. In this case, you need to contact your Sana partner or project manager.

The Code content element can be added to the web pages (flexi-pages, product and product list pages) and system pages of the Sana web store.

Unlike HTML injections which can be used to add HTML, CSS and JavaScript that will be rendered on all pages of a Sana web store, custom styles, scripts and HTML added using the Code content element will be applied to a certain page only.

Using various external services, you can create different widgets and embed them on a page. For example, you can create notifications, popups, sliders, live chat, testimonial, news or event announcements and attract your customers attention to different special offers and discounts.

The table below provides description of the Code content element fields.

Field Description 
Display in full width Use this option either to center the content of the "Code" content element on a page or to expand it to the full width of a page.
Head content  HTML, CSS or JavaScript in this field will be added to the end of the <head> tag of a page. We recommend to use this field for custom styles (CSS).
Code content  You can use this field to add content which you want to show on a page (HTML). If you have several content elements on a page, this content will be added inside the <body> tag with other content elements. 
Body end content  HTML, CSS or JavaScript in this field will be added to the end of the <body> tag of a page. We recommend to use this field for custom scripts (JavaScript). 

You can add CSS and JavaScript directly to the Code content element or you can upload CSS and JavaScript files to the Web server and add references to these files in the Code content element.

<link href="/content/files/custom.css" rel="stylesheet" type="text/css">
<script src="/content/files/custom.js"></script>

Below you can see the example of the Special Offer widget. Using the external service, we created the widget which adds a button and a popup message to the page. Then, we copied the generated embedded code to the Code content element on the page.

On the screenshot below you can see the Special Offer button on the page of the Sana web store.

Clicking on the button, opens the popup with the message which can help you attract your customers' attention and boost your sales.