Skip to content
Log inStart free

Edit Theme Code

Most theme changes are made visually in the builder, but for advanced changes you can switch to the code editor and work with the theme's code directly. The builder's toolbar carries a three-way switch between Visual, Code, and AI, so you move to Code when a change is beyond what the visual editor can do.

Updated
Reading time
2 min
On this page

Most changes to your theme are made visually in the theme builder, by selecting sections and editing their settings. For advanced changes that the visual editor does not cover, you can switch to the code editor and work with the theme's code directly. This article explains where the code editor is and when to use it.

You reach it inside the theme builder, which you open with Customize on the theme under Online Store, in Themes.

Switching to the code editor

In the theme builder, the editor mode is a three-way switch in the middle of the top toolbar. It is always visible, so there is no menu to open first.

The middle of the theme builder toolbar, with the Theme control on the left, the three-way editor mode switch reading Visual, Code, and AI with Visual selected, and Screen size on the right. (opens full size)

  • Visual, the default, where you edit sections and their settings on a live preview.
  • Code, where you edit the theme's code directly.
  • AI, where you describe the change you want in words and the assistant edits the page for you. See The Theme Builder.

Select Code to switch to editing the code, and Visual to come back. Switching modes only changes how you are editing; it does not publish anything, so your storefront is unaffected until you select Publish.

When to use the code editor

Use the code editor only for changes the visual editor cannot make, such as fine adjustments to a theme's markup or logic. For everyday changes, the visual editor is safer and quicker: it edits through settings rather than raw code, so it is harder to break the theme. Switch back to the Visual editor from the same More menu when you are done.

Best practices

  • Make everyday changes in the visual editor, and use the code editor only when you must.
  • Change one thing at a time in the code, and preview before publishing, so a mistake is easy to spot.
  • Preview after editing code, since a code change can affect the whole theme.

Common mistakes

  • Editing code for a change the visual editor could make, which is riskier than needed.
  • Publishing a code change without previewing, which can put a broken layout on the live store.

Next steps

Still stuck?

More in Online Store

  • Manage Themes

    The Themes page is where you preview your storefront, customize your current theme, and add or switch to other themes, including creating one with AI. Publishing a theme makes it the one customers see.

  • Brand Identity

    Set up your store brand identity in one place from Settings, then Brand: logos, colors, cover image, tagline, business description, and social media links.

  • Menus

    Build the navigation menus on your storefront. A menu is a named, ordered list of items that link to pages, collections, products, blogs, or custom URLs, and items can be nested for sub-menus.

  • Upload and Manage Your Store Files

    The Files library is where every image, video, and document in your store is stored. Upload from your computer, from a URL, or from Canva, then search, copy links, and replace files from one place.

All 33 articles in Online Store

We use cookies

Necessary cookies keep the site working. With your permission we also use analytics and marketing cookies. Change your choice any time in Cookie settings.