Editing Stencil Theme Files

The Stencil File Editor offers you the option of direct browser access to the code that makes up your theme, without having to install Stencil CLI (command-line interface). This is ideal for making minor adjustments to your theme that cannot be done directly within Theme Editor, or for adding scripts to integrate apps.

These instructions cover the basic steps to access Stencil-based themes template files and edit their HTML/CSS using the in-browser editor.

For information about customizing Blueprint themes, see Accessing and Customizing Template Files (Blueprint).

This is an advanced feature, and requires knowledge of HTML/CSS and Handlebars.

For major design adjustments, or new theme development, we recommend that you or your developer use Stencil CLI, which provides access to all theme files.

Before making large changes we suggest downloading your current theme.

Accessing Edit Theme Files

To access the HTML/CSS files in Theme Editor, you first have to make a copy of your theme.

Step 1: Go to Storefront › My Themes and click on the thumbnail image of the theme.

Step 2: From the Theme Options drop down menu, select Make a Copy.

Why do I have to make a copy? Creating a copy of your theme allows you to make changes to your Storefront without disrupting your live store.

You can use the Preview button to see how changes will affect your store.

Step 3: You will be prompted to name the theme copy.

Type in a Theme Name, then click the Save a Copy button.

It may take a few seconds for the theme to be copied.

Step 4: Click on the Thumbnail image of your copied theme, from the Theme Options drop down menu, select Edit Theme Files.

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 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.

Saving Theme Files

When you click the Save File or Save All Files button, it will recompile and repackage the theme files with your changes.

You can then preview the revised theme and (if you choose) apply it to your store.

Saving and compiling might take a few minutes to complete, depending on the complexity and number of the changes.

Applying New Theme to Storefront

Step 1:

When you are happy with your changes, click the Save button to repackage the edited theme.

Step 2: Navigate to Storefront › My Themes, then scroll down to the list of your themes.

Step 3: Click on the theme you copied and edited.

Step 4: Choose layout that you want apply, then click the Continue button to apply.

Check your storefront to see your changes in action.

Something go wrong? After applying the new theme, if things are not working, you can go back to the original theme.

Click on the thumbnail of the original theme and click the Apply button.

Then you can troubleshoot your edited theme without disrupting your business.

Limitations

The following features are not available with Edit Theme Files:

• Editing assets like font files, .SVG files, or other image files

• Editing a theme’s config.json or schema.json configuration files (although you can view their contents)

• Have up to 10 files open, simultaneously, in the File Editor.

• Editing any JavaScript files - Concurrent editing is not supported.

For a given store, only one instance of the editor should be opened at any time.