All you need to know about Shopify Theme Development
Published: 2021-06-30 12:41:05

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.

### 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 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,

- Install ThemeKit
- Setting up API credentials
- Push your theme

## Theme Kit Installation
Installation on linux,
<mark>curl ​ -s​ https://shopify.github.io/themekit/scripts/install.py | ​ sudo ​ python</mark>

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

<mark>theme new ​ --password​ =[​ your-password] ​ --store​ =[​ your-store.myshopify.com] ​ --name​ =[​ theme name]</mark>

To start developing on existing theme we have to setup the config file as follows,
Development:

password: ​ <mark>shppa_a1b2c3d4e5f6g7h8i9j10klmno1112</mark>

theme_id: ​ <mark>1234567890</mark>

store: ​ <mark>storename.myshopify.com</mark>

 
### Common Commands
<mark>theme watch</mark> ​ watch the current directory changes and update the remote theme on shopify

Deploying theme to shopify, <mark>theme deploy</mark>

Publishing theme , <mark>theme publish</mark>

### 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:

assests
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 the theme.liquid under 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, ​ <mark>{% section 'header' %}</mark>

## Shopify’s Templating Language
Shopify’s template language makes it possible to 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 the liquid

objects
tags
filters

## Generating Schema
Schema tags contain JSON which would determine how the theme editor reads our content.
[Schema] (https://contrivesol.com/wp-content/uploads/2021/01/shopifyCode.png)

[Contact us for more Information](https://contrivesol.com/contact-us/)