Manage your template: Code Editor
📖 Customers can manually customize the template appearance by editing the styling code. This article will show you how to use the Code Editor.
On this page
What is the Code Editor
The code editor is a tool in the Visual Editor that lets merchants view and edit the code for their templates.
To access the code editor
Step 1: Inside the Visual Editor, you can activate the Dev mode toggle in the header.
To navigate the code editor
The code editor shows a directory of template files on the left, and a space to view and edit the files on the right. When you click a file in the directory on the left, it opens in the code editor. You can edit multiple files at once.
You can also use the search bar to find specific files. Typing a keyword into the Search field filters the list of theme files.
To update template files
Any files you update will show a dot next to the file name, which helps you keep track of where you have made changes.
Turn on the Override template styling button
To view the Compile template
When you change any settings in the Visual Editor or any other feature settings that impact your template (e.g., Display settings of Filters, In-collection search, etc.), the code displayed in the compiled template will be updated.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at support@boostcommerce.net.