Editing Theme Files

When you select "Edit Theme Files," the preview panel is replaced with the theme’s underlying code. On the left side of the tab, you’ll see the theme’s files organized in a tree structure of nested folders. Certain files and directories are hidden from view, as they should only be modified by the original theme developer. To access and edit these hidden files, you’ll need to use the Stencil CLI.

Theme Files

The folders and files that make up your theme are displayed here. Click on a blue folder to open it, or click on a blue .html or .scss file to edit its contents. Files that are greyed-out can only be modified using the Stencil CLI, although some greyed-out files can be viewed in this editor.

Theme Files

Code Panel

This is where you can edit the code of the selected file. The editor is equipped with features such as color-coded elements for easy identification and auto-suggestions for HTML as you type. It also supports Undo and Redo functions.

Code Panel Screenshot

Preview

The preview pane will display a live preview of your store based on your last saved changes. This allows you to see how your edits will appear in real-time.

Preview Screenshot

Saving Your Work

Save File: This option saves the currently open file and recompiles the theme to apply your changes.
Save All Files: This option saves all open files and recompiles the theme.

The file editor supports a mix of HTML, Handlebars statements, SCSS, and JavaScript tags within your theme’s template files, offering flexibility for comprehensive theme customization.

!