In this tutorial we’ll look at the Edit Theme files feature which allows you to make changes to a stencil themes files from within the stores control panel we’ll cover how to access the editor its features how to make edits and how to preview those edits.

The Edit Theme Files feature will allow more advanced customizations than are available in the theme editor but we do still recommend using stencil CLI for major theme adjustments and new theme development.

First let’s walk through how to access edit Theme Files in the Bigcommerce stores control panel go to storefront design my themes from here we’ll need to make a copy of the theme that we’ll be customizing edit theme files cannot be used on a theme that is currently applied to the store to eliminate the risk of messing up a live store it also cannot be used on the themes original version.

I’ll click on the themes thumbnail image to bring up the theme page then I’ll select theme options in the top right and make a copy it will now prompt you to name the new theme copy once the copy is created we’ll be redirected back to the my themes page in the control panel scrolling down the newly copied theme will appear in my theme list though it may take a few seconds of processing time for the theme to fully copy I’ll click on the copied themes thumbnail image and be taken to the themes page from there click customize which will bring up the theme editor in a new tab edit theme files appears at the bottom of the theme editor menu once the editor is open.

You’ll see a file tree in the left nav opening up the directories you’ll notice that some files appear blue while others are gray the gray files are read-only I do want to call out some key files that cannot currently be edited here config.json, schema json and the JavaScript files also new files cannot be created in edit theme files so if you need to add a custom page or a theme image you will still need to use stencils CLI for those types of edits.

Now let’s try editing a file a common customization is to place a site seal in the store footer I’ll navigate to templates components common and then open the footer HTML page the editor does let you collapse sections for easier navigation and has syntax highlighting once you start typing it will auto suggest HTML for you when I make a new div it also creates a closing tag for me automatically.

Now I’ll paste my site seal code into this new div now that I’ve edited the file there’s a blue dot that appears next to the file name both in the left navigation and in the tab at the top this signifies that I have unsaved changes undo and redo shortcuts are supported here so I can step back changes that I’ve made once you do save the file though undo is no longer possible in the bottom left there’s an option to preview now you must save your edited files before you can preview the theme saving may take a minute or two though as the theme does need to compile within the preview window there are toggles so you can view how your changes will look on mobile devices.

Once you’re done previewing click the close preview button and you’ll be returned to the editor once you’re ready to apply your edited theme to this door simply select it from the my themes page in the control panel and click apply just to recap we looked at accessing editing files within the control panel navigating the editor and making and previewing edits to a theme for documentation on accessing and using this feature or contact us now if you need help with editing theme files.

The post Edit Theme Files – Bigcommerce Tutorial :) appeared first on BigCommerce.How.