When making customizations to your theme or installing apps, you may need to head into your HTML/CSS theme editor. To do this, please follow the following steps:
First, log in to your Shopify backend. Then, click Sales Channels > Online Store on the main navigation:
A new sub-menu will appear. Select "Themes" from this menu:
This will open the themes page.
In the upper right, you'll notice a blue "Customize theme" button with two buttons to the left.
Click the "Actions" button.
Then, from the dropdown menu that appears, select "Edit HTML/CSS":
You should now be in the template files.
Running down the left white column is a list of the folders and files that make up your theme:
To open or close any folder, simply click on the folder name or the blue folder icon.
To open and edit a file, simply click its name in the narrow column. The file's content will then be displayed in the larger pane to the right.
When files are open, you will notice numbers running down the left side. These are not part of the code, but are simply a way to number the lines in your code for easy referencing.
You can also keep multiple files open at once and flip between them by using the tabs that appear just above the folder list and code area.
The "Layout" folder contains the theme.liquid file which contains the code for the header and footer of all pages. In general, any changes made to this file will affect all of the code used throughout your store.
When a folder is open, directly under each folder name is a link to create a new file in that folder.
The "Templates" directory is rendered as the Templates folder in the theme editor. It contains all other Liquid templates.
The "Sections" folder contains the code for the various sections of your shop.
The "Snippets" folder contains small blocks of code that are used throughout the theme. These blocks of code are essentially imported into other files.
The "Config" file contains all the settings for your theme in a file format called JSON. Files in this folder should only be accessed and modified by advanced users as all of the settings contained in it can be adjusted via the "Customize theme" button without needing to edit code.
Finally, the "Locales" folder contains the files needed to translate your store. This folder is also typically only for advanced users or if you need to create a new translation. Most changes to the language settings can be made by clicking the "Actions" button and selecting the "Edit language" option.Before diving into theme files and making changes, we always recommend making a backup copy.
For a more in-depth look at theme templates see here.
IMPORTANT: Liquid files maintain a running version history: