Most likely the theme you have chosen will have lots more settings. I don't have the space to look at them all. However once you're familiar with how theme settings work, as you should be now, you should be able to manage the settings easily. Remember, when you have the theme settings as you want them, save a preset with your settings. And always check your store to see the impact of the changes you have made.

The Template Editor

The template editor is a tool for editing directly the templates that make up a theme. If you are skilled in HTML and CSS you will be able to customize your store's theme here much more than with the theme settings. We're going to get quite technical in the next few pages but it's not essential that you know it - you can always skip to the end of the chapter if you're not interested.

There are a few different ways to get to the theme editor. Let's open up the theme section by clicking Themes in the navigation panel, and from there click on Template Editor for the theme of your choice.

If you are editing the published theme, you will be editing a live theme. Visitors to your store will see any changes you save. Shopify provides a way to revert back to a previous version when changes you make do not go to plan. We will look at this and also how to make a backup of your theme before you start making changes.

So what makes up a theme?

A theme is made up of a collection of files that together define the look and feel for your store. It generally includes the following types of files: Liquid templates (.liquid), stylesheets (.css), javascript (.js) and various image files ( JPG, PNG, GIF, etc.)

Liquid is a small and fast template language that provides a powerful means to customize a store's theme. If you have some basic experience with programming then you should be able to pick it up quickly. If you are not yet familiar with programming, you could try the Codecademy, an excellent resource for learning the basics.

The best place to get started learning about Liquid is the Theme Documentation section of the Shopify Docs. That will bring you through all the basics of Liquid. When you're up and running, the Cheat Sheetprovides a comprehensive list of the language's variables.

To work with the theme editor, you will also need good knowledge of HTML and CSS, and to a lesser extent of Javascript. If you're interested in learning these languages, Codecademy provides learning tracks on Web Fundamentals and Javascript Fundamentals.

Working with the template editor

On the left-hand side of the template editor, you'll see a list of the files contained in the theme. These are listed in five groups: layouts, templates, snippets, assets and config. You may need to scroll down to see the files at the end.

In the "Layouts" group you will see the theme.liquid file. This is the main template file and generates the elements that are consistent across your store like the header, footer and sometimes the sidebar. To edit these elements, you will need to edit this template.

In the "Templates" group you will find a list of templates responsible for generating all the different types of pages in your store. This covers the homepage (index. liquid), collections (collection.liquid), product pages (product.liquid), the blog homepage (blog.liquid), individual blog articles (article.liquid), etc. With some themes, there are a number of different page templates (page.liquid, etc.) and customer area templates.

Snippets are small template files that contain HTML or Liquid that is used more than once in your templates. Writing it once in a snippet avoids writing it multiple times in each of the templates. Each template that needs it can simply call the snippet when it's needed. You will find a list of your theme's snippets in the "Snippets" group.

Below the list of snippets, you will find a list of "Assets". This is a catch-all group for most of the other files contained in a theme. It includes stylesheets (.css.liquid), Javascript files (.js) and images used by your theme (.jpg, .png, .gif, etc.) Lastly in the "Config" group, you will find the files that are used to generate the theme settings for your theme.

Editing files in the template editor

To edit a file in the template editor, simply select the file in the list. Clicking once on the name of the file will open it up in a tab on the right-hand side of the screen. In fact, you can have several files open at the same time and navigate between them using the tabs.

To update the file you are currently looking at (i.e. in the tab you are looking at), click on the Save button on the right-hand side. Make sure to check the results of your changes by clicking the Live preview button at the top right for unsaved changes or the View your website link in the upper navigation bar for saved changes.

Reverting to an older version of a file

Sometimes you will want to revert a file back to an older version. Anyone can make a mistake and end up breaking something on their store. Luckily Shopify keeps a copy of all previous versions of the file.

Above the edit screen, just below the tabs, click on Older versions.

In the dropdown menu that appears after a few seconds, select the version to which you would like to revert. Or click on the cancel link to the right.

Making a backup of the theme files

It's a good idea to make a backup copy of your theme files if you're going to be making changes in the template editor. To do this you will need to export the theme:

1. Open the themes section by clicking on Themes in the navigation panel.
2. For the theme that you will be working on, click on Export.
3. The export will be emailed as a .zip file to the email address with which you registered Shopify. Verify that you have received the email.

Summary

In this section, we have looked at how to install and manage your store's themes. We went through some common theme settings and saw how these are controlled in the theme New Standard. Lastly we looked at how those with programming skills can control their theme also through the template editor.

Now we have looked at how we create products, we will next look at how we put together collections of products. And with a theme now in place, we also want to look at how we start to build the store navigation. That's all in the next chapter!