Build and run your eCommerce website with Shopify
Tags: shopify, ecommerce, webdev, liquid
Published: 2021-01-06 04:08:49

# Shopify
[Shopify](https://www.shopify.com/) is one of the best and very popular eCommerce platforms on the market today. [COVID-19 pandemic accelerated shift to eCommerce by 5 years](https://techcrunch.com/2020/08/24/covid-19-pandemic-accelerated-shift-to-e-commerce-by-5-years-new-report-says/) and most analysts predict that the growing trend of online shopping will stay even when the pandemic is over.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e2681ey7fanq6n9wnl3c.png)

## 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](https://www.nasdaq.com/articles/2-stocks-that-turned-%241000-into-%2430000-in-just-5-years-2020-12-28).

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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2q91yq44l5i0eg8nvxp7.jpg)
# Liquid - template language 
The [Liquid](https://shopify.github.io/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](https://jekyllrb.com/) (static site generator) websites and many hosted web applications such as [Zendesk](https://www.zendesk.com/), [Salesforce desk](https://www.salesforce.com/solutions/small-business-solutions/help-desk-software/?mc=desk), [500px](https://500px.com/), the full list can be found [here]
(https://github.com/Shopify/liquid/wiki#who-uses-liquid).  

## 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](https://themes.shopify.com/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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vp8xz37dez6z5iwl2u8q.png)


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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bykhr4r9v9ccv9byo2ud.png)

This is the [NYC Candy Store ](https://dev-to-uploads.s3.amazonaws.com/i/303y52tto7bgjxfyq6j5.png) Layout :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rl6uo7uuizy0puwljvrl.png)

`Brooklyn Theme` documentation can be found [here](https://help.shopify.com/en/manual/online-store/os/using-themes/themes-by-shopify/brooklyn).


As we mention above Liquid is required to work on Shopify Themes and this is the section where we need to edit and customize:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o1ptivfrqpjnzh3l32y2.png)

### 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](https://shopify.dev/docs/themes/liquid/reference).

### To connect with me
Please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) and follow me on [Twitter](https://twitter.com/LloydPile). 

Thanks for reading!