Customizing themes

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 on the Customize theme page. 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 on the Customize theme page, you will have to make edits to your theme code from the Edit HTML/CSS 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 Customize theme page. The second is to edit your theme code to make changes, by accessing the Edit HTML/CSS page. The first step in both cases is to navigate to your Themes page in the admin.

View the Customize theme page

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

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

    Click the customize theme button

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

Customize theme page example

To make changes to certain types of pages on your store, first navigate to that part of your store in the theme preview. This will allow tabs for editable sections to come available in the theme editor panel on the left of the screen. For example, if you want to enable a quantity selector on your product pages, then click a product in the theme preview. When you are viewing the product page in the preview, a Product pages tab will appear in the theme editor panel:

Product pages in the theme editor

View the Edit HTML/CSS page

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

  1. In the left sidebar, click the drop-down menu, then click Edit code:

    Click edit html css

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

Edit html css page example

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 do not use a free theme from Shopify, then customizations for your theme are not supported by Shopify. Paid themes from the Shopify Theme Store are developed by different third party groups, with each group offering a different level of support. To find out what kind of support is available for your theme, go to your Themes page, and click Customize theme. Next, click More actions beside your theme name in the top-left corner of the theme editor. Select Support:

Theme support

Make a backup of your theme

When you're ready to try some customizations, the first thing you should do is 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.