Chapter 3

Shopify 101

Liquid

Liquid is a super simple programming language. We use Liquid to tell Shopify what to do.

Liquid can be pretty intimidating at first, especially if you have never worked with a CMS or know a programming language.

There are 2 types of Liquid tags that you will be using:

1. {% %} this is a logic tag, nothing will visually appear on the screen
2. {{ }} this is an output tag, something will visually appear on the screen

Templates

Templates always end in the extension .liquid. They can be found in your Vision folder under vision>themes>yourthemename>templates or if you're using the Shopify Admin you can access the templates by going into assets>theme editor. Examples include: blog.liquid or product.liquid

Templates control the look and feel of you shop's pages. Let's say a customer views one of your shop's products, Shopify will use the product.liquid template to show render the product page. If a customer views your shop's blog, Shopify will use blog.liquid to render the blog page.

Objects

Objects are the pieces of data we can use in your shop. If we want to get the name of a product we use the product.title object. If we want to get the name of your store we use the shop.title object.

To visually display an object we use the double bracket {{ liquid tag }}. So to make your shop's title appear on the screen we use: {{ shop.title }}. To show a product's price we use {{ product.price }}

In most cases you will need to use something called a handle to tell Shopify what "thing" you want to take data from. A handle can be thought of as a name or id.

Filters

Filters manipulate the output of objects. For example if you want to show a customer a price of a $99.00 product and you write {{ product.price }}, Shopify will display the price as 9900. I have to use a filter to manipulate the output of the product.price object. So if I use the money_with_currency filter on the product.price object it will now display as $99.00 USD

Filters look like this {{ objectname | filtername }}. So if we input {{ product.price | money_with_currency }} on the template product.liquid $99.00 USD will appear.

Logic Statements

Logic statements tell Shopify what to do. Lets say we are working on product.liquid template (product.liquid is used to render individual product pages) and want to display the message "Free shipping", but only on products whose price is greater than $100. Since the product will either have a price greater than $100 or less than $100, the if logic statement is the most appropriate statement to use.

  {% if product.price > 100 %}
    Free Shipping
  <% else %>
    No free shipping
  <% end if %>

There are other logic statements like {% for %} and {% unless %}

References

The Shopify Cheat Sheet lists all the objects, filters and logic statements. The Shopify Wiki and the Shopify Forums are other great resources.