The code editor

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

A browser window showing the online code editor in the Shopify admin

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:

The expand icon

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

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:

The directory of theme files showing a purple dot next to the files that have been modified

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.

The Older versions drop-down menu

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.