Shopifyで使われるLiquidの基本文法、使い方

Shopify内において、HTMLファイルに商品名や価格などのデータを埋め込む際に使われるLiquid。

PHPのようなWEB系の言語に似ていて、変数やループなどの概念をもつテンプレート言語（テンプレートエンジン）です。

この記事では、まだLiquidに触れた人がない人や詳しくない人向けに、Liquidの書き方をまとめました。

Shopifyで使われるLiquidの基本的な役割

Liquidは「テンプレート言語」とも「テンプレートエンジン」とも言われます。
厳密には両者の意味は違いますが、Shopifyにおいてはどちらの役割も果たしているので、正直どちらの呼びかたをしてもいいかと思います。

Shopifyサイトにおいて、Liquidは欠かせないものです。

HTMLファイル内に動的に入れたい商品名、価格、ショップ情報などを埋め込んでくれるもので、WordPressテーマ内のPHPコードのように働くことができます。
（ただしPHPほど柔軟にいろいろできるものではありませんが…）

現在、Liquidはオープンソースプロジェクトとして開発が進められ、Github上でソースコードを確認することが可能です。

https://github.com/Shopify/liquid

Liquidの基本の書き方

Liquidの書き方は、下記の2種類に大別されます。

• HTMLとして出力させる{{ }}
• 条件分岐ifなどの何かしらの処理を行う{% %}

Liquidを使ったデータの出力方法

Liquidにおいて、二重括弧{{ }}が出力せよという指示になります。

例えば、Shopifyテーマ内において商品名はproduct.titleで取得できるとします。

商品名を<h2>タグ内に出力したいのであれば、下記の通りです。

<h2>{{ product.title }}</h2>

オブジェクトproductの中に含まれる属性titleを.にて呼び出している書き方となります。

なお、もしproductが配列だった場合は、下記のような書き方になります。

<h2>{{ product['title'] }}</h2>

フィルター

二重括弧{{ }}にて出力するデータに|を使って手を加えることも可能で、それをフィルターと呼んでいます。

{{ 'hello world' | upcase }}

上記は、文字列'hello world'にフィルターupcase（大文字に変換）を適用する書き方です。

HTMLとしての出力結果は以下の通り。

HELLO WORLD

upcaseの他にも、さまざまなフィルターが用意されています。

• remove（指定の文字列を除外）
• join（配列を指定の文字で結合）
• append（最後に指定の文字列を結合）

ここでは紹介しきれないほど便利なフィルターが多数ありますので、ぜひ公式ドキュメントより探してみてください。

CSS・JS・画像などの外部ファイルの読み込み

外部ファイルの読み込みも二重括弧{{ }}で行います。

CSSを呼び出すときは

{{ 'custom.css' | asset_url | stylesheet_tag }}

JavaScriptファイルを呼び出すときは

<script src="{{ 'custom.js' | asset_url }}"></script>

画像を表示するときは

<img src="{{ 'sample.jpg' | asset_url }}">

他にも条件に応じて書き方が変わることもあるので、詳しくは下記記事にまとめました。

あわせて読みたい

ShopifyでCSS、JS、画像を読み込む方法まとめ テーマをカスタマイズしていく際、オリジナルのCSS、JS、画像を読み込ませたいときの方法をまとめました。 Shopifyでは読み込み速度を高速化させる目的で独自のCDNを用…

リンクタグ

aタグ（リンクタグ）を作るときも二重括弧{{ }}を使って下記のように記述します。

{{ 'このショップについて' | link_to: 'https://domain.com/xxxxx' }}

このLiquidコードは、下記のようなHTMLタグになります。

<a href="https://domain.com/xxxxx">このショップについて</a>

classなどを付与したいときは下記のように書くことも可能です。

{{ 'このショップについて' | link_to: 'https://domain.com/xxxxx', class: 'link-class' }}

<!-- 出力結果 -->
<a href="https://domain.com/xxxxx" class="link-class">このショップについて</a>

Liquidを使った何らかの処理の書き方

出力以外の処理を行うときは{% %}で囲います。

変数の宣言・代入

変数を宣言・代入するときはassignを利用して下記のように行います。

{% assign foo = 'text' %}

変数は、文字列（String）、数値（Number）、真偽値（Boolean）はどれも同様に扱えます。

{% assign my_string = 'Hello World!' %}
{% assign my_number = 12 %}
{% assign my_boolean = true %}

条件分岐

条件分岐はifを使って記述します。

{% if my_number == 12 %}
  条件に当てはまったときにすること
{% else %}
  条件に当てはまらないときにすること
{% endif %}

ifで始めてendifで終わります。

条件指定の際には、PHPなどと同様に論理演算子・比較演算子が利用可能です。

A == B　　AとBが等しい
A != B　　AとBが等しくない
A > B　　AがBよりも大きい
A < B　　AがBよりも小さい
A >= B　　AがB以上
A <= B　　AがB以下
条件A or 条件B　　条件Aもしくは条件Bを満たす
条件A and 条件B　　条件Aと条件Bを同時に満たす

配列のループ処理

配列をループで回して処理をするときはforを使います。

例えば、配列productsをループで回して商品名を羅列したい場合は下記のようになります。

<ul>
  {% for products in product %}
    <li>{{ product.title }}</li>
  {% endfor %}
</ul>

forで始めてendforで終わります。

配列productsをループで回す際、扱うデータをproductとして仮置きして（in productの部分）処理を実行させています。

コメントアウト

コメントアウトは{% comment %}と{% endcomment %}で囲います。

{% comment %}ここはコメント{% endcomment %}

{% comment %}
複数行のコメントも書けます
コメントアウト
{% endcomment %}