Basic of SHOPIFY development: LIQUID template language

2023/05/23by GO RIDE

SHOPIFY is a platform that anyone can easily open online stores. Liquid is the language used to customize the online store in this SHOPIFY. Liquid is an open source template engine developed by SHOPIFY and can dynamically generate HTML.

Liquid features

Liquid is very intuitive and simple language design. For this reason, if you are a front -end engineer with basic knowledge such as HTML and CSS, you will be able to coding relatively smoothly. In particular, Liquid has the following features:

Object -Displays dynamic parts in the template.

In the example of this code, if Product.title is "Awesome T-Shirt" and Product.price is "2000", the output result will be as follows:

Control the logic of the tag -template. For example, conditional branch (IF statement) or loop (FOR statement) can be controlled.

In the example of this code, if Product.available is True (the product is in stock), the output result is as follows:

On the other hand, if Product.available is False (no stock), the output result is as follows:

Filter -Use to change the output of the object. :

In the example of this code, if Product.title is "Awesome T-Shirt" and Product.Creted_at is "2023-05-22T14: 30: 00z", the output result is as follows.

Points to be held down

The points to be aware of when using Liquid are as follows:

Liquid syntax -Liquid uses a special syntax. The object is {{ }}(Double -medium brace), the tag {% %}It is surrounded by (percentage and central brace). By understanding the syntax correctly, you can make the most of the characteristics of Liquid.
Template customization -SHOPIFY has a lot of templates, but it is important to select the best design for your site and customize it using Liquid.
Understanding SHOPIFY object* -Shopify offers many built -in objects. Understanding and using these objects can make efficient development efficiently.

*SHOPIFY object is a summary of the data registered in SHOPIFY.
For example, the object "Product" has product information (product name, inventory, price, etc.). The object "SHOP" is registered with store information (store name, location, email address, etc.).

summary

Liquid is an important tool for creating SHOPIFY custom templates. By mastering this tool, you can provide more personalized and attractive UI/UX.

To do so, it is necessary to understand the characteristics and syntax of Liquid, and the built -in object of SHOPIFY. Try Liquid yourself, referring to the code example mentioned above!

Go Ride is a digital creative house that supports EC businesses at Yokohama and LA as SHOPIFY official "SHOPIFY PLUS PARTNER".

この著者の記事一覧

One -stop offered from EC construction to advertising operation.

Go Ride, a SHOPIFY official expert "SHOPIFY PLUS PARTNER", and Google Advertising "Google Partner", "Google Partner", we have built, develop and develop e -commerce sites on SHOPIFY. Please feel free to contact us.

WHITEPAPER DOWNLOAD inquiry