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.

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

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:

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.

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:

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

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: