How to edit your 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

To see files, need to modify your web.config file
Plugin using third party component, which can not be loaded properly if line at web.config file will not be commented. Line #32 (by default)
<add name="Content-Security-Policy" value="default-src 'self'; connect-src *; font-src * data:; frame-src *; img-src * data:; media-src *; object-src *; script-src * 'unsafe-inline' 'unsafe-eval'; style-src * 'unsafe-inline';" />

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

Let`s do any change, and see how it is working.
My test environment will show product details as below.

Screenshot from public store after theme editor changes

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.

back to top