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.

⚠ This feature is only applied to customers using Boost app's TURBO version.

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.

Page code - Dev mode.png

To access the code editor

Step 1: Inside the Visual Editor, you can activate the Dev mode toggle in the header.

Screenshot 2024-03-10 at 00.09.39.png

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.

    Screenshot 2024-03-18 at 01.39.17.png


  • Turn on the Override template styling button

    Screenshot 2024-03-18 at 01.50.39.png

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.