How to Edit Theme Code in Shopify

A theme contains the building blocks of every Shopify store and it controls the look&feel as well as the functionality of your storefront. Every theme comes with extensive configuration options that let you change styles, colors, layout and features of a theme.

Themepunk tutorials typically include instructions for applying changes to theme code. All tutorial instructions on Themepunk assume you will be using the official Code Editor built into the Shopify admin. So make sure you read this article to understand how the editor works and what potential pitfalls to look out for.

⚠️ WARNING ⚠️

Before you make any (major) changes to a theme's code, it's highly recommended to make a backup of the theme first. That way, if you somehow mess up, you can always go back to the backup of the theme.

To make a backup of a theme, click Actions next to the theme and then Duplicate.

Make Changes to the Live or an Unpublished Theme?

Every Shopify store can have up to 20 themes installed at the same time, but only one theme can be published, i. e. the theme that controls the live storefront. The published theme is also called the live theme, all other themes are unpublished and can only be viewed by using special preview links generated in the shop admin.

If your store is not publicly available yet (the storefront password is active), you can apply changes directly to the live theme. But if your store is already live and getting visitors, it makes sense to apply changes to an unpublished theme and then, when you've made sure the changes look and work as expected, publish that theme and make it the new live theme.

❗Important Note❗

When you're working on an unpublished theme, make sure you don't also apply some other set of changes to the live theme at the same time, including changes in the Theme Editor. If you apply one set of changes to an unpublished theme and another set of changes to the live theme, you will end up with parallel changes to two themes and when you publish the unpublished theme, the changes in the live theme will be lost. So make sure to leave the live theme be while you work on an unpublished theme, or, if it can't be avoided, make sure you apply any changes made to the live theme also to the unpublished theme you're working on so you have those changes in both themes.

The Code Editor

While changing a theme's configuration options is done in the Theme Editor, changing a theme's code is done in the Code Editor. You can access the Code Editor for any theme you own by clicking the Actions button next to the theme and then clicking Edit code.

Every Shopify theme consists of a multitude of files organized into several folders. You can browse all the theme files in the file list in the left pane of the Code Editor.

Click a file to open it in the editor pane on the right.

After applying changes to a theme file remember to click the Save button to save the changes.

Reverting changes

You can also revert changes to individual files in the Code Editor. Shopify keeps track of changes and keeps a version history for each file, so you can always revert a file back to the state it was in at multiple points in the past, all the way back to its original version that came with the theme.

To roll back a file to a previous state, click the Older versions link next to the file name in the editor pane and then click the dropdown menu to select a date to which you want to go back.

There's also an official help page on reverting changes to files.

A note on line numbers in the code editor

Screenshots of the code editor in tutorials or Theme Extensions installation instructions often include the line numbers column of the editor. You can use these line numbers as a hint for where to find the code in question, but depending on your theme version and whether you or an app have changed the file from its original form the actual line numbers may differ from those in the screenshot. So always make sure you are changing the part of the code illustrated in the tutorial, regardless of whether the line numbers are exactly the same.

Final Thoughts

That's all you really need to know to get started with the Code Editor. For further details also make sure to go through Shopify's Code Editor help page.