---
title: Shopify Theme Development
description: "Building Shopify themes locally with Theme Kit instead of the online editor, plus the store theme limits to know first."
keywords:
 - Shopify
 - Theme
 - Development
canonical_url: "/shopify-theme-development/"
date_published: "2021-01-13"
date_modified: "2026-10-08"
type: post
author: Rohan Jalil
---

# Shopify Theme Development


A theme controls the user interface and feel of the online store. It makes the store functional and interactive with the customers.


## Store Theme Limitations


A store can have only 20 themes installed, and only one of them can be published which customers will see when the store is live.


## Shopify Theme Kit


Shopify provides an online editor to write code and update the store theme in the store admin dashboard. But that’s not the best approach, and developers need to set up a local environment for theme development.


Theme Kit is a cross-platform command line tool for building Shopify themes.


### Benefits


Upload themes to multiple environments, fast uploads and downloads, and watch for local changes and upload to Shopify automatically. Creating theme configuration file, theme configure.


## Local Theme Development Setup


Setting up local environment in 3 magic steps:


1. Install ThemeKit
2. Setting up API credentials
3. Push your theme


## Theme Kit Installation


Installation on Linux:


`curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python`


## Theme Permissions: Creating a Private App to Set Up an API Key


To access the Shopify store data in a theme, we have to create a private app that will generate an API key and password, and give read and write permission to themes. Start developing a Shopify theme from scratch:


`theme new --password= --store= --name=`


To start developing on an existing theme, we have to set up the config file as follows:


**Development:**


**password:** `shppa_a1b2c3d4e5f6g7h8i9j10klmno1112`


**theme_id:** `1234567890`


**store:** `storename.myshopify.com`


## Common Commands


`theme watch` watches the current directory for changes and updates the remote theme on Shopify.


Deploying theme to Shopify: `theme deploy`


Publishing theme: `theme publish`


## Theme Directory Structure


A theme is defined by Shopify as a set of files organized in a certain folder structure. At the highest level we find the following directories:


- assets
- config
- layout
- locales
- sections
- snippets
- templates


## JavaScript and CSS


The assets folder will have all the JS and Scss/Css files. These will be included in **theme.liquid** under the layout directory.


## Theme Sections


Sections are modular, customizable elements of a page, which can have specific functions. Sections can be statically included in a theme’s templates (like the header and footer), or they can be dynamically added to the theme’s homepage from the Theme Editor.


Including sections in liquid templates: `{% section 'header' %}`


## Shopify’s Templating Language


Shopify’s template language makes it possible to write static code and also dynamically populate the page with data from a Shopify store. The static elements are written in HTML, and the dynamic elements are written in Liquid.


## Liquid: 3 Main Features


Following are the three main features of Liquid:


- objects
- tags
- filters


## Generating Schema


Schema tags contain JSON which would determine how the theme editor reads our content.


![shopifyCode](/wp-content/uploads/2021/01/shopifyCode.png)