Editing Theme Files

When you click the Edit Theme Files, it replaces the preview panel with the theme’s underlying code. The tab’s left-hand side shows you the theme’s files, in a tree of nested folders. Files and directories that should only be edited by the original theme developer are hidden from this view. To edit those files, you will need to use Stencil CLI.

• Theme Files — these are the folders and files that make up your theme. Click on a blue folder to open it. Click on a blue .html or .scss file to edit it. Greyed-out files can be altered only using Stencil CLI, although some greyed-out files can be viewed here.

• Code Panel — this is where you edit the code of the selected file

• Preview — will display a preview of your store, based on your last save

• Save File — will save the file currently open and recompile the theme

• Save All Files — will save all open files and recompile the theme

The file editor color-codes elements within your source HTML, for easy identification and will auto-suggest HTML as you type. It also includes the ability to Undo and Redo edits. The file editor allows for a mix of HTML, Handlebars statements, SCSS, and JavaScript tags in your theme’s template files.

Can I add JavaScript files? You can add JavaScript < script > tags to the html, but you cannot add or edit JavaScript files with the File Editor. To add or edit JavaScript files, you must use the Stencil CLI.