The Template Code Editor gives you the ability to update the front end website template theme. Through the Code Editor you can make updates to your theme by adding in copies of core xml and phtml files and overriding them locally from your admin screen.
The following guide outlines how to use the Code Editor with further documentation provided below:
In the menu, go to CMS -> Code Editor.
On the Code Editor Screen you will see a list of theme templates on your current site. The template that is highlighted in Green is the live template that is currently active on your site.
- Selecting this option will open a new tab with the selected theme displayed. You can preview themes that have not been published to see your changes.
- Selecting Edit will open up the code editor and allow you to start editing files
- Selecting Duplicate will duplicate the theme. This is useful in order to start making changes to the site based off your current theme
- This will make your theme live. Once this is selected your changes will be made live on the front end website.
To use this, click on the drop down next to the theme and select Preview.
This will open a new tab, and everything you see on this tab, only you will see. On first page load, you may notice the themeId is contained at the end of the URL and a yellow box will appear at the top of the screen displaying the theme you are previewing and a link to cancel if needed.
To use this, click on the drop down next to the theme and select Edit.
This will open a new tab, called Code Editor.
Now, double click on folders to open them, or click on the little arrow on the left.
The structure should be familiar.
When you find the file you want, double click it. It will open it in a new tab. For example
Double click it.
Feel free to edit the file, press Command + S to save, or click the button. Then open up the preview tab we created previously, and you will notice any changes you have made.
If you make a mistake, or want to go backwards, at the bottom is every version you have created. Just click the link, and it will update the text.
If you want to override any other core files, click on the Base Theme at the bottom, and you can pull up core files that have not been overridden yet.
If you want to search for a string, in either base theme or your current theme, use the search bar at the top.
If you click the file link, it will open the editor, and highlight the searched text.
You can duplicate a theme by selecting the Duplicate from the drop down on the right. Once duplicated you can adjust the new theme as needed, change its name or simply delete if no longer needed.
Once you are happy with your theme, you are now able to select Publish from the dropdown menu to the right. This will make your theme changes go live.