--- title: The code editor description: Learn about the code editor, a tool that lets merchants interact with theme code in the Shopify admin. source_url: html: https://shopify.dev/docs/storefronts/themes/tools/code-editor md: https://shopify.dev/docs/storefronts/themes/tools/code-editor.md --- ExpandOn this page * [Access the code editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor#access-the-code-editor) * [Navigate the code editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor#navigate-the-code-editor) * [Add theme files](https://shopify.dev/docs/storefronts/themes/tools/code-editor#add-theme-files) * [Update theme files](https://shopify.dev/docs/storefronts/themes/tools/code-editor#update-theme-files) * [Delete theme files](https://shopify.dev/docs/storefronts/themes/tools/code-editor#delete-theme-files) * [Format theme code](https://shopify.dev/docs/storefronts/themes/tools/code-editor#format-theme-code) * [Review code](https://shopify.dev/docs/storefronts/themes/tools/code-editor#review-code) * [Search for code](https://shopify.dev/docs/storefronts/themes/tools/code-editor#search-for-code) # The code editor The [code editor](http://shopify.com/admin/themes/current) 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/code-editor-Dn2q0mHk.png) *** ## Access 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**. *** ## Navigate 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. *** ## Add 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/new-file-D1Dra8ma.png) *** ## Update 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/save-file-kTKRqstk.png) Tip Use `Cmd + S` (Mac) or `Ctrl + S` (Windows/Linux) to save changes. ### Rename files Right-click a file and select **Rename...** to rename it. ![The option to rename a file in the code editor](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/rename-file-TjKH3P5y.png) ### Track 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/version-control-DzsyMjp1.png) *** ## Delete 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/delete-file-BWF75-rP.png) *** ## Format 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/format-file-CuU_r7l9.png) 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`. *** ## Review code The code editor includes the [Theme Check](https://shopify.dev/docs/storefronts/themes/tools/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](https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks) for available checks. *** ## Search for code ### Search 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/file-search-CGPg4CXa.png) ### Search 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/search-file-DIWEJjny.png) Tip To replace existing text, click the arrow next to the search field to open the replace field, and enter the new text. ### Search 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](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/code-editor/search-theme-CTtkmCuV.png) *** * [Access the code editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor#access-the-code-editor) * [Navigate the code editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor#navigate-the-code-editor) * [Add theme files](https://shopify.dev/docs/storefronts/themes/tools/code-editor#add-theme-files) * [Update theme files](https://shopify.dev/docs/storefronts/themes/tools/code-editor#update-theme-files) * [Delete theme files](https://shopify.dev/docs/storefronts/themes/tools/code-editor#delete-theme-files) * [Format theme code](https://shopify.dev/docs/storefronts/themes/tools/code-editor#format-theme-code) * [Review code](https://shopify.dev/docs/storefronts/themes/tools/code-editor#review-code) * [Search for code](https://shopify.dev/docs/storefronts/themes/tools/code-editor#search-for-code)