Edit this page

Intro to Shopify

In Shopify there are 5 important concepts to know...

Liquid

Liquid is a simple programming language that tells Shopify what to do. It is used in conjunction with HTML & CSS. There are two types of liquid tags....

For example, if we want to display out shop's name in our layout we use the output tags {{ }}...

<h1>{{ shop.name }}<h1>

my shop name
The store.name is an object. Which is our next topic...

Objects

Objects are pieces of data we can use in our store. Here are a few examples of popular objects

Templates

Templates control the look and feel of you store's content. 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.liquidto render the blog page.

Templates always end in the .liquid extension

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 the object {{ 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 in the example above I use {{ product.price | money_with_currency }} on the template product.liquid $99.00 USD will appear.

Logic Statements

Logic are conditional Liquid statements

Lets say we are working on product.liquid template 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 %}