- Shopifyでテーマやテンプレートのカスタマイズにはテンプレート言語Liquidを使う
- LiquidはHTMLに独自タグが混合した構文
- Liquidを使用する際には不具合が起こらないよう注意が必要
Shopifyでテーマやテンプレートをカスタマイズする際には、テンプレート言語Liquid（リキッド）を使用します。
LiquidはHTMLに簡単な独自タグが混ざった構文になっており、プログラミング未経験でも簡単に使えるのが特徴です。
この記事では、Shopifyテンプレート言語Liquidの基本的な使い方や注意点について解説します。
テンプレート言語Liquidとは
Shopifyは、本格的なネットショップを簡単に作れるクラウド型のサブスクリプションコマースプラットフォームです。
柔軟なAPIが提供されており、独自のアプリやテーマをカスタマイズして使ったり、販売して収益化することも可能です。
Liquidって何？
Shopifyにおいて、テーマやテンプレートといった「見た目」の部分を作る際に利用するのが、テンプレート言語「Liquid」（リキッド）です。
Liquidとは、Shopify共同創設者で現CEOのトバイアス・トビ・ルークによって開発されたオープンソースのテンプレート言語で、プログラミング言語Rubyで記述されています。
Liquidを利用すれば、たとえば商品の画像やタイトル、価格などの全属性を表示するオリジナルのテンプレートを作成できます。
Liquidの特徴
HTMLとShopifyデータの橋渡しをする役割を担い、通常のプログラミング言語のようにロジック、ループ、変数（データ）を使用するのが特徴です。
一方で、Liquidには一般のプログラミング言語のように複雑な構造はほとんどなく、HTMLやCSSの知識さえあれば誰でも簡単に利用できます。
「プログラミングなんてやったことがない」と不安に感じた人も、安心してください。
テンプレート言語Liquidを使って、Shopifyストアの見栄えをグレードアップしましょう。
Liquidを使ってみよう
ここでは、テンプレート言語Liquidの基本的な機能と使い方について見ていきます。
拡張子は.liquid
Shopifyにおいてテンプレートを作成するためには、「.liquid」という拡張子の付いたLiquidファイルを作ります。
Liquidファイルは、標準HTMLとLiquidの独自構文が入り混じった構造になっています。
シンプルな構造なので、HTMLとロジックをパッと見て区別できます。
中括弧の内部が処理部分
Liquidファイルの処理部分は、中括弧で囲んだ内部に記述するのがルールです。
二重中括弧「{{ }}」は、文字列を出力します。
中括弧＋パーセンテージ「{% %}」は、ロジックと制御フローを記述する目印になるものです。なお、「{% %}」の中に記述される処理部分は「タグ」と呼ばれます。
文字を画面に出力する
Shopifyの保持するデータを画面上に出力（アウトプット）します。
<span>{{ page_title }}</span>
<span>{{ shop.name }}</span>
<span>{{ product.title }}</span>Liquidにおける「データ型」
Liquidで二重中括弧「{{ }}」によって出力されるデータは、6つのデータ型のいずれかに該当します。
文字列型(string)
一重引用符(”)または二重引用符(“”)で囲まれた文字列です。
数値型(number)
整数値、浮動小数点を含む数値です。
真偽型(boolean)
true/falseのバイナリ値です。
未定義(nil)
型の定義が規定されていない値です。
プログラム言語の多くで利用される「null」と同等のものです。
配列(array)
複数の変数を保持できるインデックス付きのリストです。
配列の要素を表示するためには、「for」「tablerow」タグでループ（繰り返し処理）する必要があります。
空白(empty)
定義はされているが値が入っていない状態の型です。
未定義(nil)とは別のものになるので注意してください。
条件分岐
Liquidでもっとも頻繁に使われる処理の1つが、「もし〇〇なら××、それ以外は△△」のような分岐処理です。
分岐処理用タグは、大きく分けて3種類あります。
if
ifは、一般的なプログラミング言語でも使われる分岐タグです。
構文としては、{% if （条件式） %}で始まり{% endif %}で終わるルールになっています。
{% if product.compare_at_price > product.price %}
これはセール品です！
{% endif %}ifは、elsifやelseを利用することで複数の条件を設定できます。
{% if product.type == 'Food' %}
これは食品です。
{% elsif product.type == 'Zakka' %}
これは雑貨です。
{% else %}
これは食品・雑貨以外の商品です。
{% endif %}
case
caseは、複数の条件分岐がある場合に使用する分岐タグです。
{% case （変数） %}で始まり{% when （条件分岐する値） %}で処理を分岐、{% endcase %}で終わる構文になっています。
elseは省略も可能です。
{% case product.type %}
{% when 'Food' %}
これは食品です。
{% when 'Zakka' %}
これは雑貨です。
{% else %}
これは食品・雑貨以外の商品です。
{% endcase %}unless
unlessは、「もし〇〇でなければ」というifの否定分岐用タグです。
使い方はifと同じで、{% unless （条件式） %}で始まり{% endunless %}で終わる構文です。
{% else %}と組み合わせても使えます。
{% unless product.available %}
この商品は現在取り扱っていません。
{% endunless %}forループ
すべての商品を一覧で表示するときなどには、ループによる反復処理を行います。
反復でよく利用されるタグがforです。
forタグは{% for （値） in （配列） %}から始まり{% endfor %}で終わる構文で、最大50回までの反復処理を行います。
50回を超える反復処理を実行する場合には、paginateタグを使用してアイテムを複数のページに分割します。
<ul>
{% for product in collection.products %}
<li>{{ product.title }}</li>
{% endfor %}
</ul>なお、Liquidのループはforのほかにテーブル行を表示するtablerowもあります。
詳細は公式マニュアルを参照してください。
limit
反復する回数を指定したい場合には、limitタグを使います。
以下の例は、5回繰り返す反復処理です。
<ul>
{% for product in collection.products limit: 5 %}
<li>{{ product.title }}</li>
{% endfor %}
</ul>offset
配列のインデックスで回数を指定する場合には、offsetタグを使います。
以下の例は、インデックス1から3まで繰り返す反復処理です。
<ul>
{% for product in collection.products offset: 3 %}
<li>{{ product.title }}</li>
{% endfor %}
</ul>コメント
画面上には表示しないものの、コメントとして残しておきたいという場合もあります。
Liquidでコメントは「#」を付けます。#を付けると、その行の#以降の処理は実行されません。
{% # これはコメントです。 %}複数行に渡ってインラインコメントを付けることも可能ですが、行の初めは必ず「#」で始まる必要があります。
{%
###############################
# これはコメントです。
###############################
%}フィルター
Liquidにおけるフィルターは、Shopifyのデータを適切に表示できるようデータを加工する機能です。
通常のプログラミング言語ではデータ加工を独自で行う必要がありますが、Liquidは簡単な記述でさまざまな表示にデータを加工できます。
フィルターを適用する方法は、フィルターとフィルターパラメーターをパイプ文字列「|」で区切るというものです。
以下の例は、商品名をすべて大文字にして表示する「upcase」のフィルターを使用した例です。
{{ product.title | upcase }}Liquidのフィルターは実にさまざまな機能が搭載されているため、必要に応じたものを利用する必要があります。
フィルター機能の詳細については、公式マニュアルを参照してください。
チートシート
公式：https://www.shopify.com/partners/shopify-cheat-sheet
Liquidの機能は幅広いため、公式よりチートシートが用意されています。
詳細の機能が確認したい場合はチートシートを確認すると便利です。
Liquidを使用する上で注意すべきこと
慣れると大変便利なShopifyのテンプレート言語Liquidですが、使用する際にはいくつか注意点があります。
ファイルデプロイの際の配置ミスに注意
Liquidはディレクトリ構造が特殊なため、うっかり間違った場所にファイルを配置してしまうと不具合が起こる可能性があります。
編集やファイルデプロイの際には、間違いがないか注意しましょう。
チェックアウト画面の編集はShopify Plusプランのみ
Shopifyのチェックアウト画面の見た目を変更する場合、Shopify Plusという上位プランに加入する必要があります。
通常プランではチェックアウト画面を編集できないので注意が必要です。
外部アプリを利用すると不要なLiquidファイルが増加する可能性がある
テンプレートの編集の際に外部アプリを利用している場合、機能によっては不要なLiquidファイルが複数作られることがあります。
無駄なファイルが増えることで不具合につながる可能性もあるため、使用しないファイルはできるだけ削除しておきましょう。
まとめ
ShopifyのLiquidは、プログラミングの知識がなくてもネットショップの見栄えをカスタマイズできる便利なテンプレート言語です。
今回ご紹介したのは基本機能のみですが、他にもネットショップの見栄えを大きく変える豊富なタグを利用できます。
Liquidのさまざまな機能を使いこなし、誰にも真似できないオリジナルのネットショップを作りましょう。
