2 c. Using the Template Editor [NB]

This articles describes the Lightspeed Template Editor (TPE) and includes these topics:

Differences between Lightspeed eCom V1 and V2

Most functions should be available on our regularly updated V2 version. There might be the need to go back to V1 for specific use cases.

Your login will give you access to both Back Office versions.

v1v2.png

Please refer to the Cluster information page for login information.

Important areas

Enabling the TPE

Clicking on the Theme editor button will show you a warning message before enabling the theme editor. When it is enabled, all links between the original theme and your theme shop will be broken, meaning your shop’s design is independent.

tpewarning.png

It is important to note that on preset demo shops the TPE should not be enabled as preset demo shops should function as a client had installed and setup your theme normally.

The template files

The template files, also called pages or .rain files, are located on the left left of the main window through Design > Theme Editor

filelist.png

The template files located under Layouts and Pages  are mandatory for themes to work, so you cannot delete them. Snippets are extra files you can create and include from other pages as you see fit using the following line of code:

{% include 'snippets/FILENAME.rain' %}

Changes to all template files are automatically pushed to users of your theme so please be careful while editing these files.

Learn more about all these files and their purpose in our Draft documentation.

Assets

The assets are a collection of all other extra files needed for your theme to work.

These files can be images script or css files and we also accept some more modern standards such as SCSS (Sass). For confirmation on the types of files allowed on the platform, please click on "Create a new asset" and look at the different extension options presented.

Note: All files must contain the .rain file accept .Rain code, which is needed to work with Theme Settings. For example, settings.css should be called settings.css.rain . There is currently low size limit for CSS files across the platform, please take this into consideration when building your theme.

Changes to all Asset files may require some time to get "pushed" to all users of your theme.

Draft

Draft is a framework, a combination of all the technologies used across all themes on the Lightspeed eCom platform. Familiarize yourself with the syntax, variables and filters used within this simple, intuitive language. For more information, see 3. Understanding the Lightspeed Draft framework.

What's next?

Have more questions? Submit a request