Shopify Tutorials

Comparison operators

Comparison operators are exactly that, comparing two values in different ways. The output of comparing values will be a boolean, true or false. The Liquid operators: greater than >, greater than or equal to >=, less than <, less than or equal to <=, equal to ==, does not equal to !=, the and operator, the or operator.

Types of Data

Variables, assignments, and naming conventions

Variables are a way to save data. The way it is done in Liquid is to use the "assign" tag between these curly braces and percent signs {% %}. You can still manipulate this data after it is assigned. When you name a variable it is a best practice to give it a label that is meaningful to what is happening in the code.

Liquid syntax and whitespace control

Liquid programming language has syntax with different enclosing braces: {{ }}, {% %}, {%- -%} and {{- -}}. Here we learn about what these braces mean and what their functions are. {{ }} renders our variables.  {% %} enables Liquid code for assignments, conditions, or loops. {{- -}} removes whitespace before and after.

Local Shopify Theme Development with Theme Kit

Theme Kit is an integral part of Shopify theme development. This tool allows us to use Visual Studio Code with its integrated terminal to run the file watch command, edit our files, and save to upload changes. We will need to create a private app and get the API password and theme id to add to our configuration file.

Best code editor for Shopify Liquid files

There comes a time when a developer needs to find out what the best editor is for the language they will be primarily using. For Shopify Liquid, the answer is easy: Visual Studio Code. This powerful IDE comes with Liquid support after installing a few extensions to enable syntax highlighting and autocomplete snippets.

Adding a test theme to your Shopify store

After you have created a Shopify Development store, it is time to add a theme for Liquid Development. I suggest on starting with the bare minimum of a theme to begin with as we do not want to be distracted about the different elements and functionality a theme can have. I have created a theme with only the necessities.

Free Shopify Store for Liquid Theme Development

To begin Shopify Development with Liquid, we will need to create a store. The store is free and it is made through Shopify. There isn't a way to spin up a local server on your machine for a Shopify store, we will have to sign up for Shopify Partners to create our Liquid Theme Development store and begin coding.