Theme Editor

Theme Editor plugin allow you to made any modifications without access to your store FTP. It was design to help store owners as well as store developers and administrators to made all necessary modification with only admin panel access. 

Basic configuration of plugin

You may define how your editor will look like. You have few editor styles available, grouped by bright and dark themes.

Theme Editor screen number 1

By default, Monokai style is checked, and it looks like sample below image:

Theme Editor screen number 2

Below example of bright theme:

Theme Editor Screen number 3

How to edit theme

To start edit your files, first you need to choose theme.

Theme editor manual screenshot

By clicking edit you got access to files. First some additional explanation 

Theme editor screenshot from manual

In my test environment I made some modifications, to show how plugin is working, and how I may work with this editor. So first, how it is presented from my Visual Studio

Theme Editor screenshot from visual studio

And how it is presented by our plugin: 

Screenshot from Theme Editor

It looks a bit different, why? Our plugin helping, if you need to add to your theme folder and file which is not included in your current template. In that case, you need to copy from default view file (red icons). Here it is presented, all you need is to save file. New file will be added to working theme. 

What is more, if you already added folder, our plugin showing rest of the files which by default are presented at the default view. Please have a look at mine Product view catalog. It has only one file, while on our plugin:

Screenshot from Theme Editor in manual

I may only choose file, and save to include it to /Themes folder. 

If you choose any file, you will be able to see content, also will be able to save, delete, and restore file from original.

Screenshot from Theme Editor manual

I do not want to show price, would like to change it. Please note, for this moment, I do not have included file, which showing prices. To show prices is used default view file from /View catalog. 

So first, I need to add that file to my /Themes/DefaultClean catalog. Find it on the list, click and save.

Screenshot from Theme Editor manual

There is information at the top, and you need to restart application to save copy into new place.

Screenshot from applying changes in Theme Editor

How now it looks like from backend?

Screenshot from Theme Editor after applying changes

I need to move it from folder, to my Visual Studio, to show it there. 

After restart application, I may see as follows.

Screenshot from Theme Editor manual

Also here, _ProductPrice.cshtml file has been added. Please note, icon file has been changed. 
Let`s do modification. I apply change by adding new class to new span 

Screenshot from changing html in Theme Editor

Let`s do one more change, and apply styles. This file is included to working theme, so do not need to add. Just made change, and save. 

Screenshot from saving changes in Theme Editor

And how it is showing by my store? 

Result of changes in Theme Editor plugin

Just like it should.

How to create a GrandNode theme

Upload of ready theme is not supported. But you may create new template, directly from your admin panel. To do that, just click Theme Editor

Theme Editor how to add new template

Next, click “Add new” button.

Add new theme in Theme Editor screenshot

Next, add all necessary fields, and add theme image. Save it.

Screenshot from Theme Editor

New theme has been added 

Screenshot from Theme Editor

And it is ready to use.

Screenshot from Theme Editor

Please note, this template do not have any files nor css. You will need to add it. 

back to top