When making customizations to your theme or installing apps, you may need to head into the theme code to access the template files. To do this, please follow the following steps:
Step 1: Log in to your Shopify Admin. Under Sales Channels, click into Online Store > Themes:
Step 2: In the upper right corner of your theme, you'll notice a blue "Customize" button with two buttons to the left. Click the "Actions" button.
Step 3: Then, from the drop-down menu that appears, select "Edit Code":
This will bring you to the theme's template files.
Running down the left column is a list of the folders and template files that make up your theme:
Here's a quick overview of what each folder is for and other features of the editor:
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 "Assets" folder contains the CSS, JavaScript and core image files needed for your theme. Within this folder, styles.scss.liquid is the primary file that controls your theme's CSS, while app.js.liquid contains much of the JavaScript. Also stored here are images for credit card logos and other frequently used imagery. Note that this folder is separate and distinct from the Shopify file manager and files uploaded to one do not appear in the other automatically.
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" 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, check out Shopify's documentation
IMPORTANT: Liquid files maintain a running version history:
CSS and JavaScript files do not maintain a running version history. This means that you cannot revert to an older version, so it's recommended you download the theme as a backup or duplicate your theme to create a version to test with.