Editing theme code

You can edit your theme code to make detailed changes to your online store. Most of the files that make up a theme contain Liquid, Shopify's templating language. Theme files also contain HTML, CSS, JSON, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid.

Before you customize your theme

To prepare for customizing your theme, complete the following recommended tasks:

Edit your theme code

You can edit the code for your theme.

Steps:

Desktop
  1. From your Shopify admin, go to Online Store > Themes.
  2. Click ... > Edit code.
iPhone
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Click ... > Edit code.
Android
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Click ... > Edit code.

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 the same time. Any files that you modify will show a dot next to the file name:

The directory of theme files showing a dot next to the files that have been modified

This can help you to keep track of where you have made changes.

Roll back to an older version of your theme

If you've changed theme files and need to revert them, you can roll back .liquid files individually to a time and date before you made the changes.

Steps:

Desktop
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, click the button to open the actions menu, and then click Edit code.
  3. Under the Templates header, click one of the .liquid files that you have edited recently.
  4. Click Current version under the .liquid file name.
  5. Click the drop-down menu to select an older version. Clicking a datestamp will roll the code back to that saved version.
  6. Optional: Click Preview store to verify that the error was fixed.
iPhone
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme you want to edit, click the button to open the actions menu, and then click Edit code.
  5. Under the Templates header, click one of the .liquid files that you have edited recently.
  6. Click Current version under the .liquid file name.
  7. Click the drop-down menu to select an older version. Clicking a datestamp will roll the code back to that saved version.
  8. Optional: Click Preview store to verify that the error was fixed.
Android
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme you want to edit, click the button to open the actions menu, and then click Edit code.
  5. Under the Templates header, click one of the .liquid files that you have edited recently.
  6. Click Current version under the .liquid file name.
  7. Click the drop-down menu to select an older version. Clicking a datestamp will roll the code back to that saved version.
  8. Optional: Click Preview store to verify that the error was fixed.

Theme Check

The code editor includes Theme Check, a feature that helps to prevent errors by providing immediate feedback as the code is being written, instead of discovering errors in your live theme.

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

  • Parser blocking scripts, which can slow down a storefront
  • 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 mouse over the highlighted line.

Example of Theme Check detecting a code error

Theme code customization tutorials

You can follow theme code customization tutorials to guide you in making changes to your online store. The tutorials are organized based on the type of page or feature that they modify.

Theme customization tutorials are divided by the version of theme architecture that they use. Learn how to identify your theme architecture version.

Get help with customizations

If you need help with making changes to your theme, then you can contact your theme's developer for support.

To see what other resources are available to help you with theme customizations, see Additional resources for theme support.

Can’t find the answers you’re looking for? We’re here to help.