Skip to content
Help Center
Magyar

Theme code editor

Open a theme's code in the browser, change it safely in the draft and publish it when the preview looks right.

Where
  1. Online store
  2. Themes
  3. (theme)
  4. Edit in code editor
On this page

Every theme is real code that you are free to change. The theme code editor opens that code in your browser, with no software to install. It is meant for developers and for merchants who work with one. You do not need it to run a store. The customizer covers design, content and settings without code.

When you need it

  • A developer builds a section, block or page that the customizer does not offer.
  • You want to change the markup of an existing section.
  • You start a new theme from the starter theme with Create theme.
  • The customizer or a publish reports an error in the theme's code and it has to be fixed.

For anything else, stay in the customizer. Editing code has one lasting consequence, described under Good to know below.

Open the code editor

There are three ways in, and they all open the same editor in a new browser tab:

  • In the theme list, open the actions menu on the theme's row and choose Edit in code editor.
  • On the theme's page, choose Edit in code editor next to the tabs.
  • In the customizer, choose Code in the top bar.

  1. Open Online store and choose Themes.

  2. Click the name of the theme you want to work on.

  3. Choose Edit in code editor.

  4. A new tab opens and loads the theme's draft files. This takes a moment the first time.

Find your way around

The editor looks and works like Visual Studio Code, and its interface is in English.

  • The file explorer on the left lists the theme's files: pages, sections, layout, settings, texts and emails.
  • The editor in the middle shows the open file. Problems in a file are underlined as you type.
  • The Changes view in the sidebar lists the files that differ between your draft and the published version, marked as modified, added or deleted. Open one to see the two versions side by side.
  • The status bar at the bottom holds Publish, Preview, Timeline and Asset.

Change a file and see the result

  1. Open a file from the explorer.

  2. Make your change.

  3. Save with Ctrl + S (Cmd + S on a Mac). The editor does not save on its own, and an unsaved file shows a dot on its tab.

  4. Saving writes the file into the theme's draft.

  5. Choose Preview in the status bar to open the store, or switch to the customizer, which follows the same draft and picks the change up live.

Customers do not see any of this. The draft only becomes visible when the theme is published.

Jump from the customizer to the right file

You do not have to hunt for the file that draws an element. In the customizer, select a section or element and choose Open in code from its menu. The editor opens the file at the right line.

A finished Custom section can also be turned into a real section of the theme with Convert to theme code. The section keeps its content. A developer can refine its markup in the editor, and you can keep editing it visually. This is in Beta.

Go back to an earlier state

  • Timeline in the status bar lists the saved snapshots of the theme and lets you restore an earlier one.
  • On the theme's page, History lists every version with Restore. See Themes.
  • Reset to starter theme, in the actions menu of the theme's page, replaces every file with the starter theme after saving the current state to History.

Publish

Publish the theme the way you always do: with Publish in the customizer or on the theme's page. See Themes. Publish in the editor's status bar does the same from inside the editor, after saving all open files.

While the new version is being prepared, shoppers keep seeing the current live theme.

Good to know

  • Once a theme's code has been edited, a theme update from the Theme Store no longer carries your settings and content over automatically. The update installs fresh beside your customized theme. See Theme store.
  • The default Poltura theme receives improvements to the starter theme automatically only while its code is untouched.
  • The customizer and the code editor work on the same draft. Changes made in one arrive in the other, and edits to different settings are merged.
  • If a new version of the theme wants to fetch data from new web addresses, publishing asks you to confirm them first.
  • Every plan can use the code editor.

If something goes wrong

  • The customizer says the theme's code has an error. The preview shows the last working version and your live store is unchanged. Open the editor, fix the file named in the notice and save.
  • "Publish failed because the theme's code has an error." Your live store is unchanged. Fix the error, check the preview, then publish again.
  • The theme page shows Build: Failed. The storefront keeps showing the last version that worked. Fix the code or restore an earlier version from History.
  • You changed something and want it all gone. Restore the last published version from History on the theme's page.