Shopify for Frontend Engineers | #1 Dev Env, ThemeKit, Liquid

Shopify gained a lot of traction in the last months - probably because E-Commerce is in very high demand amidst a pandemic that forces many retail stores to shut down. That's also why Shopify developers are in high demand right now.

I've been working with Shopify for several years now and introduced many developers that are used to other CMS like Wordpress, Magento, Prestashop etc. to Shopify. From my experience, many developers have troubles getting into the concepts of working with a SaaS-CMS, which applies to Shopify and results in pretty unique ways to build the thing you want to create.

For example, Shopify doesn't offer a real, full-fledged possibility to work with a Shopify store's files locally and there's also a lot of black box magic happening on the Shopify servers that you just have to deal with - e.g. automatic generated, captcha-enabled forms that get connected to the Shopify servers by default.

Besides that, many developers have problems grasping very Shopify specific E-Commerce concepts - like the idea of so called "collections" instead of ordinary product categories.

However, in this and my upcoming blog posts I'll focus on...

Setup a development environment using a development store and ThemeKit
Modifying popular Shopify themes
Give you guidance on how you can craft your very own, 100% custom built Shopify frontends
How you can build headless storefronts for Shopify

So let's start with the most important concepts. They're pretty basic but if you don't know about them you'll waste hours or days bumming you head against a wall because a lot of things might work differently than you'd expect.

Tool #1: Partner Dashboard & Development Stores

Since you can't install Shopify locally (like you would with let's say Wordpress), you need to work with an online development instance of Shopify. Yep: it isn't possible to work with Shopify without an active internet connection.

To create a development store visit partners.shopify.com/signup and create a Shopify Partners account. It's for free and allows you to create an unlimited amount of development stores to code with. Development stores are free as well. Creating development stores is super straight forward and is probably not a major hurdle for you if you know how to code. That being said, if you face problems creating a development store have a look at this super detailed how-to written by Shopify: help.shopify.com/en/partners/dashboard/mana..

Tool #2: ThemeKit - a remote control for your development store

Since Shopify is 100% SaaS based, you aren't able to create a local Shopify environment on your machine. Instead, you must work with your (live online) development store by changing the files on the files on the Shopify servers. To help you with that, Shopify created a command line tool called "ThemeKit": shopify.github.io/themekit .

Using homebrew you can install it as easy as

brew tap shopify/shopify
brew install themekit

After you've created a private app in your development store to get the API credentials you need for ThemeKit (as it's described in the "Getting Started" guide here: shopify.github.io/themekit), you just have to type theme download to download your theme.

After that you can execute theme watch to let ThemeKit monitor your local files and push changed files to the Shopify servers.

To wrap up, what ThemeKit essentially does is:

downloading the theme files from your development store to your local machine
whenever you do a change to a local file, it gets automatically uploaded via SSH to the Shopify servers and connected to your development store

The second point is super, super important and I saw many devs not grasping this concept even after they've worked with Shopify for several weeks. To make it clear: ThemeKit exclusively works as kind of a remote-control for your Shopify store. It does so by uploading your locally changed file to the Shopify servers and replace whatever is on the Shopify servers with your local file.

That means you should really cater for a version control system like git(hub) to keep track of your local changes - Shopify won't help you with that.

Tool #3: Liquid - Shopify's templating language

You probably at least heard of Smarty, Handlebars, JSX and all of that different templating languages. Shopify just provides their own, pretty slick templating language called "Liquid": shopify.github.io/liquid . Liquid is actually open source and even used by other projects like the static site generator Jekyll. However, when you're working with Shopify themes you'll build page templates with Liquid, meaning instead of let's say hard-coding a product title for a product page, you use something like {{product.title}} to dynamically print the title of the current accessed product, while many products share the same page template file.

Important: Liquid gets compiled to html/css on the Shopify servers when a user wants to access a store page (well, they've caching in place but leave that for now). This means that whatever liquid magic you do in your code, only the Shopify servers know about it and compile your liquid code to pure html/css files that get sent to the client.

On that note: If you write JavaScript for the client, keep in mind that any liquid variables will get compiled before the frontend (including the script) gets sent to the user. Meaning that any liquid variable in your JavaScript will get compiled (most probably) to a string you can use, but you won't be able to assign any new values to liquid variables using JavaScript.

Shopify offers a "cheat sheet" that helps you to find the variables you might be looking for: shopify.com/partners/shopify-cheat-sheet .

Tool #4: HTML/CSS/JS and an IDE of your choice

Well, nothing new here. Besides Liquid and ThemeKit you can use the tools you probably know and love for your frontend projects: HTML as markup, CSS for styling and JS to make things fancy & interactive. In regards to the IDE: if you use Visual Code watch out for liquid extensions that help you writing Shopify theme code.

But how can I use React/Vue/Angular/?

Unfortunately there aren't very straight-forward ways to use these frameworks for Shopify frontends. The most common way to do so is by using Shopify's Storefront API (shopify.dev/docs/storefront-api) and build a custom headless frontend. This comes with some restrictions like not being able to use Shopify's native Customizer (a drag&drop editor for merchants) and therefore is probably not what you're looking for. However, I'll make a tutorial on this too, so I have you covered.

Fun fact: A lot of Shopify themes use jQuery for the javascript part. You might love or hate it, but probably hate it.

Let's start coding!

Okay, at this point you should have understood the concepts of ThemeKit, Liquid and have a development store you're keen to modify. In the next tutorial we'll start doing changes to the current installed theme, create new elements and learn how to code for Shopify's Customizer so merchants are able to modify your elements using a drag&drop editor.