Table of contents
Since on a Shopify store, we only have access to the theme files, the index file is located inside the theme folder.
Now, if you come to Shopify from another platform, in most cases, you know that the index file is your application’s main entry point.
The problem with Shopify is that it kind of has two index files.
One is generated with JSON, which holds all settings for the homepage of your store, and the other is the template used to generate all other common resources used across all pages of the store, such as scripts, style sheets, and so on.
Even the “index.json” page is generated inside the “theme.liquid” file.
The “index.json” file
The “index.json” file (marked with 2 in the image below), which is the store’s home page, can be found inside the theme’s templates folder (marked with 1 in the image below), as shown in the image below:
You can see the “index.json” file (marked with 3 in the image above) opened inside the code editor.
As you can see, this file contains JSON data about sections, blocks, and settings set up inside the theme customizer for the home page.
If you are looking for the file responsible for the content generation of the home page, this is the file that you need.
Every time you make a customization for this page inside the theme customizer, this file will reflect the new changes.
It is also the file that Shopify calls the template index.
The “theme.liquid” file
The “theme.liquid” file is actually the main entry point for the theme.
I would call this one the template index since this file is the one in which all the JSON templates are generated.
It is also the file that contains all JS scripts and CSS files.
You can find the “theme.liquid” file (marked with 2 in the image below) inside the “layout” folder (marked with 1 in the image below):
You can see the “theme.liquid” file (marked with 3 in the image above) opened inside the code editor.
If you are looking for the file responsible for the generation of the DOM, or you want to add new JS scripts or CSS files, the “theme.liquid” file is the one that you need.
If you enjoyed this post, get updates.
It's free.
I'll send you emails when I make new posts on my blog and one email/month with a product that I like and tested.
I hate SPAM and promise to keep your email address safe.