Templates and Design

When creating a new website, youll start by choosing a Starter template on which youll build your design. Our templates are developed by our expert designers and come with sample content for inspiration. You can import as many different Starter templates as you want, without losing your data.

SECTIONS

Choose a Starter Template

To choose a starter template, go to Online Store > Design. From here click the button marked Add Theme, On the Gallery Screen that appears, select the theme that closely matches your vision for the website. You can click the thumbnail images from the left selection to open a preview of the theme with information on the right side. The button marked "read theme usage documentation" when clicked will open a page with a guide on how to use your new theme. Each starter template has it's own unique twist. Be sure to read up on each one that interests you so you can figure out how to make it your own.

Once you have decided on the theme, click Import then Activate your theme by selecting it then clicking the "Activate" button

Add a Logo

To change or update your website's logo, go to Online Store > Design.Modify the theme you need to work within, On the lower left part of the screen you will see an area marked "Invoice / Website Logo". Find and click the button marked "Choose" to open the File Selection Dialog. Select the logo file that you would like to use, ".PNG" files are recommended. Please note that the logo you choose here will be applied both to your Website and on your Store's Invoice PDF.

There are a few settings that will need to be adjusted depending on how you want to use the logo file you have uploaded.

The two options "Desktop Header" and "Mobile Header" set the appearance of your logo for the Desktop View(PCs, Laptops, etc.) of your website and how your site is displayed on Mobile devices. Each option will have a dropdown box next to it, the choices are as follows:

Default:

Will use a different logo image for website only. Your uploaded logo will only be visible on PDF invoice. Website logo in this mode is called "h-Logo.png" and can be uploaded via File Storage menu in your active theme folder (Settings / FTP).

Logo Artwork:

Will show your uploaded logo image on both website and PDF invoice.

Home Page Title:

Will show a text from your website settings, "Home Page Title" field.

Custom Text:

Will show a custom text that you've entered in a field below this dropdown.

Changing Basic Colors and Styles

Colors editor is supported by all Starter templates and Master Template 3+ - Legacy templates are not supported (Master Templates 1&2), however, you can still use them as tags in your custom CSS.

To change your theme's basic colors and styles open your active theme and go to the "Colors" tab. From here you can view the available options, from background colors to fonts. Once you have set your styles here and saved them, your website will instantly get the new look applied.

It is recommended that you set all of the provided general styles. This way you will cut down website development time drastically.

Adding/Replacing Theme Images

To add an image for theme use, go to Settings > FTP.

On the left side, navigate to the folder on your computer where the files you need are stored.

On the right side, make sure the tab is set to "Storage" and double click the "themeContent" folder. Click and drag the file(s) from the left side to the right side.

To replace an existing theme image, just rename the file you are uploading to match the file you are replacing.

All theme custom specific images should be stored in the "themeContent" folder of the Storage tab.

Custom CSS and Tags

Your theme's Custom CSS can be found by clicking the CSS tab. From here there are two CSS boxes, Desktop User CSS and Mobile User CSS. These boxes contain your Website's custom written style for both Desktop and Mobile Device view respectively.

SCE also has the CSS Tags feature that simplifies your website setup by integrating your designer written CSS with the easy to use "Colors" tab. Just update the options and save to see your website instantly transform.

To set up the CSS tags you will be using the Context Menu (right click inside the editor). It will popup a list of all the styles that you've adjusted in the "Colors" tab. Tags will get replaced with these values on your website (similar to LESS processor).

The CSS Tags feature work on all the devices.

Look & Feel

All of your Custom HTML modules, Blocks Editor can be accessed through the "Look & Feel" tab of your Active Website Theme.

Each section/page is presented in it's own tab (Header Footer, Home Page, Product, etc.). Custom HTML boxes for each section can be found here. After clickingon each one, you will be presented with the Easy To Use Visual Blocks Editor. This editor allows you to build a custom HTML, add images, carousel, and many different components through a simple Drag & Drop Interface. Besides custom HTML boxes, you can also access all of the front-end related settings.

Layouts

Changing the layout of your website has never been easier. First, go to the "Layouts" tab of your active theme then just select a page, then select your desired layout template. From here just choose the module that you would like to edit.

Changing a Page Template

Changing from "Left Side Menu" mode to "Right Side Menu or No-side Menu" mode is very easy. To change it, simply select a page and click on the layout templates settings.

After you save, the system will ask you to replicate the change on all of the pages or keep the change just to currently selected page.

Changing the Header Look

Start by selecting a page and a module that you would like to edit (Header in this example). A dialog window will open up with a settings available for each module.

After you save, the system will ask you to replicate the change on all of the pages or keep the change just to currently selected page.

Plugins

To Add a Plugin, open up the "Plugins" tab of your Active Theme then click "Add" button. Alternatively, if you want to edit an existing plugin, click the "Plugin Name" then "Modify"

On the Plugin Screen, you will see a number of options:

Name:

Give your plugin a descriptive name so you can figure out what it does just by the name

Version:

This can be set to Desktop, Mobile or for All devices. This effectively controls if your code applies only to Desktop Devices, Mobile Devices, or both.

Type:

You can choose how you want the system to read the plugin. It can be set to: "Anything", "JavaScript only", "HTML", "CSS".

Position:

Select the order that the plugin is rendered on your website. Choose what is appropriate for the code you are adding but we recommend using "below body" or "body end".

Location:

This setting dictates which pages will render your plugin. Be sure to set this correctly as to not cause unnecessary performance hits to your website. Only set your plugin to appear where it is needed. You can choose "Specific Page" (where you can put a checkmark on the pages you want to use) or "All Pages"

We suggest that you keep a number of plugins to the minimum. Too many plugins can alter your website's performance. Also, you should use plugins for JS related development only and use "CSS" tab for all of your CSS code. Combine your JS code in one plugin if possible.

Choose a Starter Template

1 2 3 4 5
1

Go to "Add Theme".

2

Gallery window will display.

3

Pick a Starter template that you like
and click "import".

4

Select your new theme and click "Active" to activate your new theme.

5

Enter text...

Add a Logo

1 2
1

Click on "Choose" in the Invoice/Website Logo box.

It is recommended that you use a ".PNG" logo.
Selected logo will be applied on your website and
on your PDF invoice.

2

Here you can switch between a different logotype modes, for both Desktop and Mobile devices:

- Default: will use a different logo image for website only. Your uploaded logo will only be visible on PDF invoice. Website logo in this mode is called "h-Logo.png" and can be uploaded via File Storage menu in your active theme folder (Settings / FTP).

- Logo Artwork: will show your uploaded logo image on both website and PDF invoice.

- Home Page Title: will show a text from your website settings, "Home Page Title" field.

- Custom Text: will show a custom text that you've entered in a field below this dropdown.

Changing Basic Colors and Styles

Colors editor is supported by all Starter templates and Master Template 3+
Legacy templates are not supported (Master Templates 1&2), however, you can still use them as tags in your custom CSS.

1 2 3
1

Open your theme and go to the "Colors" tab.

2

Here you can set your default colors, font families, sizes and weights.

3

Once you save, your website will get new styles instantly.

We recommend that you set all of the provided general styles. This way you will cut down CSS development time drastically.

Custom CSS and Tags

1 2 3
1

Editor for Custom Desktop CSS.

2

Editor for Custom Mobile CSS.

3

Context Menu (right click inside the editor) will
popup a list of all the styles that you've adjusted in the previous step (Colors). Tags will get replaced with these values on your website (similar to LESS processor).

Tags work on all the devices.

CSS Class-names and Rules

Almost all of the class-names are static and available for your to edit. For an advanced user, using a browser INSPECTOR is recommended. Where is the code inspector located in my browser? Find it here: http://debugbrowser.com

Page-Class names

Page-Class names are available for you to use as a PAGE selectors. By calling a bodyPage class name, you can define on which page you want your css changes to be applied to. All of our pages are supported. Please see a list of classes on the right.

We encourage you to stack up all the different class names.
Example - let's grab a footer on home page, desktop version only:

Bootstrap

Parts of our website layouts are built with Bootstrap. You can find out more about Bootstrap here.

Look&Feel

All of your Custom HTML modules, Blocks Editor can be accessed through this menu.

1 2 3
1

Each section/page is presented in it's own tab.

2

Custom HTML boxes for each section can be found here. After click on each one, you will be presented with the Blocks Editor. This editor allows you to easily build a custom HTML, add images, carousel, and many different components.

3

Besides custom HTML boxes, you can also access all of the front-end related settings.

Layouts

Changing the layout of your website has never been easier.

1 2 3
1

Select a page.

2

Select a desired layout template.

3

Select a module to edit.

Changing a Page Template

Changing from "Left Side Menu" mode to "Right Side Menu or No-side Menu" mode is very easy. To change it, simply select a page and click on the layout templates settings.

After you save, the system will ask you to replicate the change on all of the pages or keep the change just to currently selected page.

Changing the Header Look

Start by selecting a page and a module that you would like to edit (Header in this example). A dialog window will open up with a settings available for each module.

After you save, the system will ask you to replicate the change on all of the pages or keep the change just to currently selected page.

Plugins

1 2 3
1

Add a new plugin

2

Search within all available plugins

3

A list of all plugins

We suggest that you keep a number of plugins to the minimum. Too many plugins can alter your website performance.

Also, you should use plugins for JS related development only and use "CSS" tab for all of your CSS code.

Combine your JS code in one plugin if possible.

1 2 3 4 5 6
1

Plugin name

2

Plugin version can be Desktop, Mobile or for All devices.

3

Select plugin type (anything, JavaScript only, HTML, CSS).

4

Position where plugin is rendered. We recommend using "below body" or "body end".

5

Pages where plugin will render.

6

Plugin code.

Tips on JavaScript

SCE comes with jQuery and Head.js libraries already included. Please don't include it yourself, unless you understand why and what you're doing with it.

Custom Events

Our system comes with a number (regularly adding new ones) of custom events, which you can use to trigger your functions on a specific event and avoid any timing issues.

A list of these events is on the right side.

Usage example:
Imaging you'd like to trigger your own function at the exact moment when contant us form was submitted.

You can do this by wrapping your code into:
$(document).bind('ContactUs', function () { // your code });

Head.JS

We strongly encourage you that you code by the head.js standards. This goes especially for browser feature/types detection, as well as the screen sizes,..etc.

Please read more about head.js here: head.js