Developer Guide

# Technologies

# Code Editor

You are free to use whatever editor you are most comfortable with, but we strongly recommend VSCode.

There are a few reasons for this:

  • Fastest code editor outside of VIM or Nano
  • Broad support for all programming languages
  • Supports automatic code formatting by leveraging linters (ESlint, StyleLint)
  • Allows for general code consistency by leveraging the VSCode settings file and EditorConfig

# Local Development

# Shopify CLI vs ThemeKit

Currently there are two tools provided by shopify to push/pull/develop code for Shopify. They are Shopify CLI, and the older ThemeKit. Shopify CLI is more feature rich, but ThemeKit is more reliable.

According to Shopify:

Shopify CLI replaces Theme Kit for most Shopify theme development tasks. You should use Shopify CLI if you're working on Online Store 2.0 themes. You should use Theme Kit instead of Shopify CLI only if you're working on older themes or you have Theme Kit integrated into your existing theme development workflows.

In my experience, Shopify CLI is still very much a work in progress. As the tool matures, I'm sure it will become the defacto standard. Until then, use whatever tool you prefer to get the job done.

# Version Control

All code should be version controlled with Git, and every theme has a corresponding Git Repository at Electric Eye.

Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files.

There are some guidelines around this workflow that are detailed on the Guidelines page.

# Theme Tech Stacks

# Existing Themes

When working with existing themes, we do not have much control over what we are given, but generally speaking all themes leverage the following technologies:

Each theme varies, so handle with care. When working with a new theme, always take some time to familiarize yourself with the theme's technologies.

# New Themes

When starting from scratch, we prefer to use our own custom starter theme, called VG+. You can view the VG+ demo store here.

This allows us not only to speed up development, but provide structure, consistency, and reusability around our custom theme builds.

VG+ leverages the following technologies (along with the ones listed for existing themes):