Starter Templates

For Shopping Cart Elite certificated developers only

Starter Templates can only be developed by our expert certified designers.
The main difference between a regular template and a StarterTemplate is that it includes, not just CSS and images files, but it also comes with Backoffice settings and custom HTML. Switching between different Starter Templates will also activate a new themes settings and content related HTML.

Tip

File structure of how you pack your Starter Template is very important. Please see instructions below how to arrange it correctly.

SECTIONS

  • Colors/Styles
  • CSS and Color/Style Tags
  • Look & Feel
  • How to Save Content Files / Theme Files
  • Layouts
  • Plugins
  • JavaScript
  • Packing a New Template

Colors / Styles

All Starter Templates must be developed ontop of the latest Master Template (Master Template 3 at this moment). Master Templates are developed in advance and serve as a starting point for your new Starter Template development.

All CSS files included in the Master Templates are already tagged, meaning any styles changed in the "Colors" settings will be replaced in visible instantly.

Colors tab in Theme Settings:

Master Template comes with a predefined values, but you can change them easily.

Here you will set default colors, font families, backgrounds and other basic styles related properties.

Tip

You will be able to access these values when writing your CSS in a form of tags. This works like LESS processor, which will replace tags with values from the Colors tab.

Access Tags from the CSS window

Your can access the list of all tags within the CSS window, by right clicking inside the Desktop or Mobile CSS area (context menu).

Example how your CSS with tags will look:

1
2
3
4
5
6

Semi-colon ";" must still be placed after the tag name. Tag only carries CSS values.

Look & Feel

Look & Feel menu carries all the custom HTML boxes, Blocks Editor content and other front-end related settings.

Changing the Look & Feel

Anything changed inside the L&F menu will get included as a part of the Starter template. This is why it is extremely important that you keep your custom HTML code appropriate and Blocks Editor components used as they are supposed to be used - this will make it easier for the client to edit the content later on.

Avoid using Custom Code components in the Blocks Editor, unless really necessary. Use included components instead and change it's look in your CSS.

It is also very important that your Starter template works on mobile devices. Use developer tools in your browser to test it regularly.

Layouts

Each Starter template must work with all possible Layouts settings. This is really important and will make templates even more dynamic for further user adjustments.

Header Module

Each setting triggers a different layout code and can change how the template looks drastically. Make sure you address all the possible scenarios while you're developing your template.

Tip

It is recommended that you set the "Tablet" version to support the "Hamburger" main menu navigation by default.

Hamburger menu on Mobile is already a system-default, and can't be disabled.

Product Page Layout

Product page layout can be changed here, but it's recommended to stick with the "Advanced 2 or Advanced 1" types.

Plugins

Plugins are allowed to be used, but it is very important that you keep you code organized into as little different plugins as possible.

All your CSS code should not be a part of the plugin. Use CSS window instead.

Keep your JS code in one plugin, unless you need to set a different location for it's rendering.

Setting an appropriate version is also very important. Don't render the plugin on mobile if not necessary, or vice-versa. You can set this under the "Version" dropdown setting.

Always comment your code.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Template Package

1. Exporting your theme

Theme exporter will create a .dat file. File name must not have any special characters and spaces.
Example of a good file name: PierCoffee.dat

2. Creating a thumbnail

Thumbnail must be jpg 200x200px format and named:
thumbnail.jpg

3. Theme related images

All theme related images (images/files that you changed in the active theme folder) must be placed in a folder named "theme". All files in this folder will get copied automatically into the new active theme folder.

4. Content related images (used in Blocks)

All images and other files that you've used in custom HTML, articles and Blocks Editor must be placed in the folder named: "themeContent". All files from this folder will get copied to the new website and will be visible/editable in Blocks.

Grab a sample folder here: download

1. Starter template gallery material

Folder must be named the same as your .dat file.

Preview images must be .PNG format and 1500px wide. Image height can be anything. Images must be named numerically: 1.png, 2.png, 3.png,..etc.

Finally, put a number of preview images you have attached into the txt file named: CountImages.txt.
For example, put "5", if you've attached a total of 5 png preview images.

Download a sample folder