Skip to main content

The code editor

The code editor lets you view and edit your theme’s code directly in the Shopify admin.

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

Anchor to Access the code editorAccess the code editor

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click ... > Edit code.

Anchor to Navigate the code editorNavigate the code editor

The code editor shows theme files in a directory on the left and an editing area on the right. Click a file to open it. You can open and edit multiple files at once.

Anchor to Add theme filesAdd theme files

To add a file, select a folder, click New file, and enter the file name. You can also right-click a folder to add a file.

A partial code editor showing new file creation UI

Anchor to Update theme filesUpdate theme files

When you edit a file, a dot appears next to the tab name to show unsaved changes. Click Save in the upper-right corner to save your changes.

A partial code editor showing an unsaved file next to the save button
Tip

Use Cmd + S (Mac) or Ctrl + S (Windows/Linux) to save changes.

Anchor to Rename filesRename files

Right-click a file and select Rename... to rename it.

The option to rename a file in the code editor

Anchor to Track file changesTrack file changes

You can also view past versions of any Liquid file. Find previous versions of the current file in the Timeline panel at the bottom right.

To revert changes, select an earlier version, review the differences, and click Revert contents in the upper-right corner.

A code editor window displaying previous file versions and the code differences between the current and the past version

Anchor to Delete theme filesDelete theme files

To permanently delete a file, right-click it and select Delete permanently.

A partial code editor showing the option to delete a file

Anchor to Format theme codeFormat theme code

To fix code indentation, open the Command Palette with Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows/Linux), type format, and select Format document.

Command palette with the code formatting option selected
Tip

Configure formatting options like auto-format on paste or save in settings. Click the cogwheel icon in the bottom left, select Settings, and search for format.

Anchor to Review codeReview code

The code editor includes the Theme Check linter for Liquid and JSON files. It helps you catch errors and follow Shopify theme and Liquid best practices.

See the Theme Check reference for available checks.

Anchor to Search for codeSearch for code

Anchor to Search for a fileSearch for a file

Use Cmd + P (Mac) or Ctrl + P (Windows/Linux) to search for a file in the repository by its filename.

The search UI in the code editor searching by filename

Anchor to Search within the fileSearch within the file

Use Cmd + F (Mac) or Ctrl + F (Windows/Linux) to search within the open file.

The search UI within a file in the code editor
Tip

To replace existing text, click the arrow next to the search field to open the replace field, and enter the new text.

Anchor to Search across all filesSearch across all files

Click the search button in the left sidebar to search across all theme files. Results show every instance of your search term and which file it appears in.

The search side panel in the code editor
Was this page helpful?