Shopify

Shopify is one of the best and very popular eCommerce platforms on the market today. COVID-19 pandemic accelerated shift to eCommerce by 5 years and most analysts predict that the growing trend of online shopping will stay even when the pandemic is over.

Happy accident

Like so many business success stories, Shopify's creation was something of a happy accident.

This is the story: Founder Tobi Lutke opened an online snowboard shop in 2004 but found that the available e-commerce software at the time was unwieldy and expensive, so he made his own. Two years later, after receiving positive feedback from other online entrepreneurs who had asked to license the software, Shopify was born and Lutke pivoted from snowboards to e-commerce software. Since its Initial public offering (IPO) five years ago, the stock has returned nearly 5,000%, full story can be found here Nasdaq.

Shopify offers plugins and APIs, including "Storefront API"( Shopify's modern GraphQL API) that can be used to implement shopping, account management, and checkout flow in a portable frontend. Shopify also offers multiple responsive themes out of the box, based on Liquid templating.

Liquid - template language

The Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Liquid is used in many different environments, created for use in Shopify stores but also used extensively on Jekyll (static site generator) websites and many hosted web applications such as Zendesk, Salesforce desk, 500px, the full list can be found here.

Shopify Themes

Shopify is considered one of the easiest platforms. It supports the headless context of the eCommerce approach via the Storefront API. The Storefront API provides unauthenticated access to customers, checkouts, product collections, and other store resources that you can use to build purchasing experiences on merchant storefronts.

Shopify Themes control the appearance of merchants’ online stores. Liquid is required to work on Shopify Themes and developers use it along with standard HTML, CSS, and JavaScript, to create any look and feel their clients want.

Step 1: Install Theme Kit

Installation

macOS Installation
Use Homebrew to install Theme Kit by running the following commands.
brew tap shopify/shopify
brew install themekit

Node Package

If you want to integrate Theme Kit into your build process, there is a Node wrapper for Theme Kit on npm:

npm install @shopify/themekit

Step 2: Setting up API credentials

Get API Access

Once Theme Kit is installed, we’ll need a few things to connect our local theme to your existing Shopify store. We’ll need an API key, password, and theme ID.

NYC Candy Store

Once login to the Shopify account I created NYC Candy Store and those are account details:

URL: nyc-candy-store.myshopify.com
Login: nyc-candy-store.myshopify.com/admin
https://nyc-candy-store.myshopify.com/

Adding free Brooklyn Theme:

This is the NYC Candy Store Layout :

Brooklyn Theme documentation can be found here.

As we mention above Liquid is required to work on Shopify Themes and this is the section where we need to edit and customize:

Liquid syntax

Liquid has a syntax that interacts with variables and includes constructs such as output and logic. Liquid constructs are easy to recognize, and can be distinguished from HTML by two sets of delimiters: the double curly brace delimiters {{ }}, which denote output, and the curly brace percentage delimiters {% %}, which denote logic and control flow.

There are three main features of Liquid code: Objects, Tags and Filters.

Objects

In a theme template, objects are wrapped in double curly brace delimiters {{ }}, and look like this:

{{ product.title }}

In this example, the product is the object, and the title is the property of that object. Each object has a list of associated properties. The {{ product.title }} Liquid object can be found in the product template of a Shopify theme.

Tags

Liquid tags are used to create logic and control flow for templates. The curly-brace percentage delimiters {% %} and the text that they surround do not produce any visible output when the webpage is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.

For example, you can use Liquid tags to display different content on the product page depending on whether or not a product is available:

{% if product.available %}
<h2>Price: $19.99</h2>
{% else %}
<h2 class="sold-out">Sorry, this product is sold out.</h2>
{% endif %}

Filters

Liquid filters are used to modify the output of numbers, strings, objects, and variables. They are placed within an output tag {{ }}, and are denoted by a pipe character |.

A simple example is the capitalize string filter:

{{ 'hello!' | capitalize }}

The filter modifies the string by capitalizing it. The output will be:

Hello!

Here is Shopify for Developers documentation.

To connect with me

Please check my Github, LinkedIn and follow me on Twitter.

Thanks for reading!