Shopify Theme Development

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=[your-password] --store=[your-store.myshopify.com] --name=[theme 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.