The [code editor](http://shopify.com/admin/themes/current) is a page in the Shopify admin that lets merchants view and edit the code for their themes.

> Tip:
> If you need to make significant changes to your theme code, then you should consider using a local IDE like Visual Studio Code. When you edit your theme locally, you can use tools like [Shopify CLI](/docs/storefronts/themes/tools/cli/cli-2/commands) and [Theme Check](/docs/storefronts/themes/tools/theme-check/configuration) to make the development process easier.

![A browser window showing the online code editor in the Shopify admin](/assets/themes/template-editor.png)

## Accessing the code editor


      <div class="section-tabs-container">
        <div role="tablist"
           aria-label="Desktop, iPhone, Android tabs"
           class="section-tabs">
      <button id="tabs-41b65f-0"
              aria-selected="true"
              aria-disabled="false"
              aria-controls="content-41b65f-0"
              class="desktop-item section-tabs__tab section-tabs__tab--is-selected"
              role="tab">
          Desktop
    </button><button id="tabs-41b65f-1"
              aria-selected="false"
              aria-disabled="false"
              aria-controls="content-41b65f-1"
              class="iphone-item section-tabs__tab "
              role="tab">
          iPhone
    </button><button id="tabs-41b65f-2"
              aria-selected="false"
              aria-disabled="false"
              aria-controls="content-41b65f-2"
              class="android-item section-tabs__tab "
              role="tab">
          Android
    </button>
    </div><div tabindex="0"
             role="tabpanel"
             id="content-41b65f-0"
             aria-labelledby="tabs-41b65f-0"
             class="desktop-item section-tabs__content--is-selected section-tabs__content">
        <ol>
<li><p>From your Shopify admin, go to <strong>Online Store</strong> &gt; <strong>Themes</strong>.</p></li>
<li><p>Find the theme that you want to edit, and then click <strong>...</strong> &gt; <strong>Edit code</strong>.</p></li>
</ol>

      </div><div tabindex="0"
             role="tabpanel"
             id="content-41b65f-1"
             aria-labelledby="tabs-41b65f-1"
             class="iphone-item  section-tabs__content">
        <ol>
<li><p>From the <a rel="external noreferrer noopener" target="_blank" href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
<li><p>In the <strong>Sales channels</strong> section, tap <strong>Online Store</strong>.</p></li>
<li><p>Tap <strong>Manage all themes</strong>.</p></li>
<li><p>Find the theme that you want to edit, and then tap <strong>...</strong> &gt; <strong>Edit code</strong>.</p></li>
</ol>

      </div><div tabindex="0"
             role="tabpanel"
             id="content-41b65f-2"
             aria-labelledby="tabs-41b65f-2"
             class="android-item  section-tabs__content">
        <ol>
<li><p>From the <a rel="external noreferrer noopener" target="_blank" href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
<li><p>In the <strong>Sales channels</strong> section, tap <strong>Online Store</strong>.</p></li>
<li><p>Tap <strong>Manage all themes</strong>.</p></li>
<li><p>Find the theme that you want to edit, and then tap <strong>...</strong> &gt; <strong>Edit code</strong>.</p></li>
</ol>

      </div>
      </div>
    


## Navigating the code editor

The code editor shows a directory of theme 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 open and edit multiple files at once.

You can also use the search bar to find specific files. Typing a keyword into the **Search files...** field filters the list of theme files.

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/themes/editor/code-editor-navigation.mp4" type="video/mp4">
</video>

### Menu options

You can access options to customize your theme and request expert theme help from the overflow menu. You can also click **Preview store** to preview your code changes on your store.

![The overflow menu and the preview store button in the code editor](/assets/themes/editor/overflow-menu-preview-store.png)

## Adding theme files

You can add theme files by opening the relevant folder, and clicking **Add a new {file type}**. A modal opens with different options, depending on the type of file you're creating.

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/themes/editor/add-a-new-file-type.mp4" type="video/mp4">
</video>

## Updating theme files

Any files that you update will show a dot next to the file name, which helps you to keep track of where you have made changes.

> Tip:
> You can use the `cmd + S` keyboard shortcut to save changes in a file.

![The directory of theme files showing a purple dot next to the files that have been updated](/assets/themes/editor/updated-files.png)

### Renaming files

To rename a file, select the file that you want to rename and click the pencil icon.

![The option to rename a file in the code editor](/assets/themes/editor/rename-file.png)

### Autocompletion

To help you code faster, the code editor includes autocompletion functionality for Liquid objects, filters, and tags.

![The autocompletion functionality in the code editor](/assets/themes/editor/autocomplete.png)

The code editor also automatically closes any HTML tags that you specify, which helps you avoid syntax errors.

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/themes/editor/autoclose-tags.mp4" type="video/mp4">
</video>

### Highlighting

If you highlight a term in the code editor, then every instance of the same term is also automatically highlighted. This helps you identify any changes that you might need to make in the file.

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/themes/editor/highlighting.mp4" type="video/mp4">
</video>

### Search and replace

You can use the `cmd + F` keyboard shortcut to search the text of an open file, and then replace text in the file.

![The search and replace functionality in the code editor](/assets/themes/editor/search-replace.png)

### Version control

The code editor supports version control for theme files. If you want to revert any changes to a file after you click **Save**, then open the file and click **Current**. A drop-down menu shows the date and time for each save that you've made to the file.

Select the version that you want to revert to, and then click **Save**.

![The recent changes drop-down menu in the code editor](/assets/themes/editor/recent-changes.png)

## Deleting theme files

To permanently delete a file, select the file that you want to remove and click the trash icon.

![The option to delete a file in the code editor](/assets/themes/editor/delete-file.png)

## Formatting theme code

The code editor offers code formatting on demand or automatically on save. Powered by [Prettier](https://prettier.io/), we offer this feature for all files with the following extensions:
`liquid`, `json`, `js`, `css`.

> Note:
> This feature is available in the code editor to all user uploaded themes, including themes that are uploaded through the admin interface, the CLI or through the GitHub integration.

### Formatting code on demand

To format your code on demand, click the format button. It will automatically show up on all files eligible for formatting and the changes will happen instantly. Formatting on demand does not save your changes.

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/themes/editor/format-on-demand.mp4" type="video/mp4">
</video>

### Automatically formatting code on save

To automatically format your code on save, check the checkbox in the format dropdown. With this setting enabled, each time you save your code changes, the code editor will automatically format your contents before saving.

These settings are unique between each of the supported file types (`liquid`, `json`, `js`, `css`). This allows you to pick and choose when and where to automatically format your theme code.

<video style="width: 100%; height: auto;" autoplay muted loop controls>
  <source src="/assets/themes/editor/format-on-save.mp4" type="video/mp4">
</video>

## Reviewing code

The code editor implements a limited version of the [Theme Check](/docs/storefronts/themes/tools/theme-check/configuration) linter for Liquid and JSON files to help identify errors and enforce Shopify theme and Liquid best practices.

In the code editor, Theme Check can identify the following errors in edited code:

- Parser-blocking scripts, which can slow down storefronts
- Inconsistencies between translation files, such as missing translation keys or translations that don't match in a locale file
- Missing templates

Errors are indicated by a red line underneath the code. To view the error, hover your cursor over the highlighted line.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/editor/theme-check-2a6a271860632187e511c4b4580f932267e9c61b4bb54034b8fafc1ec14d17bd.png" class="lazyload" alt="Theme Check identifies code errors with a red underline below the erroneous code." width="1642" height="946"></figure>