Editing theme code

When you set up your online store, there are many ways that you can customize its look and feel, as well as its behavior. You can adjust the style and aesthetic to suit your brand, and add functionality or special information that relates to your business.

Grow your business

You can hire a Shopify Expert to customize your theme and let you focus on other important parts of your business.

What is a theme?

A theme is a collection of files that control the layout and appearance of your website. Most of the files that make up a Shopify theme have the extension .liquid, and are known as Liquid templates. This is because they contain Liquid code, which is Shopify's templating language. Aside from Liquid, Shopify theme files also contain HTML, CSS, and JavaScript.

All themes come with build-in settings that can be easily adjusted in the theme editor. The built-in settings include the ability to change make changes to the font, the colors, the layout, and the content of your online store.

To make more in-depth changes to your theme, or to make changes that aren't available in the theme editor, you will have to make edits to your theme code from the Edit code page.

Get started

After choosing a theme, you can make customizations in two different ways. The first is to change built-in settings for your theme, by accessing the theme editor. The second is to edit your theme code, by accessing the Edit code page. The first step in both cases is to navigate to your Themes page in the admin.

View the theme editor

The theme editor lets you view and change the built-in settings of your theme.

  1. Click the Customize button for the theme that you want to customize:

    The Customize button on the Themes page in the admin

The theme editor shows a preview of the theme and categories of settings that you can change:

The theme editor

Different types of pages have different theme sections. When you visit the theme editor, the settings for the home page are shown by default. To access the settings for other pages, select the page type from the top bar drop-down menu:

Theme editor top bar drop-down menu

The settings that are available in the editor vary theme to theme.

View the Edit code page

The Edit code page lets you edit the code files that make up your theme.

  1. For the theme that you want to edit, click Actions, then click Edit code:


On the Edit code page, you can edit the existing files, and add new ones. The page shows a directory of theme files and an online code editor:


When you click a file in the list, it opens in the code editor. You can open and edit multiple files at once.

Themes have several file categories:

  • Layout

    These files control the layout of your theme.

  • Templates

    These files control layouts for specific parts of your theme such as product or blog pages.

  • Snippets

    These files contain chunks of code that are used by other files in your theme.

  • Assets

    These files are images, fonts, scripts, and stylesheets.

  • Config

    These files contain settings and configuration data for your theme.

  • Locales

    These files contain language-specific pieces of text for your theme.

  • Sections

    These files control the layouts of sections in your theme.

Support for themes

Before customizing your theme, make sure that you understand what level of support is available.

Supported customizations

If you use a free theme from Shopify, we can help if you have trouble with supported customizations. Supported customizations include all tutorials in the Shopify Help Center that do not have the warning message shown in the Unsupported customizations section below. You can chat, email, or call us any time.

Unsupported customizations

Unsupported customizations are outside the scope of our support service. This means that we’re not able to help you if you run into problems. All unsupported customizations include the following warning message:

If you are having trouble with an unsupported customization, then consider hiring a Shopify Expert. There’s also a growing community on our forums. You’ll often find friendly and helpful advice there.

Themes not supported by Shopify

If you buy a third-party theme, then you need to obtain support for any customizations to the theme from the developer of that theme. Each theme developer offers a different level of support. To find out what kind of support is available for your theme:

  1. Go to your Themes page in the admin.
  2. Click the Customize button.
  3. Click the Theme settings tab near the top of the toolbar on the left:

    The theme settings tab in the theme editor
  4. Click Read documentation or Support:

    The Read documentation and Support links in the theme editor

Make a backup of your theme

When you're ready to try some customizations, make a duplicate copy of your theme. Use the duplicate copy as your working version until you're ready to publish it.

Revert to earlier version of a Liquid file

You can abandon your changes to most theme files at any time, and roll back to earlier versions.