The code editor

The code editor is a page in the Shopify Admin that lets merchants view and edit the code for their themes.

Accessing the code editor

Interface

The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.

You can expand the code editor to fill the screen by clicking the expand icon:

You can return the page to normal by clicking the collapse icon:

When you click a file in the directory on the left, it opens in the code editor. You can open and edit multiple files at once.

Any files that you modify will show a dot next to the file name:

This can help you to keep track of where you have made changes.

If you want to revert any changes to a file after you click Save, then open the file and click Older versions. A drop-down menu shows the date and time for each save that you've made. Select the version that you want to revert to, and then click Save.

When the code editor is in full screen mode, you can toggle the editor color scheme between Light and Dark by clicking the buttons at the bottom of the page.