How to understand Shopify Theme folder Structure

Now that we have setup a private app in our Shopify Store which enables us to interact with our Shopify store using the Theme Kit utility, we are ready to start developing our first Shopify Theme.

Let's create a Demo Theme and familiarise ourselves with the structure of a Shopify Theme before we get into the development of its individual pages and components. Let's create a demo-theme repository and copy over our configuration file used by Theme Kit. This file contains information about our store and enables us to interact with our store using Theme Kit.

Using the Command Line we navigate into our new repository with the configuration file and generate a new Theme 'boiler plate' using: theme new --name demo_theme. This command generates the default layout of a Shopify theme with all the essential folders and and files we will need when building a Shopify Theme. Let's now have a look at those individual folders and files in detail.

Assets - the assets folder will contain our basic styling of the Shopify Theme in the form of .css files and also .js files for enhanced interactivity.

Config - The config folder contains the files settings_schema.json and settings_data.json. Both of those files contain the configuration for the look and feel of our Shopify Theme but there are important differences between the two.

The settings_schema.json file controls the organization and options available to a merchant in the theme editor. It’s used to create and edit the theme settings available for a merchant within the theme. For example, when we create a component for a navigation menu and we will want to give the user the option to configure the background color of the navigation menu, we will need to make an entry into to settings_schema.json file, to 'register' our component there and to specify what properties our component has. In the case of a navigation menu, we may be interested in specifying the property 'color' of type 'color'. In the Shopify Administrative Interface, the user will then be able to configure the color of the navigation menu. Because we have specified type of this property to be 'color', Shopify will display a color picker to the user, from which he will then be able to sellect an appropriate color.

The settings_data.json file stores the theme settings data saved from the theme editor. It can also include ‘theme styles’, also known as presets. If presets are defined, it enables a merchant to choose a theme style which is predetermined by a theme developer. After we have 'registered' our navigation menu component in settings_schema.json with the property 'color', the color that the user configures in the Shopify Administrative Interface, will then be stored in settings_data.json file. We may therefore see an entry similar to the following:

This entry specifies that the currently specified color for the Navigation Menu component. When making changes to the Theme, we need to be mindful to download the current settings_data.json file from the Shopify Store, so that we don't accidentally overwrite the changes made by the marchant.

Layout and the theme.liquid - The theme.liquid can be thought of as the master template; all other templates are rendered inside of theme.liquid. Any elements that are repeated in a theme (ex: site navigations, header, footer, etc.) should be placed inside theme.liquid. Notice the {{ content_for_header }} and {{ content_for_layout }}. Those components both need to be registered in our configuration files and the the appropriate HTML code will be rendered instead of those.

Locales - this folder contains the language versions of the Theme. We can add more files for additional language versions depending on the country in which the merhacnt and their custoemrs operate.

Templates - finally the templates folder contains the main pages that a Shopify Theme has. For example the 'product' page which is a page that will display information about a specific product. The information will be rendered dynamically depending on the product catalog that a merchant creates in their Store. The most special of them all is the index page which represents the main landing page i.e. the home page of a store and this is exactly what we are going to look at in our next article.

Thank you